Improve sidebar and wide screen styling

[brianjhanson]

Updates the global sidebar styling and adds the ability to collapse the global sidebar to get it out of the way. This also adds a max width to the main content area for people with ultra wide screens. The max width is a CSS variable so we can easily tweak it during the beta, or can be tweaked via some custom CSS.

CleanShot.2024-02-02.at.14.47.08.mp4

[linear]

CMS-1220 Improve sidebar and wide screen styling

[brandonkelly]

@brianjhanson Looks really good! Let’s have the global header stay within the same maximum width as everything before it. (The bottom border should still stretch all the way though.)

[AugustMiller]

Brian, you'd asked about things that "appear conditionally" on the call, this morning—the devMode caution tape is the only other thing I can think of. That's probably just a static include, not JS-driven… so probably already handled? 😎

[brianjhanson]

Brian, you'd asked about things that "appear conditionally" on the call, this morning—the devMode caution tape is the only other thing I can think of. That's probably just a static include, not JS-driven… so probably already handled? 😎

Thank you! You're correct, that's already handled. I'd kind of like it to be more of an obvious indicator, but that's for another PR.

[wmdhosting]

just tested.. here is how its looks on bigger screen.. and some bugs
CHROME >> Windows 11

[brandonkelly]

@wmdhosting The SEOmatic sidebar bug is another sypmtom of nystudio107/craft-seomatic#1412, which Andrew is working on a fix for.

I’ve fixed the “Entry Types” bug – thanks for reporting that.

Design is subjective but I’m not sure there’s a way we could nicely style Craft for 5060px-wide viewports. Feel free to post a new feature request as a discussion, about making the max-width configurable, though.

[wmdhosting]

OK :)

Just info, have wide screen and everythign works perfect as it is now.. for main content area

[aelvan]

Just another subjective opinion; even at ~2500px I don't really see the point of restricting the max width. Especially for element indexes, where it's actually useful to add a lot of columns and use the available screen estate to get more information at a glance. For the edit page area, it could probably benefit from an even narrower max width, but maybe that can be solved without limiting the element indexes?

Also, the visual hierarchy between the main menu, section menu, and the element index is kind of in limbo at the moment. Partly because the section menu isn't connected to the main menu anymore, and the design for the element index is the only thing that isn't flat. But this is maybe WIP?

[brandonkelly]

Especially for element indexes, where it's actually useful to add a lot of columns and use the available screen estate to get more information at a glance. For the edit page area, it could probably benefit from an even narrower max width, but maybe that can be solved without limiting the element indexes?

Agree with that. @brianjhanson let’s work on making it possible for certain pages to opt out of the max-width, and take advantage of it on all element index pages.

[brandonkelly]

We decided to just remove the maximum content width for now. (#14321)

[thupsi]

Well... it was nice while it lasted! IMO the entry editing screen was much more usable, focused, and just plain better looking with the constrained width. Now it's a sea of white again and especially the text fields look wrong with that line length.

But yes, table views with lots of columns warrant special consideration. I think on wide screens there could exist a toggle to turn the constraint on/off. IIRC Notion had somethink like that for tables.

Also maybe the header should not be aligned with the narrow container (that would definitely be the better choice if the content width was variable, to have a constant visual anchor).

Anyway, I don't want to sound negative, I think the new sidebar looks very nice indeed, and the fact that it's collapsible actually helps a lot on narrower viewports (and I suspect that will be a larger demographic than people with huge screens).

[wmdhosting]

what kind/size of monitor do you have
if you have big monitor .. just resize browser window when you do entry work.. if you have it all the time monitor wide..
Or snap to predefinied size.. most wide monitor have that option

[thupsi]

I actually have 3 monitors on my desk, with 3 virtual desktops, so it's like having 9 monitors. As you can imagine I do a lot of window managing, moving, snapping and resizing and I use assisting software for that. Sometimes though, I like to go full screen to focus on stuff.

I also design sites and interfaces daily for a living, some of them with complex forms and UIs, backend dashboards etc. So, I appreciate the pitfalls and complexities of adapting layouts to all kinds of screen sizes. I try to approach things with an algorithmic mindset and sensible constraints, so the UI adapts to the user, not the other way around. It's not easy, I'm not perfect at it, but I enjoy the iterative nature of the process. But now I started bubbling!

Where was I? 😂 Ah yes! I trust the matter of the content width will be improved sometime down the road and I wouldn't dream of imposing my own preferences on the design of a product used by thousands.

[wmdhosting]

Man you cant be focused with that setup anyway :)

[thupsi]

I've found my ways! :) I miss a minimal setup though. Anyone want to gift me a Vision Pro to try? 😉

[thupsi]

Also, I've raised twin boys: I'm trained to focus under extreme conditions 😜

[leevigraham]

@brandonkelly How's this extra wide layout look on the Vision Pro ? :)

[brandonkelly]

Safari won’t let you resize any wider than this, unfortunately @thupsi!

[thupsi]

I think it doesn't let you because you would knock over you furniture @brandonkelly 😁🤣