Create proper design for user dashboard/dropdowns/etc

[Christopher Allan Webber]

We don't seem to have a clear idea how users get access to some sort of "dashboard" of what's going on... both as in terms of how they update their stuff and how they have access to "actions" of things to do. The ideas that have appeared or gone so far in MediaGoblin are:

• The user homepage has a link to settings, and also things like recently updated items appear there. Presumably favorites will appear in the future.
• The user previously had a dropdown menu that you could select actions from. (Easy to use from everywhere, probably had accessibility problems, maybe not obvious that it exists, but more applications seem to have these)
• The user has a "dashboard" on the root now which activities can be added to. However, you can't access these from everywhere... and it might not be clear that you have to go to the root to access them again.
• In Nathan Yergler's branch, more options are being added so you can add actions in settings things with navigation hooks: ​http://mediagoblin.com/tag/nav-hooks/ ​https://gitorious.org/~nyergler/mediagoblin/nyerglers-mediagoblin/commit/fc49daf00a7386bea0ac20c6c2ff77233c3a1d94

It seems to me that a combination of things is probably appropriate: a dropdown menu for tasks that you might want to do everywhere, a homepage that is "customized" for your user, the actual user profile page that contains very you-specific stuff that's both publicly visible and et cetera.

But we need a clear design. I'm not sure where the best place to compile that design is, so for now I'm opening this bug until we have some clear mockups and a plan put in place.

[Jef van Schendel]

The current situation. as the ticket describes, is that root.html contains a "dashboard" which has useful actions and links for users. Those show when the user is logged in. But as cwebber points out, you'll need to navigate back to root every time you want to use one of these links.

I propose the following:

​http://schendje.fedorapeople.org/goblin/dropdown/mockup.png

The upper part shows the header (similar to our current header). On the left is the logo of the website (in our case, "MediaGoblin") and on the right is a button containing an arrow (or something similar).

After clicking this button, the header enlarges to show different actions and links. Instead of a dropdown, which is overlaid on the page, this literally makes the bottom of the header drop down, pushing the rest of the content downwards.

This would solve several problems:

• Provide a fixed locations for users to access useful actions and links, from every page.
• Improve the design for the header. Until now I have not been able to find a satisfactory header design.
• It would be easy to integrate in our responsive design, so it's usable on both desktop and mobile devices.
• It would even work with JS disabled.

Additionally, since the header would not contain much, it could be used as a notification bar by adding icons or otherwise alerting the user of an update.

[Christopher Allan Webber]

This technically landed. I think there could be improvements to this... it doesn't look as nice as schendje's original mockup as in terms of the arrangement of things, and maybe we should re-evaluate that mockup with what we have since we rushed some reorganization before release.

But technically, we have enough accomplished here to consider this closed (with last release, in fact!)