Admin navigation sidebar #509

Sinetheta · 2015-11-13T21:58:01Z

Adds a full height sidebar to the admin area
Moves the admin nav from the header to the sidebar
Nests the subnav in the main nav (visible as an open "accordion")
Adds a flyout for not active subnavs

This will be accompanied by a tiny patch to solidus_auth_devise since the current user nav items (logged in as, account, logout) have been moved as well.

resolves #498
resolves #505
advances #487

graygilmore · 2015-11-13T22:00:11Z

backend/app/views/spree/admin/shared/_menu.html.erb

-  </div>
+<nav class="admin-menu">
+  <ul data-hook="admin_tabs">
+    <%= render :partial => 'spree/admin/shared/tabs' %>


Since we're touching all of these files anyways I'd love for us to switch to the new hash syntax.

tvdeyen · 2015-11-13T22:01:28Z

NICEEE!!! 🎉

graygilmore · 2015-11-13T22:02:04Z

backend/app/assets/stylesheets/spree/backend/components/_navigation.scss

-    display: table;
-    table-layout: fixed;
+  a {
+    display: inline-block;


If it's inline-block and width: 100% we should just be able to one-line this with display: block.

Sinetheta · 2015-11-13T22:02:59Z

It doesn't address the generation of the nav at all @tvdeyen, just the layout. I'm totally open to creating this markup from whatever system we deem worthy. Right now I've just shuffled the existing partials around.

graygilmore · 2015-11-13T22:03:34Z

backend/app/assets/stylesheets/spree/backend/components/_navigation.scss

+    &:before {
+      position: absolute;
+      left: 1em;
+      transform: translateX(-50%);


If we care about Safari 8 (previous version) we'll need a mixin here.

I always forget the prefixer.

graygilmore · 2015-11-13T22:05:57Z

backend/app/views/spree/admin/shared/_sidebar_left.html.erb

@@ -0,0 +1,5 @@
+<div class='sidebar'>


Single quoted attributes 😢

But more importantly: the partial is called _sidebar_left but the class name is sidebar and the children use .sidebar-left-header.

If there's only one main sidebar I'd prefer these to all just be sidebar-#{thing}.

I was just hedging my bets...

graygilmore · 2015-11-13T22:23:53Z

backend/app/views/spree/admin/shared/_sidebar_left.html.erb

@@ -0,0 +1,5 @@
+<div class="sidebar">
+  <%= render partial: 'spree/admin/shared/sidebar_left_header' %>


Should these be sidebar_left_#{thing}? Seems like this is the one and only main sidebar. Until we're planning on having a right sidebar I'd like to kill the left.

There's currently a thing called "sidebar" which refers to the right content of a page with a 3rd level nav (e.g., /admin/general_settings/edit).

tvdeyen · 2015-11-13T22:27:17Z

@Sinetheta it's already an improvement ;)

BTW: In the settings menu, the right sub nav is somewhat misplaced:

tvdeyen · 2015-11-13T22:31:29Z

I think the settings sub navigation should also be inside a flyout. The right subnavigation normally is based on one record (ie. Product 1 -> Images for Product 1). The settings on the contrary are not related to one particular resource and it would be very nice to be able to quickly reach the sub items.

tvdeyen · 2015-11-13T22:34:33Z

The user login menu is not showing for me (fresh sandbox install):

tvdeyen · 2015-11-13T22:56:21Z

backend/app/views/spree/admin/shared/_sidebar_left.html.erb

+<div class="sidebar">
+  <%= render partial: 'spree/admin/shared/sidebar_left_header' %>
+  <%= render partial: 'spree/admin/shared/menu' %>
+  <%= render partial: 'spree/admin/shared/sidebar_left_footer' %>


Maybe now is a good time to move all sidebar related stuff into it's own folder spree/admin/sidebar?

spree/admin/sidebar |-- _header.html.erb |-- _menu.html.erb |-- _footer.html.erb

tvdeyen · 2015-11-13T23:10:46Z

Adding position: relative to body would make the sidebar 100% height:

Also, adding a background color (i.e. #EFF5FC) would be great to separate the sidebar from main content.

Sinetheta · 2015-11-13T23:41:36Z

Thanks for pulling this down to test @tvdeyen!

I'll check the settings menu when I'm back in office.
Having the settings menu in a flyout (are we talking about the "sidebar" 3rd level of nav in general?) might not be possible, as it seems quite large depending on the page.
The user login menu will require an update to solidus auth devise, since it's defaced in and I've renamed the partial.
I think a folder for the sidebar partials is a great idea
I'll check the position relative
RE: sidebar color. What do you think about coloring it in @Mandily to provide some contrast there? I think all of the colours are up for debate.

Sinetheta · 2015-11-16T21:56:45Z

So, it looks like the remaining spec are failing due to overlap of the flash with what is now a higher content area.

~~@Mandily would like to scope creep those into dismisable alerts at the top of the main content area.~~
I'd like to move them to the bottom.

tvdeyen · 2015-11-16T22:35:57Z

backend/app/assets/stylesheets/spree/backend/shared/_layout.scss

-#logo { height: 40px }
+  img {
+    vertical-align: middle;
+    margin-top: -12px; // hand-tweaking because the solid logo is bottom heavy


You should tweak the logo instead. Add some padding in the image, for instance. Lots of shops change the admin logo, so all would have to deal with this. Not ideal IMO.

Good call. That corner is bound to be problematic. Either it's a part of the sidebar which "happens" to be the same height as the .page-title or part of the main content with happens to be the same width as the sidebar.

I'm thinking that the latter might help with this positioning problem since the sidebar currently has a static width.

tvdeyen · 2015-11-16T22:39:10Z

@jhawthorn I agree. Good point.

Sinetheta · 2015-11-16T23:22:36Z

@tvdeyen in regards to the third level of navigation, I'm going to leave it where it is right now (on the right side of the main content). But I believe that @Mandily is considering a "tabbed layout" for the main content area, where the 3rd level of nav would be the tabs.

The logo is aligned with the now highest level page item, the .page-title The current user links which are defaced in by solidus_auth_devise are now placed in a sticky footer for the sidebar.

This is the little triangle guy which makes popups and dropdowns "belong" to something. This is the simplest form of those dongles, an :after pseudo element. In order to add a border to the caret we could overlay it on a :before element and use some css magic to offset them slightly. This would be a great thing to demo on a style guide/

The notable features here are - Vertical list of main nav items with icons - Active subnav is shown as an expanded accordion - Other subnavs are exposed as flyouts on hover

To distinguish the left sidebar (main navigation) from the right sidebar (3rd level of navigation which appears in the content area) we will refer to it as the .admin-nav This also fixes a css spillover from using the class .sidebar which was causing the right sidebar to be misplaced. We will, however, avoid renaming templates when at all possible to prevent breaking users Deface overrides.

Instead of using deface we prefer an empty template to override.

To prevent them from laying on top of the, now higher, main content.

Safer than specific vertical offsets is a vertically centered image.

Although this menu is inserted by the gem solidus_auth_devise, the styles have much more to do with now this particular area is styled. Since we're also talking about a very small amount of css, in a nearly ubiquitous gem, I feel comfortable including these styles in solidus itself.

This prevents the login nav from appearing to "float" beneath the admin nav when there's plenty of room for both on the screen.

spree@example.com is great, but we don't want MikeAtYahooDotCom@hotmail.com spilling out of the sidebar

Sinetheta · 2015-12-01T20:03:52Z

Good eyes @tvdeyen, it's actually any margin bottom on the last item in the .main-content which would have caused that overflow, so I added a clearfix.

tvdeyen · 2015-12-01T21:31:54Z

Perfect! 🎉 💃

jhawthorn · 2015-12-01T21:43:56Z

👍 Great! Let's get this in. Thank you @Mandily and @Sinetheta this looks great. Thanks @tvdeyen for the vigilant reviews, which improved this a lot.

forkata · 2015-12-14T19:23:54Z

I am very excited about this change 👍 Thanks for the awesome work @Sinetheta and @Mandily!

hhff · 2015-12-14T19:32:35Z

Ah, amazing and super extensible!! Love it / can't wait ❤️

athal7 · 2015-12-17T14:23:28Z

👍

jordan-brough · 2015-12-17T14:25:25Z

👍 I tried this out on our codebase last night and was amazed at how few things we're broken! :) It'll probably take us a half day or something to work out the kinks on our site I'm guessing. Nice work and great job trying to preserve backward compatibility.

Admin navigation sidebar

jhawthorn · 2015-12-17T17:43:15Z

Merged! 🎉

tvdeyen · 2015-12-17T18:01:54Z

Booyaa!!! 🤘🏻

Sinetheta · 2015-12-17T18:30:46Z

Thanks all, and big thanks to @tvdeyen without whom this would have been a much lamer UX with a lot more visual inconsistencies.

mtomov · 2015-12-17T18:52:17Z

Thank you @Sinetheta , it is very hard to pull those large changes off, really great!

jhawthorn changed the title ~~Admin nav~~ Admin navigation sidebar Nov 13, 2015

graygilmore reviewed Nov 13, 2015
View reviewed changes

Sinetheta force-pushed the admin-nav branch 2 times, most recently from 5dac418 to f3c9eb7 Compare November 13, 2015 22:05

graygilmore reviewed Nov 13, 2015
View reviewed changes

Sinetheta force-pushed the admin-nav branch 2 times, most recently from 1531885 to ea207d5 Compare November 13, 2015 22:21

graygilmore reviewed Nov 13, 2015
View reviewed changes

tvdeyen reviewed Nov 13, 2015
View reviewed changes

Sinetheta force-pushed the admin-nav branch 4 times, most recently from c11911d to 808f5cf Compare November 16, 2015 19:58

tvdeyen reviewed Nov 16, 2015
View reviewed changes

Sinetheta force-pushed the admin-nav branch from ed8f0b7 to 8d4ad2e Compare November 16, 2015 23:20

Sinetheta force-pushed the admin-nav branch from 8d4ad2e to 4c33963 Compare November 16, 2015 23:42

Sinetheta added 12 commits December 1, 2015 12:01

Move admin_login_navigation_bar to sidebar footer

3ce55be

The logo is aligned with the now highest level page item, the .page-title The current user links which are defaced in by solidus_auth_devise are now placed in a sticky footer for the sidebar.

Style admin sidebar

9730535

The notable features here are - Vertical list of main nav items with icons - Active subnav is shown as an expanded accordion - Other subnavs are exposed as flyouts on hover

Replace solidus_auth_devise deface hook

b17f186

Instead of using deface we prefer an empty template to override.

Move flash messages to bottom of content area

7c29141

To prevent them from laying on top of the, now higher, main content.

Vertically align solidus logo

0393699

Safer than specific vertical offsets is a vertically centered image.

Sticky admin nav

f788597

Add admin nav note to changelog

489dceb

Stick login nav to bottom of page if room available

f2654f1

This prevents the login nav from appearing to "float" beneath the admin nav when there's plenty of room for both on the screen.

Truncate long user emails in login nav

bb5f203

spree@example.com is great, but we don't want MikeAtYahooDotCom@hotmail.com spilling out of the sidebar

Sinetheta force-pushed the admin-nav branch from f5971d1 to bb5f203 Compare December 1, 2015 20:01

tvdeyen mentioned this pull request Dec 14, 2015

Move to Bootstrap #580

Closed

jordan-brough mentioned this pull request Dec 17, 2015

Fix method override to include block solidusio/solidus_legacy_return_authorizations#6

Merged

jhawthorn added a commit that referenced this pull request Dec 17, 2015

Merge pull request #509 from Sinetheta/admin-nav

4aed3fe

Admin navigation sidebar

jhawthorn merged commit 4aed3fe into solidusio:master Dec 17, 2015

Sinetheta mentioned this pull request Dec 18, 2015

Admin nav Sinetheta/solidus#1

Closed

jhawthorn mentioned this pull request Dec 23, 2015

Improve layout with left navigation and full width #487

Closed

		@@ -0,0 +1,5 @@
		<div class="sidebar">
		<%= render partial: 'spree/admin/shared/sidebar_left_header' %>

Admin navigation sidebar #509

Admin navigation sidebar #509

Conversation

Sinetheta commented Nov 13, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tvdeyen commented Nov 13, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Sinetheta commented Nov 13, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tvdeyen commented Nov 13, 2015

tvdeyen commented Nov 13, 2015

tvdeyen commented Nov 13, 2015

Choose a reason for hiding this comment

tvdeyen commented Nov 13, 2015

Sinetheta commented Nov 13, 2015

Sinetheta commented Nov 16, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tvdeyen commented Nov 16, 2015

Sinetheta commented Nov 16, 2015

Sinetheta commented Dec 1, 2015

tvdeyen commented Dec 1, 2015

jhawthorn commented Dec 1, 2015

forkata commented Dec 14, 2015

hhff commented Dec 14, 2015

athal7 commented Dec 17, 2015

jordan-brough commented Dec 17, 2015

jhawthorn commented Dec 17, 2015

tvdeyen commented Dec 17, 2015

Sinetheta commented Dec 17, 2015

mtomov commented Dec 17, 2015