Look & Feel for Preferences section


(Adnan) #1

Currently the preferences section navigation feels cluttered. Could the navigation look & feel more like Foundation’s vertical icon bar ( http://foundation.zurb.com/docs/components/icon-bar.html )? In my opinion it would be cleaner and easier to read. I think even the admin section could use something like this.


(cpradio) #2

I like the idea, but I think you need to go a step further and indicate where the current navigation would fit into the vertical bar you suggested.

Obviously messages would be under Mail, would a slide-out menu occur so you can select All, Mine, or Unread when you hover over Mail? What about mobile/keyboard users?


(Adnan) #3

How about something like this? Icons might not relate to the title, just a quick example.

“All, Mine or Unread” could show on hover, or they could be tabs when “mail” is clicked. Foundation has tabindex enabled ( Icon Bar | Foundation Docs ), I’m sure other keyboard control could be added.

Regarding mobile, I have to scroll down to view initial profile fields, instead could navigation options be placed within a dropdown?


(cpradio) #4

Sweet! I like your mockup even more now :smile:

The horizontal navigation after going to a vertical navigation solves the mobile issue (as hover menu would never work, and click menus would be okay, but if not needed, all the better).

I’d take it one step further and combine the likes in the vertical navigation and let them be separate by horizontal navigation on the right. You could probably do the same for Topics, Posts, Bookmarks, and Edits too. As those all really go together too. And that makes your vertical bar much smaller.


(Adnan) #5

Good idea. Not sure what icon to use for ‘Topics’.

I think avoiding hover menus would be ideal, on mobile that would be hell to use.


(cpradio) #6

Just use the Posts one, and then the sub-navigation would be Topics | Posts | Bookmarks | Edits


(Adnan) #7

Is this something Discourse staff would consider implementing?


(Jeff Atwood) #8

I don’t oppose it, but I personally don’t see much difference… it looks like there is a <br/> after the text and it becomes multi-line rather than one line?

So it takes up 3x the vertical space?


(Adnan) #9

Yes, that line break can be removed, but base on @cpradio’s comment, we could have ‘Home’, ‘Topic’, ‘Likes’, ‘Badges’ and ‘Mail’, additional items can be tabs, as displayed on the mock up.


(Adnan) #10

Here is a grouped version of navigation.

Grouped section
Topic: Posts, edits, bookmarks
Likes: given, received
Mail: all, read, unread.

This would kinda resolve long scrolling on mobile preference section. Ideally, navigation would be placed in a dropdown for mobile. Saves major amount of space.