Current Detail View Version

So, I was playing around with detail view, when what I assume is its Material update snapped into place. However, this version doesn’t handle wide screens very well at all, and seems to be capped at a width of 500px regardless of screen size.

class SlideshowPage__main gets overall screen width, subtracts 500, then divides by 2 and sets that as the padding left and padding right. A max of 500px on desktop is huge waste of space.

So two suggestions for the Devs, a short term fix and a long term fix:
Short term - The padding on the Detail View should be percentage or some other relational type. 20% padding looked good to me, personally. This would then allow a quick update to the inline card types to act (and look) like their standalone versions if screen size is greater than X value (not sure when it should switch). Or if screen size is below a threshold (i.e. phone screen) the padding can go away.
Downside of this implementation would be a screen size of ridiculous width would render weird, but that problem can be easily mitigated other ways.

Long term - Wide screen monitors are pretty commonplace nowadays. So I suggest a redesign of what a “wide screen” detail view is. My thoughts for this are similar in concept to the Onboarding view currently. On phone, everything is stacked vertically. On tablet, its a horizontal and vertical stack combo.

Either way 500px is not an appropriate absolute max width.

8 Likes

Tagging @Mike_Moss @Arthur_Rallu and @morgan as the UI peeps that I’m aware of.

2 Likes

great suggestions

1 Like

Thanks @Bahbus! These are great suggestions - in fact, your proposed long term solution is something we’ve discussed this past year and is definitely on our radar. We hope to have some cool new large screen experiences sometime soon. I agree that capping the width is not ideal for larger displays – it’s currently a compromise we’re taking to mitigate a bunch of issues that arise when the detail becomes very wide. So we’re planning to create a deeper, more thorough solution in the future that is closer to your long-term solution.

8 Likes

Fair enough and awesome to hear. In the extreme short term, could we get it capped just a little bit higher at, say, the 6-700px range?

2 Likes

Yes please papi

2 Likes

Yes, please make it wider. At the very least make the Detail View and Form views a consistent width…please!

Detail View on top Form View on bottom

3 Likes

@Bahbus As @morgan mentioned, we’d like to improve our desktop detail views.

With that in mind we’re looking for examples of detail views with lots of attributes, and embedded objects, such as tables.

If you’re comfortable sharing an example detail view w/ us in a screenshot (with data blurred out perhaps), it will give us some real world, robust examples to keep in mind.

1 Like

These are some real world examples kinda, See below, the view looks so small

Product Filter Part 1

3 Likes

Current example:


The overall width I feel it should be closer to in the short term (with, ideally, the _Inline views then also updated to match their full screen versions styling since space would definitely allow for it):


This one I hardcoded the padding to 20% on the left and right for the example.

2 Likes

yea this definitely needs attention yesterday.

1 Like

yes make it wider please. It looked fine previously but now the desktop detail view is so weird.

1 Like

Form and Detail views should least be consistent.

Use of CSS media queries could easily be used to make the display Mobile and Desktop friendly.

1 Like

840px would be better based on the current trend for screen sizes.

But preferably properly responsive or user/developer controlable

1 Like

Well I personally dislike the use of any absolute values in CSS unless absolutely needed. Especially if the backend is just doing math to make it seem dynamic. I mean, yeah, CSS doesn’t support relative values in every part of it across the board, but where it can, it should be used - in my opinion.

2 Likes

I agree.

Reason I said 840 px is that the resolution is greater than that you could assume it’s some sort of desktop or widescreen tablet.

2 Likes

Ooooooo I see what you mean.

1 Like

i agree that it should get wider, i don’t like how it looks now, looks really weird like a fillet column. Please work this , it is not an issue functionality but it is as important as if it was, in my point and from my customer point of view.

2 Likes