Mobile Styling (WIP)

[zysim]

Closes: #12

[zysim]

My idea for restyling is as follows:

• If the screen is too narrow (< 1,200px), set the table to have 100% width
• On mobile devices in landscape (max-height: 400px), push the footer to the right of the screen, and have it be a vertical bar instead

On 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.

[dshepsis]

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).

[zysim]

Sounds like a better idea. And yeah, table cells are broken when the screen's too small. I thought of three things:

• Let the table overflow in the x-axis, and give the ability to scroll (I for the life of me couldn't get scrolling to work though); or
• Reorganise the widths of the columns, and maybe swap header text out for just icons
• Horizontal accordion. I.e. columns can be expanded or collapsed

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.

[dshepsis]

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.

[zysim]

Screw it; either desktop or DS support only. Nothing else.

[zysim]

On mobile:

• In landscape: footer's hidden
• In portrait: footer's shown, and preview takes up the full width of screen
• In both modes: table is scrollable on both axes

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):

[dshepsis]

I like the hamburger menu, but it has a couple styling issues which I think should be fixed.

1. On very short screens, the menu button can overlap the menu items:
   
   This is because the menu button isn't actually part of the flex container with the menu items. Instead, they're padded from the top with a "buffer" div which shrinks due to not having its 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.
2. The menu's background is set to 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.
3. The borders on the menu are really hard to see against the light gray background of light mode. I suggest you look at the way hamburger menus on other sites/apps maintain contrast.
4. The styling does not play well with the current dark mode library, since the positioning causes the text to be isolated from the blend mode. This will ofc get fixed when I replace the dark mode with more regular CSS, but maybe you would like to find a solution in the mean time.

Overall good job so far!

[zysim]

Oh yeah this isn't actually completed yet. I should've clarified. I'll fix all the things... tomorrow.

[zysim]

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.

[zysim]

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.

[zysim]

CSS Grid is weird man

Very tired to explain. Any questions just ask I'll answer tomorrer.

[zysim]

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.