StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-14 10:04:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

36
resources/skins.citizen.styles/components/PageHeader.less
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 { .firstHeading {
margin: 0; margin: 0;
word-break: break-word; word-break: break-word;

6
resources/skins.citizen.styles/components/StickyHeader.less
View file

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

24
resources/skins.citizen.styles/layout.less
View file

@ -8,6 +8,8 @@
.mw-body, .mw-body,
.parsoid-body { .parsoid-body {
min-height: 100vh; // avoid footer being in the middle of the page 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 { .citizen-body-container {
@ -22,28 +24,6 @@
gap: 0 var( --space-xl ); gap: 0 var( --space-xl );
justify-content: center; justify-content: center;
padding: 0 var( --padding-page ); 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 { .citizen-body {

6
templates/PageHeader.mustache
View file

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

18
templates/skin.mustache
View file

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