feat(core): extend page header background to full width

This is needed to get rid of the negative margin sticky header background hack.
Since it looks weird on wikis with background imgae.
This commit is contained in:
alistair3149 2024-10-17 04:10:32 -04:00
parent 17525528f5
commit 53742a0dd2
No known key found for this signature in database
5 changed files with 54 additions and 36 deletions

View file

@ -1,3 +1,39 @@
.citizen-page-header {
z-index: @z-index-above-content;
grid-area: header;
padding-right: var( --padding-page );
padding-left: var( --padding-page );
&-inner {
display: flex;
flex-wrap: wrap;
gap: var( --space-md );
align-items: center;
/* max-width should sync with .citizen-body-container */
max-width: var( --width-layout );
padding-top: var( --space-md );
padding-bottom: var( --space-md );
margin-right: auto;
margin-left: auto;
@media ( min-width: @min-width-breakpoint-desktop ) {
.citizen-toc-enabled & {
max-width: ~'calc( var( --width-layout ) + var( --width-toc ) + var( --space-xl ) )';
}
}
}
}
.citizen-page-heading {
flex-grow: 1;
}
.firstHeading-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.firstHeading {
margin: 0;
word-break: break-word;

View file

@ -25,8 +25,8 @@
&::before {
position: absolute;
top: 0;
right: ~'calc( var(--padding-page ) * -1 )';
left: ~'calc( var(--padding-page ) * -1 )';
right: 0;
left: 0;
z-index: @z-index-bottom;
height: 100%;
content: '';
@ -123,7 +123,7 @@ html {
// Make sticky header more compact if there are less screen estate
@media ( max-height: 800px ) {
.citizen-page-header--sticky {
.citizen-page-header {
.citizen-page-header-inner {
padding-top: var( --space-sm );
padding-bottom: var( --space-sm );
}

View file

@ -8,6 +8,8 @@
.mw-body,
.parsoid-body {
min-height: 100vh; // avoid footer being in the middle of the page
margin-top: var( --space-xl );
margin-bottom: var( --space-xl );
}
.citizen-body-container {
@ -22,28 +24,6 @@
gap: 0 var( --space-xl );
justify-content: center;
padding: 0 var( --padding-page );
margin: var( --space-xl ) 0; // don't collide with other components (e.g. notice)
}
.citizen-page-header {
z-index: @z-index-above-content;
display: flex;
flex-wrap: wrap;
grid-area: header;
gap: var( --space-md );
align-items: center;
padding-top: var( --space-md );
padding-bottom: var( --space-md );
}
.citizen-page-heading {
flex-grow: 1;
}
.firstHeading-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.citizen-body {

View file

@ -1,4 +1,6 @@
<header class="mw-body-header citizen-page-header">
{{#data-page-heading}}{{>PageHeading}}{{/data-page-heading}}
{{>PageTools}}
<div class="citizen-page-header-inner">
{{#data-page-heading}}{{>PageHeading}}{{/data-page-heading}}
{{>PageTools}}
</div>
</header>

View file

@ -16,16 +16,16 @@
<div id="siteNotice">{{{html-site-notice}}}</div>
</div>
<main class="mw-body {{#toc-enabled}}citizen-toc-enabled{{/toc-enabled}}" id="content">
<div class="citizen-body-container">
{{>PageHeader}}
<div id="bodyContent" class="citizen-body" aria-labelledby="firstHeading">
<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
{{#html-undelete-link}}<div id="contentSub2">{{{.}}}</div>{{/html-undelete-link}}
{{{html-user-message}}}
{{{html-body-content--formatted}}}
</div>
{{#toc-enabled}}{{>PageSidebar}}{{/toc-enabled}}
{{>PageFooter}}
<div class="citizen-body-container">
<div id="bodyContent" class="citizen-body" aria-labelledby="firstHeading">
<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
{{#html-undelete-link}}<div id="contentSub2">{{{.}}}</div>{{/html-undelete-link}}
{{{html-user-message}}}
{{{html-body-content--formatted}}}
</div>
{{#toc-enabled}}{{>PageSidebar}}{{/toc-enabled}}
{{>PageFooter}}
</div>
</main>
{{{html-after-content}}}