Avatar

Rework of the posting form (Design/Themes)

by Auge ⌂, (100 days ago)

Hello

In the last days I reworked the posting form. I have changed a few things significantly. I would therefore like to present and discuss some of the changes before they are incorporated into the project.

First things first. This is the status of the current stable version. The screenshots was taken here, in the project forum.

The posting form of version 20240827.1 in a desktop browser. I was logged in.

[image]

- The labels for category, subject and tags are displayed beside their input fields, the label for message text is displayed above the textarea. This behaviour is inconsistent.
- The textarea for the posting text is styled floating on the left and the button bar is displayed on the right with a left margin, larger than the width of the textarea.
- If one resizes the textarea (with the handle at the bottom right), the button bar stays at its position (when narrowing the textarea) or jumps to below the textarea (when making the textarea wider).
- The thread-pinning selection is built as a list but the list is displayed only with the browsers own styling.

The posting form of version 20240827.1 in the mobile view of a desktop browser. I was logged in.

[image]

- The labels for category is displayed beside its input field, the labels for subject, tags and message text are displayed above the textarea. This behaviour is inconsistent in another way than in the desktop view.
- The text input fields are wider than the viewport because of the values of their size-attributes.
- The textarea for the posting text is styled like in the desktop view. This results in the need to scroll horizontally to use the buttons.
- The thread-pinning selection is the thread-pinning selection.

Now to the changes I made. The screenshots was taken in a testing forum. I will call the version 20240913.0 in this posting/thread but this is no real version. The checkbox for attaching the signature is missing because in the testing forum my account has no signature.

The posting form of version 20240913.0 in a desktop browser. I was logged in.

[image]

- The form #postingform got a maximal width of 60em like i.e. paragraphs and lists in the main element #content.
- The labels are all displayed above the input fields.
- The instructions, that are displayed without activated JavaScript and that are the source to build the button-bars with JavaScript, are now displayed above the message-label, got a heading, a skip link and the lists was slightly restructured. This made it necessary to also apply changes to the JS-file posting.js. This has to be reviewed and to be applied also to the minimised version of the code.
- The button bar moved to a position directly above the textarea and the buttons are now horizontally ordered. There is no need for a floating construct anymore, which was implemented because of no existing alternatives.
- The buttons have no fixed width and have been slightly enlarged so that they have a larger click area. This makes them easier to use. The rules for the styling of the buttons are now applied to the parent element of both button bars (BB-code, smilies) and are valid for all of the buttons at once.
- The block for the additional buttons was a collection of links until now and rebuilt as a list of buttons. This made it necessary to also apply changes to the JS-file posting.js. This has to be reviewed and to be applied also to the minimised version of the code.
- If one resizes the textarea (with the handle at the bottom right), the button bar stays at its position with no jumping at all.
- The thread-pinning selection is now displayed with own styling rules.

The posting form of version 20240913.0 in the mobile view of a desktop browser. I was logged in.

[image]

- The labels are all displayed above the input fields.
- The input fields are width-restricted with max-width and are fitting in the narrow mobile viewport. On wider viewports they are enlarged according to the value of their size-attributes.
- The textarea for the posting text and the button bar is also styled with a max-width to fit into the viewport width.
- The thread-pinning selection is the thread-pinning selection.

We have to review the changes before merging it to the base branch and to release it. Any opinions, pro or cons?

Tschö, Auge

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


Complete thread:

 RSS Feed of thread