Avatar

Width restriction of the main page in mobile view, RFC (Design/Themes)

by Auge ⌂, (95 days ago)

Hello

Part of the release of the latest version 20240827.1 was a big overhaul of the forums user interface (UI). This was done to introduce support the UI and posting content in right to left written languages. Additionally a second goal was to enhance the forum UI in mobile browsers on smaller and mostly narrower displays. During the changes the main views was restrutured as a grid, which is a modern styling technique. Doing this I introduced a small but annoying misbehaviour in the main views.

Beginning with version 20220529.1 the sidebars was displayed above (or below in case of the table view) the thread list. The sidebar and (in case of the threaded view) the thread list took into account the real width of the viewport. With the changes in 20240827.1 the thread list took the width it needed, which prompted the sidebar to do the same. I opened a Github issue after spotting this.

[image]

This is a screenshot, made in the developer view of Firefox (testing browser sizes) but, at least on an iOS device it looks similar.

Meanwhile I performed a few tests. IMHO there are two ways to solve the issue.

1. Restrict the width of the sidebar. That would improve the first impression enormously. The thread list would continue to take up more space if necessary, which may require horizontal scrolling.
2. Restrict the width of the whole page. Also this looks much better. Also the thread list would take into account the viewport width. However, the thread list entries would now wrap to the next line if necessary. This is the same behaviour as in the versions between 20220529.1 and 20240729.1.

Screenshots of both attempts can be seen in a comment in the Github issue.

Now to my request for comments (RFC). I for myself would prefer the second solution. It looks much more compact and I see the whole subject, author and metadata of a thread posting without the need to scroll horizontally. What do you think? What looks for you to be the better solution and why is your preferred solution better than the other? Do you have any further ideas to solve it in another way?

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Avatar

Interim status report, Width restriction of the main page ...

by Auge ⌂, (87 days ago) @ Auge

Hello

After fiddling around and discussing the pitfalls, I came up with a solution. The main grid of the overview pages will be restricted to the browsers viewport width but the thread trees are able to overflow the width of the viewport. We introduced a breaking point in the list items of postings (between subject and the metadata of a posting (author, date and time, and the tail for the preview and the moderation functions). The parts in itself does not break and have to be horizontally scrolled if needed.

[image]

Screenshot of a thread tree in a viewport of 420px width (simulated with the Firefox developer tools).

For the solution we had to introduce a new HTML-element for grouping the metadata. Furthermore I needed to move the icon for no-text-postings into the metadata section. This in turn made it necessary to adapt the structural changes to the JavaScript-code, that reads the thread tree items and generates the preview and the open-thread-in-nested-view features.

[image]

Screenshot of a thread tree including an empty posting. It is marked with an icon in the metadata section where the icon replaces the preview icon.

When the pull request and the code review is done, we can release a new version.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Width restriction of the main page in mobile view, RFC

by Emanuel, (76 days ago) @ Auge

Second option from my personal view - better to have one single layout (flow), then different parts with different settings/width. Especially for mobile views a kind of simple approach & setting is better - KISS principle. And it's most of the time also more/easy editable/customize.

Avatar

Width restriction of the main page in mobile view, RFC

by Auge ⌂, (75 days ago) @ Emanuel

Hello

Second option from my personal view - better to have one single layout (flow), then different parts with different settings/width. Especially for mobile views a kind of simple approach & setting is better - KISS principle. And it's most of the time also more/easy editable/customize.

We decided to stick the width restriction to the sidebar but not to the whole main element of the page. This was because of the scary displaying of threads with a deep reply level structure especially in narrow viewports. In worse cases it displayes as one word or character per line (see the last screenshot in this comment in the Github issue #740).

We solved it with making the subject and the metadata block for a posting each non wrapping. With this we introduced an optional breaking point inbetween these two blocks (see the last screenshot in this other comment in issue #740 for an example). But for the nesting of the thread tree itself we need the additional optional width, that exceeds the display width.

Meanwhile it's part of the main branch since the merge of pull request #746 but its not yet released.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

RSS Feed of thread