NightScript370
commented
1 year ago https://github.com/Elyahu41/royzmanimwebsite/commit/5e39dd2798bf97014a36141b173142bd6c87a600
This commit removes ID's from the equation, instead opting for attributes. As such, we could now querySelectorAll them instead, and fetch for multiple. This works great, because I switched to having both displays on the same HTML files (in hopes to get everything in a singular HTML page, ala #1). The base work for multiple layouts now works, but now I need to actually program them well. The main post will be updated with a TODO-listing.
The layout is probably the most important thing to consider right now. On the default website, there is much wasted space because of a max width, which meant scrolling was necessary. However, on a screen which can accommodate more content, why not use what we're given?
Thereby, it's time we designed three different layouts for the daily view, depending on which screen size you have available:
Desktop Layout
The rules and information should really all stay in the same y axis as the times it'd be for. Thereby, I've came up with a grid mechanism, with a sidebar that'll span 40% of the screen and the zmanim that'll span the other 60%. The Zmanim will be listed in an accordion style, meaning clicking on the name for one of them will mean bringing up the info immediately below it. Also, the sidebar is split into two different sections.
TV Layout
These TVs have A LOT of horizontal space, but not vertical. Thereby, since they either way won't be seeing the information on the zmanim, we could just trim out all the horizontal fat by putting all the zmanim in the same horizontal line, similar to weather apps.
If they want to see information, they can click on the zman name to have a modal pop up with the relevant information. The information will be split into three, and span on top on top of the zmanim themselves
Mobile Layout
This is not necessarily a mode, but rather a feature of creativity within limitation. Since there is no extra space to use, there wouldn't be a way to implement a grid in the first place, so the layout of being a big column stays the same. However, it will still be affected by the setting of whether it would have been under the desktop layout or the TV layout had the screen been bigger. While the times will still be the list design regardless of the layout, hitting the button would carry over the property from the specific layout:
Now, within the pillar, the groups of information will also persist from the modes presented prior. In other words, users who set their mode to desktop will get two groups while users who set their mode to TV layout will get three groups.
The real question is, though, what's the cutoff point? Bootstrap's breakpoints should be a good reference of when to start hosting it in pixel size, but if we could do by minimum aspect ratio, I'd like to instead suggest having 16:9 be the above full layouts with below being the mobile mode.