Hello

I fought with the threaded and linear views of a thread. Some things I rebuilt:

- The openig entry is hierarchically an equivalent of it's answers. Before it was the parent-element (header-wise).
- Some of the informations about the author and the posting itself will be faded out for the mobile view.
- The taglist and the count of the views are now part of the meta information block (a.k.a. <header>).
- The link to the answer form is now part of the option list below the entry. For most users it's the only option.
- Every entry is an <article>.
- The elements for title, author info and the tag list (if available) are content of a <header>.
- the footer is now, what it claims to be, namely a <footer>.

A thread in a narrow viewport (Firefox developer tools). The image is shrinked by a quarter of it's original size (width and height). The first entry is closed with a click on it's title, only the header is displayed.

You see, there are some minor problems.

As first, the information bar about the author and entry contains some orphaned commas. The reason is the outfade of the website- and e-mail-link, the posting time (with date and time) and the IP (for admins). The commas are part of the strings in the language files. I can't skip them without skipping the whole block and display the authors name and entry date again. This would be cumbersome and not very robust. A possible solution would be the disintegration of the language string into different parts, wich can be displayed part by part in own HTML-elements.

But that needs changes to the source code of the forum script.

A second problem ist the way how entries are skipped by clicking/tapping it's title. At the moment some of the HTML-elements get an inline-style-attribute via JavaScript (resulting in <element style="display: none;">). I would like to set a class-attribute to the whole container of the entry (the <article>-element in my template) and use style-definitions in the CSS-file instead. The main reason is the flexibility and portability of this system.

My template could contain the following CSS-definitions (given class name: "posting-faded-out"):

.posting-faded-out .avatar {
    width: 2em;
    height: 2em;
}
 
.posting-faded-out .tags,
.posting-faded-out body,
.posting-faded-out footer {
    display: none;
}

another one could set different rules, i.e.:

.posting-faded-out .avatar,
.posting-faded-out .tags,
.posting-faded-out body,
.posting-faded-out footer {
    display: none;
}

Further informations at a later time.

Edit:

@Milo: What is the effort to change the JavaScript at this point? Are there further places with similar behaviours?

Tschö, Auge