Open zysim opened 3 years ago
My idea for restyling is as follows:
max-height: 400px
), push the footer to the right of the screen, and have it be a vertical bar insteadOn a mobile page:
As you can see it doesn't look too good for now, particularly with how you have to scroll the page to see the end of the footer, for example. But this is my general idea with presenting landscape mobile layouts to the user. For mobile portrait layouts I'm still thinking about em.
Not a fan of vertical text, or the way the headers and some cells are broken. Maybe the solution is to have the footer be hidden on small screens, with a button to open a modal or just a separate page or something with all the same info (plus settings when we add those).
Sounds like a better idea. And yeah, table cells are broken when the screen's too small. I thought of three things:
Also man like; the fact there's so much space on both sides of the preview image being wasted tho. I feel like they should be used up somehow.
Having the table scroll in X and Y is probably the way to go, Getting things to scroll nicely can be annoying in general. That's part of the reason there's an extra DIV around the table already.
Maybe you can combine the header icons with the collapsible columns. The user could tap on a header, which would replace it with just an icon and make the column narrow. Then, they could tap the icon to expand the column to full-width again. We'd probably want to record which columns the user has minimized into localstorage.
As for the space next to the image, I agree that it's not ideal, but I can't really think of a way to get rid of that in landscape view. The images are 16:9, so putting them to the side of the table would make the table very narrow on most screens. Even if we cropped them to 4:3, it would still take up most of the screen. You could use that extra space for other things, like a settings button, I guess.
Screw it; either desktop or DS support only. Nothing else.
On mobile:
Table no matter on mobile or not, remains at 1500px wide. I'll work on collapsible columns (and maybe even rows) next.
Screenshots below (assuming Galaxy S9 dimensions at 360px by 740px):
I like the hamburger menu, but it has a couple styling issues which I think should be fixed.
flex
property initialized to something that prevents shrinking, like flex: 0 0 auto;
. That said, I don't think that's a good solution by itself because it can cause part of the menu to be hidden under the table. You could fix that with z index, but you'd have to check all the edge cases to be sure.transparent
, which will make it hard to read if it overlaps the image. It currently goes under the image due to no z-index, but I thought I should bring it up in case that's the route you take to fixing point 1.Overall good job so far!
Oh yeah this isn't actually completed yet. I should've clarified. I'll fix all the things... tomorrow.
I think I'm removing that left menu. No point having that when you can just list the two links out, like in other layouts. Frankly I simply wanted to experiment with building a left menu.
W.R.T. your comment; my original idea was that the left menu stops before both the table and the image, as you're aware. If there are more items, then the menu scrolls; if an item is too long, it simply gets truncated before the image.
All that being said, I don't think we're having more items anyway, since this is just from the footer. When the time comes where we do need more items I'll slap that menu back in, but better.
CSS Grid is weird man
Very tired to explain. Any questions just ask I'll answer tomorrer.
I don't know why, but for some reason, the mobile layout has this huge whitespace that extends past the main contents downward. I've already set <html>
, <body>
, and <main>
to have a height
(and sometimes width
) of 100%, as can be seen in css/style.css
, but it still displays that whitespace*. It can't be due to the table element; the table itself is constrained to its grid area, as expected, and the height of the whitespace isn't remotely close to the height of the tbody
. But there's still all that whitespace anyway. Using the devtools, no element gets highlighted that covers the whitespace either. I.e. the site renders all that extra space, but nothing is (seemingly) responsible for this. (Yes I know the darkmode element does cover all that space, but removing the call to render the whole darkmode element still produces this whitespace). Also, when in portrait mode, the table just refuses to limit itself to the width of the screen. The entire <main>
component renders past the screen width, and you have to scroll (to see the preview image and the footer, as well as the table contents, of course).
* You do need all of em to have height: 100%
btw; removing any one of em causes the preview image to explode in size, and the table to get squashed out of existence.
Closes: #12