auge8472 / mlf2-themes Goto Github PK

There are changes in the subtemplates posting.inc.tpl and register.inc.tpl. Additionally there are some changes in the JS (main*.js) I have to check.

Currently the text alignment in the theme is set with the values left, center and right. This is the classical way since more than twenty years. But the actual values are based on the left to right writing direction of latin based languages. Even in a language, that is written from right to left (i.e. arabic or hebrew), text-align: left keeps the text on the left side, even there it is typically desired to flip not only the text but also its alignment. This is solvable with using the values start insted left and end insted right for the text alignment. text-align: center; is not affected by the issue.

After reaching version 0.0.7 the most elements are ordered for small viewports. One of the great exceptions is the menu bar situation. Whe have two menus, one for the account actions (login, user settings, administration (for admins), etc.) and the second is the page dependent menu in the element #submenu.

The account-actions-menu is at the moment an unstyled list. If it would be styled, it would take much more space than now. The second menu is styled and it takes much more space. It might be a solution to integrate both menus into one, that can be slided into and out of the viewport.

Because of a few changes the theme doesn't work in every corner. For example the posting form doesn't work. One needs to send the CSRF-token with it which doesn't exist in the template of the form. There are a few additional places, where amendments are necessary.

The block contains a link to the top of the current page and one to the main page/view of the forum. Both links should get icons to make it possible to hide the link text without hiding the links in itself.

Replies, that are classified as new get not the red arrow in the thread list like thread openers, which get their red framed icon.

In the thread tree below the posting in the single-posting_view administratorsa and moderators are not marked as such. Adopt the system of additional classes for these user types from the main view, where marking of special users works.

The names of the backup modes, introduced with MLF 2.4.22, are missed in the backup page of the admin area. The buttons to create the backups shows "only create backup of" but not the name of the backup function as it is destined.

There are a few form fields, that should be invisible but are not. Hide them!

Because of the predefined order of the input elements in the entry form, implemented with tabindex, the focusable elements in the page header "slip" behind the form elements in the order of focussing. Those elements should be focussable as first, then the subnavigation. Then, after all these elements, the form elements have to follow. Maybe it's a good idea to implement a jump menu to reach the form elements directly from the start of the page jumping over the numerous links in the header.

thread, thread, thread …

The unlock link gets the wrong class lock-thread and shwos therefore the locked padlock. Correct is the class name lock-thread. With the correct class the link would get the icon with the unlocked padlock.

Title attributes have several usability issues.

• In most desktop-browsers only mouse users have access to the content.
• Users of mobile browsers have normally no access at all.
• Some but not most of them get read aloud by screenreaders. Often the content of the title attribute is read as an addition to present text or i.e. the alt-attribute of an image. In some cases it's a repeating of the wordings from the other sources.
  • That's redundant and …
  • … at least confusing or …
  • … at worst annoying for the visitors.

Something to read:

• https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/
• https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/

See #19 for a detailed description. Please take into account that the users list (a table) contains a column for the user type.

Because of the new CSS-rules for links in .item-tools as flexboxes, the links for the tags in tag lists in posting views are broken. Possible solution is renaming or removing the class from the posting footer.

Until now the link and it's container are of different structure in single-entry and in the thread- and linear-views. It should be one structure for all views.

Forgot to add <span class="icon"></span><span> and </span> around the label of a radio button.

Make it accessible with changing tabindex="-1"to a positive value.

The main views (threaded and table) got the icons in front of the opening entries and their replies. These icons are still missing in the thread tree below an entry in single posting view.

… in the nested and linear view of a thread. Actually an avatar gets displayed in it's pysical size , but that might be to big.

Forgot to change URL-parameter toggle_thread_display from value true to 0 and 1. Affected is includes/subnavigation_2.inc.php, line 14.

The Ajax-preview works in the thread tree below the entry itself in single posting view but is completely unstyled at the moment. The main view on the contrary lacks the buttons for opening the preview, so the preview is out of order.

It looks like the theme does not apply the read status to the thread trees. Even the entries are stored as read for a user, the thread trees in the main views but also in the single entry view markes them not as read (class .read of the link to the entry).

Notice: the read entries in the list of the latest entries and the entry blocks in the nested and linear thread views are correctly marked as read.

Because of renaming classes without taking unwanted interaction with JS-functions into consideration, the speech bubbles for the Ajax-previews and the (originally plus and minus icons) to fold or unfold single threads are not displayed. Have to decide to reintroduce the old class names or to move the JS-code to the theme. The Later option is a strong option because of further changes I think about (i.e. replacing the popups with page internal dialogs).

The links currently use the same icon as the backup function for entries.

See #19 for a detailed description.

The RSS-link in the whole-thread-views have to be on the right side (for wider views).

The labels of unchecked radio buttons and checkboxes are not in all cases displayed with italic font style. A similar issue with text color which is #444 in one case and #333 in another. Unify it to be color: #444; with font-style: italic in every case.

It is necessary to mark a lable of a visibly hidden form element when the form element gets the focus. Without it, a keyboard user with a graphical browser will not see, that a specific form element has the focus.

Vector graphics are displayed with a sharp outline independent from their displaying size.

Thread trees makes from now on use of the class .read (see #30 and #31) to mark forum entries, read by a registered user. The CSS does not support the class .read but also not the pseudo class :visited in thread trees. Change it!

The users-online-box in the user list page has no background definition. Thatswhy the box shadow of the header of this block is visible inside the list box.

The header of the thread section below an entry in the single-entry-view contains a heading and the link to the RSS-feed. In slim viewports the arrangement side by side looks not only ugly, it is also unclear. To prevent this it is necessary to rearrange the parts what should be simple because of their nature as parts of a flexbox. flex-direction: column-reverse; for slim viewports and flex-direction: row; for wider viewports should do the trick.

See also CSS-Tricks: A complete Guide to Flexbox section flex-direction

When using a form with keyboard, one steps from entry field to entry field with the [TAB] key. Doing this (in example) in the settings form, all form elements that are visually hidden will be skipped. So they are unusable.

When one is using the mouse or the finger on a touchscreen, one can reach those form elements via their labels, but when using keyboard only, not.

In the first step I built the logic as table elements as blocks in general and return it to table elements in wider screens. This follows the logic of "mobile first" (media queries with min-width steps) but it is counter intuitive for tables. I make the table elements not behaving like table elements (take away their natural characteristics) and give these characteristics back in a later step for wider viewports.

It would be easier to let them have their characteristics and change them in a defined case (media query with a defined maximal width).

I expect this to make later changes for maintenance easier.

Several tables with items like user-accounts, categories, smilies, etc. have a set of administration links to edit, sort or remove the items in their last table column. These links are only displayed as graphics, on a few places actually without a content in the alt attribute. So they are unusable without displaying the icon images.

As example the list of categories without text:

I a few places these construction was replaced with textual links complemented with the icon images.

As an example the list of users with text:

New icon at the link for removing an item, actually I have no icon for editing an item. Will be added in near future.

The task is to add text links to every single one of these lists. This is for unification and even more important, for usability reasons.