misalignment on index and viewforum

General discussion of development ideas and the approaches taken in the 4.x branch of phpBB. The next feature release of phpBB 4 will be 4.0/Triton.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 4.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
User avatar
Prosk8er
Registered User
Posts: 57
Joined: Sun Mar 11, 2007 1:19 am
Location: Rochester, Ny
Contact:

misalignment on index and viewforum

Post by 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

User avatar
3Di
Registered User
Posts: 923
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano 🇮🇹 Frankfurt 🇩🇪
Contact:

Re: misalignment on index and viewforum

Post by 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.
🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 948
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: misalignment on index and viewforum

Post by 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
Donations welcome via Paypal Image

Mannix_
Registered User
Posts: 14
Joined: Sun Aug 18, 2019 8:56 am

Re: misalignment on index and viewforum

Post by 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 ;)

User avatar
3Di
Registered User
Posts: 923
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano 🇮🇹 Frankfurt 🇩🇪
Contact:

Re: misalignment on index and viewforum

Post by 3Di »

Mannix_ wrote: Thu Jun 17, 2021 6:29 am Seems like the misalignment comes from the line-height property
3Di wrote: Wed Jun 16, 2021 5:25 am 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. :)
🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades

Mannix_
Registered User
Posts: 14
Joined: Sun Aug 18, 2019 8:56 am

Re: misalignment on index and viewforum

Post by Mannix_ »

3Di wrote: Thu Jun 17, 2021 9:17 am
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 :D and they have line-height of 1em which is 16px don't know why it was changed for 4.0 tho.

User avatar
3Di
Registered User
Posts: 923
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano 🇮🇹 Frankfurt 🇩🇪
Contact:

Re: misalignment on index and viewforum

Post by 3Di »

Mannix_ wrote: Thu Jun 17, 2021 10:29 am 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. :)
🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades

User avatar
Prosk8er
Registered User
Posts: 57
Joined: Sun Mar 11, 2007 1:19 am
Location: Rochester, Ny
Contact:

Re: misalignment on index and viewforum

Post by Prosk8er »

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

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 948
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: misalignment on index and viewforum

Post by 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.
Donations welcome via Paypal Image

User avatar
3Di
Registered User
Posts: 923
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano 🇮🇹 Frankfurt 🇩🇪
Contact:

Re: misalignment on index and viewforum

Post by 3Di »

hanakin wrote: Tue Jul 06, 2021 7:55 pm 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.
🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades

Post Reply