Tripal 3: Upgrade the look of Tripal Content Pages

[laceysanderson]

With the change to Tripal 3, we move from Tripal Node Types to Tripal Content Types (Entities). This change also has a small change in UI, which is that more then one Tripal pane can be shown at once. We would like to re-think the design of our content pages to take this new functionality into account.

[reynoldtan]

Please ignore the side navigation...

Initial Mock-up: In this mock-up, each content/information is in its own window. On the top left is the title of the window/pane, and opposite to it is a window control options to allow user to manage windows. A minimize window button will collapse the window showing only the title (this will be the default operation when user clicks on the title bar), while the close button will remove the window from the windows stack list.

I have maintained the pane navigation links to look the same as tripal 2 - not only it is intuitive to user that these links are related to the content area, but it also differentiates (lots of white space) from the main navigation to the right.

The mock-up shows various content types that a pane might contain.

[reynoldtan]

Actual side navigation block:

[laceysanderson]

We (me and @carolyncaron) are liking this direction but could you make another mock-up:

• Remove the shading on the content boxes and make them match the sidebar
• Add the page title back in
• Remove the line between the table of contents and the content boxes

We are also considering a line in between the sidebar and the content boxes but we're not sure if that's necessary once the title is added back in. We just want to make sure that nobody groups all of the boxes together (sidebar and content), since the content boxes should be more related to the table of contents then the sidebar.

NOTE: For clarification when I say sidebar I mean Bioinformatics Tools, Genomic Data, Our Research and when I say table of contents I mean Overview, Pedigree, Relationships, Phenotypes.

[reynoldtan]

mock-up #3 I've added the line between sidebar and content boxes but made the line darker for contrast and clearly define the content area from the sidebar.

let me know

[laceysanderson]

This mockup feels like the perfect balance between "filling the space" and "clean and simple"! 👍 I love it! What are you're thoughts @reynoldtan? Does this one meet your design aesthetic as well?

[reynoldtan]

I couldn't agree more, big yes. Excited to write the markup...