Improve layout with left navigation and full width

[Mandily]

Stembolt is putting effort into improving the overall experience of the Solidus admin. We’d like to take an iterative approach, with smaller changes that make it easy to upgrade.

In the first phase we want to move the navigation to the left of the screen and make the application span 100% width. This will make it easier to add more menu items and frees up space at the top. Using the full width of the screen will help to maximize space and is one step closer to a responsive design. This puts us more in line with the upgrades made in Spree 3.0, which we consider to be a successful improvement from a UI perspective.

While we’re setting up the framework for a responsive design, the middle content area and navigation deeper than the second level will remain unchanged until a future phase. This means that although the width of page is 100% of the screen, the middle content will remain at its current width.

The left navigation will be organized the same, but will be formated in a vertical fixed width layout. Longer navigation items may wrap if they don’t fit within the specified dimension. Users can collapse and expand the menu by clicking on the parent item. Only one sub menu will be viewable at a time to prevent overwhelming the user.

The link to store is moved to the right of the logo and access to the user’s account and logout functions will be moved to the bottom left of the menu. This will maintain easy access, reduce prominence on the page and align with the rest of the design layout visually.

See the attached wireframe for all layout details.

We’re looking for feedback on the outer design elements only. We recognize further enhancements will be needed, but would like to make this one the best possible before working through the others.

Ideally we’d like to get these first improvements in for 1.2 and set up future improvements for each successive release to keep an easy upgrade path and manageable patch sets.

[tvdeyen]

Nice. I'm looking forward to a much improved backend.

Please consider to make the first level menu items hover able, so they reveal second level items.

Currently in Spree 3 the user has to click way to often only to see them. One click to open the panel, second click to visit the desired page.

Thanks

Am 06.11.2015 um 00:11 schrieb Amanda Healey [email protected]:

Stembolt is putting effort into improving the overall experience of the Solidus admin. We’d like to take an iterative approach, with smaller changes that make it easy to upgrade.

In the first phase we want to move the navigation to the left of the screen and make the application span 100% width. This will make it easier to add more menu items and frees up space at the top. Using the full width of the screen will help to maximize space and is one step closer to a responsive design. This puts us more in line with the upgrades made in Spree 3.0, which we consider to be a successful improvement from a UI perspective.

While we’re setting up the framework for a responsive design, the middle content area and navigation deeper than the second level will remain unchanged until a future phase. This means that although the width of page is 100% of the screen, the middle content will remain at its current width.

The left navigation will be organized the same, but will be formated in a vertical fixed width layout. Longer navigation items may wrap if they don’t fit within the specified dimension. Users can collapse and expand the menu by clicking on the parent item. Only one sub menu will be viewable at a time to prevent overwhelming the user.

The link to store is moved to the right of the logo and access to the user’s account and logout functions will be moved to the bottom left of the menu. This will maintain easy access, reduce prominence on the page and align with the rest of the design layout visually.

See the attached wireframe for all layout details.

We’re looking for feedback on the outer design elements only. We recognize further enhancements will be needed, but would like to make this one the best possible before working through the others.

Ideally we’d like to get these first improvements in for 1.2 and set up future improvements for each successive release to keep an easy upgrade path and manageable patch sets.

—
Reply to this email directly or view it on GitHub.

[Mandily]

We've actually got that feature already spec'ed out in a future improvement. Good to see we're thinking in the same direction.

[cbrunsdon]

Okay, we're going to shoot to get this in as the big back-end change for 1.2.0. We have a competent frontend person earmarked to do this in as minimally obtrusive way as possible, but everyone will almost certainly have to update any defacements or view overrides they have in the menu as it exists now.

[tvdeyen]

That's absolutely okay! One of the, sadly lesser used, features of deface is the original key. This should give all extension authors warnings of their overrides that need to be reviewed.

Go for it.

[jhawthorn]

Closing as #509 has been merged. 🎉