Mobile Issues
So, a couple things don't work and/or look bad on small screens. Despite the fact that I finally stopped setting styles using pixels. Which is a remarkably bad practice, but still for some reason a tough habit for me to break.
Anyway, here are some persistent bugs with the mobile version of my site:
The menu, which now collapses to a toggle button below Bootstrap's medium screen size (which I believe is 768px). However, when you click the hamburger icon (aka the 3 horizontal bars that are the universal symbol for an expandable menu), the menu items are ugly, and also they push the rest of the content down the page. Should instead become a dropdown menu that floats above the page content.
So, here's the homepage on my laptop screen:
And here it is on mobile (Galaxy S8) - with menu expanded:
The Lightbox feature. This used to handled by a complex function in App.js, which got passed as a property to every page so that any image could by magnified. However, I recently converted it to an HOC (because I finally got my head around what those are and why they're useful), so now every component that displays images is wrapped in withLightbox so that clicking an image opens a modal lightbox for detailed viewing:
Except on a small screen, where the component I'm using (react-image-lightbox) apparently doesn't work. The modal opens, but the image is just an off-center thumbnail that's smaller than the image you were trying to expand. Plus, the non-lightbox versions of the images are already plenty big enough for a small screen; so the feature is unnecessary as well as non-functional.
(Also, note that the displayed image does not match the title or description. It's showing the info for the previous image, which it is apparently unable to display because of the size.)
The basic layout of the Artwork page. By default, once an album is selected, the feature stack (left column) is opened to the thumbnail gallery panel, since that's the only feature that's guaranteed to be present for every album or image.
Artwork page - initial view:
After selecting first album:
But on mobile, that means you have to scroll all the way to the bottom of the gallery in order to see the image you selected. And you really don't even need the gallery view - you could just step through the gallery using the Forward and Backward buttons below the Display image.
After selecting the first album on mobile, you have to scroll 3 screen-heights down to see the first image:
There's several other issues, but that seems like enough for now. Luckily, I found a useful tool: a library called react-sizes, which contains an HOC that puts custom size properties into wrapped components. Like, for example, an isMobile property, which could be set in the HOC as:
isMobile => props.width < 480, or something along those lines. And then disable or reconfigure certain aspects based on that information, to make the mobile experience a little less obnoxious.
Anyway, here are some persistent bugs with the mobile version of my site:
The menu, which now collapses to a toggle button below Bootstrap's medium screen size (which I believe is 768px). However, when you click the hamburger icon (aka the 3 horizontal bars that are the universal symbol for an expandable menu), the menu items are ugly, and also they push the rest of the content down the page. Should instead become a dropdown menu that floats above the page content.
So, here's the homepage on my laptop screen:
The Lightbox feature. This used to handled by a complex function in App.js, which got passed as a property to every page so that any image could by magnified. However, I recently converted it to an HOC (because I finally got my head around what those are and why they're useful), so now every component that displays images is wrapped in withLightbox so that clicking an image opens a modal lightbox for detailed viewing:
Except on a small screen, where the component I'm using (react-image-lightbox) apparently doesn't work. The modal opens, but the image is just an off-center thumbnail that's smaller than the image you were trying to expand. Plus, the non-lightbox versions of the images are already plenty big enough for a small screen; so the feature is unnecessary as well as non-functional.
The basic layout of the Artwork page. By default, once an album is selected, the feature stack (left column) is opened to the thumbnail gallery panel, since that's the only feature that's guaranteed to be present for every album or image.
Artwork page - initial view:
But on mobile, that means you have to scroll all the way to the bottom of the gallery in order to see the image you selected. And you really don't even need the gallery view - you could just step through the gallery using the Forward and Backward buttons below the Display image.
After selecting the first album on mobile, you have to scroll 3 screen-heights down to see the first image:
isMobile => props.width < 480, or something along those lines. And then disable or reconfigure certain aspects based on that information, to make the mobile experience a little less obnoxious.
Comments
Post a Comment