Introduce .secondary-nav and handle .page-content spacing universally

[silverwind]

Fixes: #29981. Introduce .secondary-nav as a universal way for styling and margin adjustments inside .page-content.

If the first child of .page-content is .secondary-nav, we add margin below it, otherwise we add padding to the first child. Notable changes:

• --color-header-wrapper is replaced with --color-secondary-nav-bg.
• navbar class is removed.

[silverwind]

Maybe later refactor to always have the overflow-menu and hide that box header.

[silverwind]

Maybe it should not use :has because PaleMoon does not have it yet. I will check for alternatives.

[silverwind]

Maybe it should not use :has because PaleMoon does not have it yet. I will check for alternatives.

done

[wxiaoguang]

Is it really right? I guess it only hacky patches one page you know, but there are a lot.

I would say abusing tw- helpers to fine-tune everything is wrong. Please use some well-designed and stable framework-level design.

[wxiaoguang]

And I would suggest to revert #29922 and leave enough time to have a better framework-level design.

[silverwind]

It's quite simple. The first element inside .page-content sets margin, if it needs one. Here, either the <overflow-menu> or the login box is first element and the <overflow-menu> currently has a built-in margin, so adding to the box would make a double margin.

If you want it cleaner, I will remove the built-in margin on <overflow-menu> and instead add it via tw- helpers to all other ocurrences except this one, but then the diff will be 10+ files.

And no, I disagree to reverting #29922, it is a important step.

[wxiaoguang]

I am sure your hacky patches are not right.

For example, this time, you fixed one page:

But there is another page (I was not going to checkout the branch, but I have to .....)

PLEASE provide a stable framework-level design.

[silverwind]

There is no general solution here. Some elements want margin, some don't. Some want different margin even.

It can not be generalized on the .page-content element.

[silverwind]

So in essence we have two scenarios:

• There is a secondary navbar. The second element needs the margin.
• There is no secondary navbar. The first element needs the margin.

So maybe a general solution is possible but the selector for second element won't be pretty. I guess I would introduce .secondary-navbar class.

[silverwind]

@wxiaoguang what to you think about the above suggestion? Is that "framework" enough for you?

[wxiaoguang]

@wxiaoguang what to you think about the above suggestion? Is that "framework" enough for you?

If I understand correctly:

nvarbar 
(15 margin)
page-content

nvarbar 
secondary-navbar
(15 margin)
page-content

right? It looks like the same as what Fomantic UI does: attached segment. I think it would work.

[silverwind]

Yes, like that. On repo page it currently uses 12px, but stuff like that can be overridden with tailwind and maybe we should just generally reduce from 15px to 12px.

[silverwind]

Actually on repo the .header-wrapper fulfills the role of the secondary navbar and the 12px margin is internal to that, so we can still make it standard margin below.

[wxiaoguang]

Yes, like that. On repo page it currently uses 12px, but stuff like that can be overridden with tailwind and maybe we should just generally reduce from 15px to 12px.

Some general and well-defined classes look good to me.

[silverwind]

Ok I guess I will remove this header-wrapper class and replace it with secondary-navbar. There is also a CSS variable for it that I will rename.

[silverwind]

Leaving open a bit more.