misalignment on index and viewforum

[Prosk8er]

just installed 4.0.0-a1-dev from github as of today and noticed that on the index page the "TOPICS" & "POSTS" titles are not aligned with the forum category or last post
this also happens on viewforum with "REPLIES" & "VIEWS"

submitted in tracker PHPBB3-16796

[3Di]

That could be easily fixed including them into a SPAN and assigning a CSS rule to them, like the others.
Not sure if it will be accepted due to some discussion about a new style or the likes, therefore I am not spending time on this.

[hanakin]

I do not have time to handle it for a couple weeks. But we are still supporting prosilver in 4.0 for transition as is evident by it still getting updates on master

[Mannix_]

Seems like the misalignment comes from the line-height property set for

Code: Select all

li.header dt, li.header dd {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 10px;
    text-transform: uppercase;
    border-left-width: 0;
    margin: 2px 0 4px;
    padding-top: 2px;
    padding-bottom: 2px;
}

if we change it to 16px instead of 10px everything looks aligned. Gonna try to do a pull request later for it

[3Di]

Seems like the misalignment comes from the line-height property

That could be easily fixed including them into a SPAN and assigning a CSS rule to them, like the others.

While your code seems to work I think is not the right way to deal with that, just my opinion that could be wrong.

[Mannix_]

While your code seems to work I think is not the right way to deal with that, just my opinion that could be wrong.

There is probably countless options to fix that. In 3.x those items aren't wrap in a span anyway and they have line-height of 1em which is 16px don't know why it was changed for 4.0 tho.

[3Di]

don't know why it was changed for 4.0 tho.

Sure @hanakin got an answer for you. What I know is what I see ATM.

[Prosk8er]

ok cool i thought it was still gonna be included but treated like how subsilver2 was for 3.1

[hanakin]

Sorry in advanced for long repsonse, also posting it here rather than on github as more discussion is required and I do not want to post so much to distract from the code on github.

to clear up confusion. 1em did not = 16px in 3.0, it was based on base 10px body font... This was changed when we switched to normalize.css in 3.1 to base 16px which caused some issues with the base 10px hardcoded values throughout the code base in 3.2 due to ems being used everywhere in the first place which should never be used as they are multiplicative. In 4.0 we overhauled all the ems out to make it easier to manage and fix/patch all these issues on a case by case bases via px. There should not be any ems in the code now in fact our linting prevents it... This all really left the line-heights out of whack mainly as there was no easy way to identify/calculate these and fix them in mass.

The main issue here is that you are trying to overhaul the entire header to ensure that the main header and the column headers are all rendered the same. This means refactoring the html and css effectively... When I did the original overhaul we opted to remove or cancel out line heights for labels. which means that the line-heights should match the font-size...

You are also making the assumption that the section header was meant to be handled the same as the column headers. Its was not, it was meant to be larger at 16px font and bold vs the column headers which are a 10px font. It was also originally bottom aligned but got changed to centered. The column headers were originally centered IIRC but this got shifted due to the larger section header. The column headers are aligned to the middle of the cell vertically now. This is what is causing the mis-alignment for these two areas.

TODOs:

1. determine how we want them aligned? all the same middle/bottom? Bottom = aligned, Middle = slightly aligned and requires flexbox to do right
2. make all the headers use the same base code html and CSS.
3. make the section header bigger and bolder

This is 4.0 so feel free to completely change everything in anyway to fix it I will review it and consider it. If it works well and makes sense going forward.

Keep in mind that we will be including prosilver with 4.0. However once chameleon is adopted it will transition into a community managed style rather than a team managed/shipped style at sometime way down the road...We are talking several years after chameleon's release though.

[3Di]

When I did the original overhaul we opted to remove or cancel out line heights for labels. which means that the line-heights should match the font-size...

Well, I have already provided the right solution for this 4.0 prosilver to match the 3.2 and 3.3 ones.
https://github.com/phpbb/phpbb/pull/623 ... -874065208
In fact that solution properly handles also the heigth of the forum rows as it has ever been.
I do not see the reason for a discussion about that little bit of code, which has been wrongly handled to begin with IMHO.