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: 66
Joined: Sun Mar 11, 2007 1:19 am
Location: Rochester, Ny
Contact:

Re: misalignment on index and viewforum

Post by Prosk8er »

sorry haven't commented about this didn't think it would take much but i agree with 3di because it brings the headers size back down to what it should be

User avatar
Talk19Zehn
Registered User
Posts: 13
Joined: Sat Jul 18, 2020 9:05 am

Re: misalignment on index and viewforum

Post by Talk19Zehn »

Hello,

@3Di,I have tested your code from said ticket: [ticket/16796] Fixing misalignment of header items in category on index. #6235
This did not bring the desired result in the forumlist_body (index.php ) and unfortunately not in the main forum ( viewforum.php?f=136 )
In this context -> a.lastsubjekt and the following line "Posted by ...." and the SVG -> then the distance to the line lastsubjekt is too short. This distance is also too short in my view.
My guess is that therefore line-height of 16px was declared for (dd.lastpost > span), but this results displacements. My approach is therefore to assign the line-height: 16px in a.lastsubject.

@Prosk8er
li.header dt, li.header dd has a line-height of 10px, ... nothing changes. Only the words "Last Post" are output in the same line and a.lastsubjekt wins the desired distance with line-height 16px.

So I think at least.

Best Regards at all

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

Re: misalignment on index and viewforum

Post by Prosk8er »

@Talk19Zehn i just tested your code and it isn't in line with the category title
the li header isn't suppose to be as high as it is on this website look at the height of it in prosilver for 3.3.x you'll see the difference
the code @3Di proposed is what it should be i just did it on local host and on here its working fine on index and viewforum
checked on latest firefox and chrome on latest win 10

User avatar
Talk19Zehn
Registered User
Posts: 13
Joined: Sat Jul 18, 2020 9:05 am

Re: misalignment on index and viewforum

Post by Talk19Zehn »

Hello Prosk8er, thank you for your test.
Okay, there is a difference about 4px (a.lastsubject). Is that correct?

:) BTW: It did not bother me. As intended, it was my attempt. On my part, it is only considerations to maintain the functionality. Everything is not binding.

When the code of 3Di is used, the negative margin value of 4px for the SVG-symbol "o-icon" in line 17 can be removed *) (icons.css). Is that right?
Otherwise, the SVG icon may be difficult to operate in combination to the text line (a.lastsujbect). Is this correct in my acceptance?
Here on my site - nightly: phpBB-4.0.0-a1-dev.zip, 9371604 bytes, Jul 23, 2021 8:49:02 PM

You will definitely find a good solution.

Best regards at All

Edit: *) .. sorry;
name = icon.css is wrong - it is called icons.css
Last edited by Talk19Zehn on Sun Jul 25, 2021 12:11 pm, edited 1 time in total.

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

Re: misalignment on index and viewforum

Post by Prosk8er »

ok i just looked again and notice we need your code also. i wasn't looking at anything in li row because we were just trying to align the titles in li header
Screenshot 2021-07-25 071900.png
with 3di code
Screenshot 2021-07-25 071935.png
Screenshot 2021-07-25 072740.png
Screenshot 2021-07-25 072740.png (3.76 KiB) Viewed 27125 times
with Talk19Zehn code
Screenshot 2021-07-25 072908.png
Screenshot 2021-07-25 072908.png (5.63 KiB) Viewed 27125 times
so we need both 3Di and Talk19Zehn code to be back to normal

also instead of the lastsubject code we could remove margin-top: -4px; from

Code: Select all

.o-icon {
    vertical-align: middle !important;
    width: 14px;
    height: 14px;
    margin-top: -4px;
}
in icons.css but this however would affect all icons unless we make a new css class for it like

Code: Select all

.c-last-post-icon {
	margin-top: 0;
}

User avatar
Talk19Zehn
Registered User
Posts: 13
Joined: Sat Jul 18, 2020 9:05 am

Re: misalignment on index and viewforum

Post by Talk19Zehn »

Thanks for your commitment! Thank you again for your notes and test results, Prosk8er.

Well, I think we might not necessarily need my code if the CSS would be corrected for the SVG graphics "o-icon" -> (perhaps only (?)) around the negative margin value. Thus, the code of 3Di [ticket/16796] can in my opinion then be suitable. The procedures can judge the developers.

In this way, my thanks to hanakin (!) mentioned. Also to the parties on the developer level.

Best regards

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

Re: misalignment on index and viewforum

Post by Prosk8er »

your welcome

if we want to keep prosilver original we would have to go to 3Di code and figure a correct fix for the last post content

@3Di or @hanakin i know there's been some back and forth with this but what could we do to fix the last post content

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

Re: misalignment on index and viewforum

Post by 3Di »

I had a quick look as I'm very busy with an important release, I hadn't actually noticed the icon, thanks for pointing it out. It would seem a bit more complicated but surely a solution will be found. I'll get back to it as soon as I can free myself up a bit.
🆓 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
3Di
Registered User
Posts: 951
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano 🇮🇹 Frankfurt 🇩🇪
Contact:

Re: misalignment on index and viewforum

Post by 3Di »

Another solution try it out. This is just a workaround though.

1 - remove any changes and turn back to the original code.

2 - if you want to have it similar to 3.3 prosilver try content.css, line # 136

Code: Select all

li.header dt,
li.header dd {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 16px;
	text-transform: uppercase;
	border-left-width: 0;
	padding-top: 2px;
	padding-bottom: 2px;
}
3 - if you want to have it similar to 3.3 prosilver and centered vertically

change the above
padding-bottom: 2px;

to
padding-bottom: 6px;

---------
2021-07-25 18_41_17-[4.x] Discussion - Development Discussion Board — Mozilla Firefox.png
2021-07-25 18_40_52-[4.x] Discussion - Development Discussion Board — Mozilla Firefox.png
-----

2021-07-25 18_46_45-Development Discussion Board - Index page — Mozilla Firefox.png
🆓 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: 66
Joined: Sun Mar 11, 2007 1:19 am
Location: Rochester, Ny
Contact:

Re: misalignment on index and viewforum

Post by Prosk8er »

did you do any other edits cause for me that code just made the li header taller?

Post Reply