Admin Facelift. Take 3

NyteOwl · 2006-09-26 23:11:43

I was writing an article today when a friend looked over my shoulder and we got to talking about Textpattern. In the course of the discussion and idea developed, that while it may not be fully practical is certainly reasonable from an intuitive, workflow perspective.

Basically what we thought up is a “Write” interface that is layed out like the Hemingway blog theme. If you are not familiar with the Hemingway theme, it puts the articles in the top portion of the page and any other links, navigation etc in a seperate section at the bottom. Here is an example screenshot http://warpspire.com/images/posts/hemingway_home.png

Now what I’m talking about is put the layout (very roughly) so that it flows logically in how one writes:

<pre>
Title
Article Body
Excerpt
——————————————————————
Keywords Section Date
Image Categories Status
Comments Advanced Preview

Publish </pre>

This would also permit the expansion of the content textareas to be made a elastic or at least a bit bit larger giving more “elbow room” for editing

Ace of Dubs · 2006-09-27 16:47:40

Hmmm…. I say Hmmmmmm Mr. Owl

You may be onto something here.. stay tuned

mercury · 2006-10-17 22:11:48

it seems like the compatibility with 4.0.4 is broken. am i right?

Ace of Dubs · 2006-10-29 15:16:45

hcgtv · 2006-10-29 15:29:07

Ace, I’ll take 5 of those ;)

squaredeye · 2006-10-29 23:45:30

Ace,
Ditto. Nice work.

hakjoon · 2006-10-29 23:51:41

That’s some nice stuff there.

I’d like the navigation to be collapsible (maybe Scriptaculous accordion style) and for me it would be cool to have them be position:fixed effectively creating a navigation frame to the interiror content.

BTW let me know if I can help with coding.

Last edited by hakjoon (2006-10-29 23:54:35)

Ace of Dubs · 2006-10-30 12:41:34

Update: Finally getting my hands dirty and have my HTML template set up and validating to Strict 1.0.

All the necessary CSS hooks are in place and I have decided to implement consistent naming convention with underscores separating multiple words (hyphens dont let me double-click select entire ids and classes)

I’ve also incorporated hakjoon’s request for collapsable navigation using the very same JS that TXP uses for the existing display toggles. I didn’t want to deviate too much from what we already have, but you are welcome to tinker with your own JS when I post the code.

Today I’ll be dipping into the CSS and having fun. Stay tuned TextFans!

squaredeye · 2006-10-30 13:07:10

Ace of Dubs,
well done, This is exciting stuff.

jamiew · 2006-10-30 15:46:57

I have decided to implement consistent naming convention with underscores separating multiple words (hyphens dont let me double-click select entire ids and classes)

Could you elaborate… ?

Very excited to see the new look & feel in action! Happy about the left nav being switchable to the top, too, it might feel a little horizontally heavy otherwise.

Ace of Dubs · 2006-10-30 21:59:42

Ok Guys..this is it.

After much niggling and tweaking, you can finally see a live example here

I apologize in advance for my wacky CSS style. I always hated that indentation rule but you can get get the indented version here

Noteworthy:

re-arranged advanced options to put most used items at the top
Added alt text and category to image upload
Added category to file upload

This is all still very rough and there are some issues I have yet to sort out..like

The use of forms within a form (For image and file uploads)
IE debugging
Most importantly…how to switch from side to top nav with pure CSS…as it stands now I cant think of a way to do this without using separate html templates.

Feel free to rip the code to bits and provide feedback here.

Ace of Dubs · 2006-10-30 22:01:04

jamiew wrote:

Could you elaborate… ?

Its just a preference I have for not using hyphens in class/id names..this way i can select them with just a double click, copy/paste them around, etc

Last edited by Ace of Dubs (2006-10-30 22:01:46)

Textpattern CMS

Textpattern CMS support forum

#157 2006-09-26 23:11:43

Re: Admin Facelift. Take 3

#158 2006-09-27 16:47:40

Re: Admin Facelift. Take 3

#159 2006-10-17 22:11:48

Re: Admin Facelift. Take 3

#160 2006-10-29 15:16:45

Re: Admin Facelift. Take 3

#161 2006-10-29 15:29:07

Re: Admin Facelift. Take 3

#162 2006-10-29 23:45:30

Re: Admin Facelift. Take 3

#163 2006-10-29 23:51:41

Re: Admin Facelift. Take 3

#164 2006-10-30 12:41:34

Re: Admin Facelift. Take 3

#165 2006-10-30 13:07:10

Re: Admin Facelift. Take 3

#166 2006-10-30 15:46:57

Re: Admin Facelift. Take 3

#167 2006-10-30 21:59:42

Re: Admin Facelift. Take 3

#168 2006-10-30 22:01:04

Re: Admin Facelift. Take 3

Board footer