[3.0] Theme split (wave 3, part 6) — Make the main menu a band across the page

[albertlast]

Description

Part 6 of wave 3 of the #7933 split. Stacked on #9373 and the parts below it — the diff of this one is its last commit.

The main menu was buried inside #upper_section > #inner_section, two nested wrappers whose only job was some padding and a rounded top corner. It becomes a band of its own across the page, directly under the header, with a .content-wrapper inside it lining its contents up with everything else:

<header id="header">…</header>
<nav id="main_menu">
	<div class="content-wrapper">…</div>
</nav>
<div id="wrapper" class="content-wrapper">
	<div id="inner_wrap">…clock and news…</div>
	<nav class="navigate_section">…</nav>
	<div id="content_section">…</div>
</div>

Both section wrappers go, and the clock, the news line and the breadcrumb move up a level. The padding #inner_section was providing moves onto #inner_wrap and the breadcrumb, which is what they actually needed it for. The light gradient that #inner_section was picking up from the shared background rule becomes --mainmenu-bg on the band, so the strip under the header still reads the same way.

Three copies of this markup, not one

Themes/default/MaintenanceTemplate.php and the XSLT in Sources/Tasks/ExportProfileData.php both build their own #upper_section > #inner_section > #inner_wrap and load this same index.css, so they lose those wrappers too. maintenance.css already carries a /* Add the gradient here if there is no upper_section */ rule for exactly this case.

Two dead RTL rules removed

• #upper_section .news { float: right } — .news is a flex item of #inner_wrap, and float does nothing to a flex item.
• .navigate_section .unread_links { float: left } — .unread_links is inside .user, never inside .navigate_section, so this has never matched anything.

Both were already dead before this change; they are removed here because this is the part that touches the markup around them.

Verification

Logged in, board index and a board page, at 1401px and 701px.

Structure, read back from the DOM rather than from the template, since unbalanced tags in a template that echoes strings are easy to write and invisible until something reflows:

#upper_section present: no          #inner_section present: no
#main_menu is a sibling of #wrapper and comes before it: yes
#main_menu has a .content-wrapper directly inside it:    yes
#inner_wrap, .navigate_section, #content_section all directly in #wrapper: yes
#main_content_section still inside #content_section:     yes

Widths and overflow:

1401px: band 1401 wide, contents 1200 wide, no horizontal scrollbar
 701px: band  701 wide, contents  701 wide, no horizontal scrollbar

Every var() in index.css still resolves against variables.css.

Issues References (Fixes|Related|Closes)

Related to #7933.