My-Little-Forum / mylittleforum

A simple PHP and MySQL based internet forum that displays the messages in classical threaded view (tree structure)
GNU General Public License v3.0
124 stars 48 forks source link

Additional Style considerations brought to light by the recent mobile friendly adjustments #747

Open joeiacoponi1 opened 1 month ago

joeiacoponi1 commented 1 month ago

Note: The recent mobile changes to the forum look great. It is so much more readable than anything in the past.

During my testing, a few additional items came up, so here they are for posterity:

1) On mobile (iPhone 15 Pro), there is a strange inconsistency in the "New topic" section when I change the zoom percentage.
At 100% zoom, the font size and line spacing are fairly comparable to the "Title / Options Header" section directly above it.

100% zoom: Screenshot 2024-09-30 at 9 33 30 AM

However at 75% zoom (and certain others), the font size and line spacing of the "New topic" section (specifically New topic / Refresh, Order, Fold threads, Table view) are outsized, and interestingly, larger than what I displayed at 100% zoom.

75% zoom: Screenshot 2024-09-30 at 9 33 16 AM

2) There is a certain range of viewport width (~623px - 923px) where the display is in desktop mode, but the Sidebar is cut off to the right. This is the same as currently displayed in 20240827. It may be worth switching to mobile view once the sidebar begins to get cut off.

623px: Screenshot 2024-09-30 at 9 49 21 AM

773px: Screenshot 2024-09-30 at 9 49 59 AM

923px: Screenshot 2024-09-30 at 9 50 08 AM

I don't know if there are any devices with viewport width in that range today, but I thought it useful to share here.

Joe

auge8472 commented 1 month ago

Thank you for your report. Let's address both issues separately. I would like to ask you in advance if you have a link to the test forum for me (also by e-mail instead of here in a public comment).

Font size zooming

The inconsistent change of font sizes in the heading of the sidebar and its content as well as the page header is due in no small part to the outdated and only partially modernised definition of font sizes. When the development of My Little Forum began around 2003, the modern browsers was Microsofts Internet Explorer 6, Mozillas Application Suite (successor of Netscape 4.7 and predecessor of Firefox and Thunderbird on one hand and Seamonkey on the other) and in whatever state the Safari was (Beta or 1?). It was a time of workarounds for shortcomings, proprietary features that only existed in one browser and inconsistent implementations of common functions.

At that time we needed things like a font size of 100.01% for the document (for MS IE) or for specific elements 13.4px instead 14px (for Netscape Navigator, that was outdated at that time but still used by quite a few people). These workarounds were transferred from MLF1 to MLF2 in 2007 and many of them remained the times. Even though we have overhauled many places with their own font size definition (of which there are still far too many) there are remainings left.

Normally we replace the font size with values in the units em and/or rem when we come across those definitions. That makes them zoomable (doesn't (or didn't?) work in every browser with pixel sizes). But we (at least I can say this for myself) never ran a complete scan for the many font size definitions, their relationships with each other, the size graduation of predecestors ((hypothetical construct of an) element with a font size of 0.82em of its ancestor element with a font size of 0.82em wich itself is a child of an element with a font size of 13px and so on).

I will go through the entire CSS code again and check the font size definitions. Many definitions should be summarisable and some others can be omitted due to absurd values. An example for such absurd values is the project link in the page footer with its 0.69em in an element with a font size of 0.82em. That results in a font size of (rounded) 9px when the browsers base font size is 16px (which is common). See therefore the following screenshot from the project forum.

Screenshot of the page footer of the default theme of My Little Forum with a yellow marked project link with an absurd small font size

But as first I will take a look into the stylesheet ruleset for the sidebar. I thought to have simplified it at best when introducing the grid with version 20240827.1 but there seems to have some issues left.

auge8472 commented 1 month ago

Second issue, position of the sidebar in different viewport widths.

The problem here is to find the sweet spot. It's a bit of fiddeling with no general solution that will please everyone. I'll have a look.

joeiacoponi1 commented 1 month ago

Thanks for the amazing feedback @auge8472. I had a feeling the CSS issue was from long ago. Here's a link to my test site: https://bluegraysky.com/forum-20240827/

joeiacoponi1 commented 1 month ago

Second issue, position of the sidebar in different viewport widths.

The problem here is to find the sweet spot. It's a bit of fiddeling with no general solution that will please everyone. I'll have a look.

Understood. A possible mitigating solution would be to handle / wrap the subject / metadata in similar fashion to mobile, based on viewport width, but I'm not sure how having the sidebar complicates that.

auge8472 commented 1 month ago

Meanwhile I stepped through the CSS-file. I found a bunch of font-size definitions, most with unit em (with (partially cascading) values of 0.57em, 0.69em, 0.82em, 0.9em, 1em and larger font sizes for heading elements) but a few with unit px (specifically 11px for IPs, dates and times, etcetera). So my assumption about non-zooming size values was wrong.

I will continue to search in relation to the cascading size specifications.