[3.0] Theme split (wave 3, part 5) — Move the top bar into the header as a user panel

[albertlast]

Description

Part 5 of wave 3 of the #7933 split. Stacked on #9372, #9371, #9370 and #9369 — the diff of this one is its last two commits.

This is the first part of wave 3 that changes how the forum looks.

The top bar was a separate white band above the header holding the user links, the language picker and the search box, which left the header itself holding nothing but the forum title and the logo. They merge. #top_section goes, and the header becomes:

<header id="header">
	<div class="content-wrapper">
		<h1 class="forumtitle">...</h1>
		<img id="smflogo"> or <div id="siteslogan">
		<div class="user_panel">
			<ul id="top_info">...</ul>
			<form id="languages_form">...</form>
			<form id="search_form">...</form>
		</div>
	</div>
</header>

The panel is a grid, so the float classes those three carried are gone. #header is now full width with the wrapper inside it lining its contents up with the rest of the page.

Two things kept that the theme branch loses

Its index.template.php no longer emits the search box or the clock, while index.css, responsive.css and rtl.css on that same branch still carry #search_form rules. Leftover CSS for markup that no longer exists is usually the sign of something dropped by accident rather than on purpose, so both are kept here. The clock stays where it is for now and moves with the part that deals with the section below the header.

A regression this introduced, and the fix

Moving #top_info from the left of the page to the end of the header broke the profile, PM and alerts dropdowns.

.dropmenu, #top_info { position: relative } has always been there, so those menus are positioned against #top_info, and they were anchored to its start edge with left: 0. While #top_info was on the left that put them at the left of the page. With #top_info at the end of the header, left: 0 plus their min-width: 25em sent them off the right of the screen — 163px past the edge at a 701px viewport, with a horizontal scrollbar to go with it.

They are anchored to the end edge instead, using logical properties so that right to left behaves too:

#pm_menu, #alerts_menu, #profile_menu {
	inset-inline: auto 0;
	padding-inline-end: 10px;
}

The footer's "Go up" link also pointed at #top_section, so it now points at #header.

Verification

Logged in as an admin in the running forum, since the interesting parts of the header only exist for a logged-in user.

Each of the three dropdowns opened and measured, at a 701px viewport:

profile_menu   left 381  right 698   within viewport: yes
pm_menu        left 381  right 698   within viewport: yes
alerts_menu    left 381  right 698   within viewport: yes
horizontal scrollbar: no

Before the fix, at that same width: left 547, right 864, 163px past the edge, horizontal scrollbar present. On the parent branch: left 0, right 317, no scrollbar — which is what identified this as mine rather than something already broken.

At 1401px, the menu's end edge lines up with #top_info's end edge, in both directions:

ltr:  menu right 1301, #top_info right 1301   aligned
rtl:  menu left   101, #top_info left   101   aligned

Every var() in index.css still resolves against variables.css, with nothing referenced but undefined.

Issues References (Fixes|Related|Closes)

Related to #7933.

[live627]

...and now these have merge conflicts and need a rebase

[albertlast]

just gimme a minute

[albertlast]

everything fine now @live627