mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-23 22:13:38 +00:00
refactor(core): clean up drawer implementation
This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch
This commit is contained in:
alistair3149
parent
be40f24f02
commit
5ccfbcfdeb
|
|
@ -89,7 +89,6 @@ Name | Description | Values | Default
|
|||
`$wgCitizenEnableCollapsibleSections` | Enables or disable collapsible sections on content pages | `true` - enable; `false` - disable | `true`
|
||||
`$wgCitizenShowPageTools` | The condition of page tools visibility | `true` - always visible; `login` - visible to logged-in users; `permission` - visible to users with the right permissions | `true`
|
||||
`$wgCitizenEnableDrawerSiteStats` | Enables the site statistics in drawer menu | `true` - enable; `false` - disable | `true`
|
||||
`$wgCitizenEnableDrawerSubSearch` | Enables the drawer search box for menu entries | `true` - enable; `false` - disable | `false`
|
||||
`$wgCitizenPortalAttach` | Label of the portal to attach links to upload and special pages to | string | `first`
|
||||
`$wgCitizenThemeColor` | The color defined in the `theme-color` meta tag | Hex color code | `#131a21`
|
||||
|
||||
|
|
|
|||
|
|
@ -21,8 +21,6 @@
|
|||
"citizen-sitestats-users-label": "users",
|
||||
"citizen-sitestats-edits-label": "edits",
|
||||
|
||||
"citizen-drawer-search": "Search menu",
|
||||
|
||||
"citizen-footer-desc": "Edit this text on [[MediaWiki:Citizen-footer-desc]]",
|
||||
"citizen-footer-tagline": "Edit this text on [[MediaWiki:Citizen-footer-tagline]]",
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
"citizen-sitestats-images-label": "Label for the file statistics",
|
||||
"citizen-sitestats-users-label": "Label for the user statistics",
|
||||
"citizen-sitestats-edits-label": "Label for the edit statistics",
|
||||
"citizen-drawer-search": "Placeholder and title text for search input on main menu",
|
||||
"citizen-footer-desc": "Default text for the site footer decription. Add the language code to the end of the link if not en (e.g. MediaWiki:Citizen-footer-description/de for German).",
|
||||
"citizen-footer-tagline": "Default text for the site footer tagline. Add the language code to the end of the link if not en (e.g. MediaWiki:Citizen-footer-tagline/de for German).",
|
||||
"citizen-action-addsection": "Used in the Citizen skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}. Same as vector-action-addsection in Vector skin.",
|
||||
|
|
|
|||
|
|
@ -115,19 +115,12 @@ final class Drawer extends Partial {
|
|||
|
||||
$portals = [
|
||||
'msg-citizen-drawer-toggle' => $this->skin->msg( 'citizen-drawer-toggle' )->text(),
|
||||
'msg-citizen-drawer-search' => $this->skin->msg( 'citizen-drawer-search' )->text(),
|
||||
'data-portals-first' => $firstPortal,
|
||||
'array-portals-rest' => $props,
|
||||
'data-portals-languages' => $languages,
|
||||
'data-drawer-sitestats' => $this->getSiteStats(),
|
||||
'data-drawer-subsearch' => false,
|
||||
];
|
||||
|
||||
// Drawer subsearch
|
||||
if ( $this->getConfigValue( 'CitizenEnableDrawerSubSearch' ) ) {
|
||||
$portals['data-drawer-subsearch'] = true;
|
||||
}
|
||||
|
||||
return $portals;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
/**
|
||||
* Enables searching for portals / portal entries in the drawer menu
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {Event} event
|
||||
* @return {void}
|
||||
*/
|
||||
function onDrawerSearchInput( event ) {
|
||||
const portals = document.getElementById( 'mw-drawer-menu' ).querySelectorAll( '.mw-portal' ),
|
||||
searchVal = event.target.value;
|
||||
let items;
|
||||
|
||||
// If the input is empty, show all portals
|
||||
if ( searchVal.length === 0 ) {
|
||||
portals.forEach( ( portal ) => {
|
||||
portal.style.display = null;
|
||||
items = portal.querySelectorAll( 'ul li' );
|
||||
|
||||
items.forEach( ( item ) => {
|
||||
item.style.display = null;
|
||||
} );
|
||||
} );
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// For each Portal
|
||||
portals.forEach( ( portal ) => {
|
||||
let isAllHidden = true;
|
||||
items = portal.querySelectorAll( 'ul li' );
|
||||
|
||||
// Check all entries
|
||||
items.forEach( function ( item ) {
|
||||
// If the query is contained in the link text
|
||||
if ( item.querySelector( 'a' ).innerText.toUpperCase().indexOf( searchVal.toUpperCase() ) >= 0 ) {
|
||||
// If it's the case, at least one entry is visible
|
||||
isAllHidden = false;
|
||||
item.style.display = null;
|
||||
} else {
|
||||
// Else, hide it
|
||||
item.style.display = 'none';
|
||||
}
|
||||
} );
|
||||
|
||||
// If the portal contains only hidden links, hide it
|
||||
portal.style.display = isAllHidden === true ? 'none' : null;
|
||||
|
||||
// But if the query is contained in the portal header, show the entire portal
|
||||
if ( portal.querySelector( 'h3' ).innerText.toUpperCase().indexOf( searchVal.toUpperCase() ) >= 0 ) {
|
||||
portal.style.display = null;
|
||||
items.forEach( ( item ) => {
|
||||
item.style.display = null;
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {document} document
|
||||
* @return {void}
|
||||
*/
|
||||
function initDrawerSubSearch( document ) {
|
||||
// Listen to drawer toggle
|
||||
document.getElementById( 'mw-drawer-checkbox' ).addEventListener( 'change', () => {
|
||||
const searchInput = document.getElementById( 'mw-drawer-search-input' ),
|
||||
inputListener = ( event ) => {
|
||||
if ( typeof event.target.value !== 'undefined' ) {
|
||||
onDrawerSearchInput( event );
|
||||
}
|
||||
};
|
||||
|
||||
// Add eventlistener when the drawer is opened
|
||||
// Remove when drawer is closed
|
||||
if ( event.target.checked ) {
|
||||
searchInput.addEventListener( 'input', inputListener );
|
||||
} else {
|
||||
searchInput.removeEventListener( 'input', inputListener );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
initDrawerSubSearch( document );
|
||||
|
|
@ -41,9 +41,9 @@ function enableCssAnimations( document ) {
|
|||
function initCheckboxHack( window ) {
|
||||
const checkboxHack = require( './checkboxHack.js' ),
|
||||
drawer = {
|
||||
button: document.getElementById( 'mw-drawer-button' ),
|
||||
checkbox: document.getElementById( 'mw-drawer-checkbox' ),
|
||||
target: document.getElementById( 'mw-drawer' )
|
||||
button: document.getElementById( 'citizen-drawer__buttonCheckbox' ),
|
||||
checkbox: document.getElementById( 'citizen-drawer__checkbox' ),
|
||||
target: document.getElementById( 'citizen-drawer__card' )
|
||||
},
|
||||
personalMenu = {
|
||||
button: document.getElementById( 'personalmenu-button' ),
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
@import '../variables.less';
|
||||
|
||||
#mw-drawer-sitestats {
|
||||
.citizen-siteStats {
|
||||
display: flex;
|
||||
font-size: @ui-menu-text;
|
||||
}
|
||||
font-size: 0.875rem; // TODO: Put this in variable
|
||||
gap: 0.875rem;
|
||||
|
||||
.sitestats-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4375rem;
|
||||
|
||||
&:before {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 7px;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
opacity: var( --opacity-icon-base );
|
||||
&:before {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
.sitestats-item:before {
|
||||
.citizen-siteStats__item:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
/* Can't display all in one line so let's hide file */
|
||||
@media ( max-width: 480px ) {
|
||||
#sitestats-images {
|
||||
#citizen-siteStats__item--images {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,172 +1,67 @@
|
|||
#mw-drawer {
|
||||
position: fixed;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: var( --margin-header-item ) var( --margin-header-item--corner );
|
||||
overscroll-behavior: contain;
|
||||
user-select: none;
|
||||
will-change: transform;
|
||||
.citizen-card();
|
||||
.citizen-card-hide( 0 0 );
|
||||
.citizen-drawer {
|
||||
z-index: 102; // Higher than z-index-overlay from WMUI
|
||||
|
||||
&-checkbox {
|
||||
&:checked {
|
||||
// Transform all the slices of the button into a crossmark
|
||||
~ #mw-drawer-button-icon {
|
||||
#mw-drawer-button-icon {
|
||||
&-1 {
|
||||
opacity: 0;
|
||||
/* @noflip */
|
||||
transform: rotate( 0deg ) scale( 0.2, 0.2 );
|
||||
}
|
||||
// Reflect line
|
||||
&-2 {
|
||||
/* @noflip */
|
||||
transform: rotate( -45deg ) translate3d( -2px, 6px, 0 );
|
||||
}
|
||||
|
||||
// Hide line
|
||||
&-3 {
|
||||
/* @noflip */
|
||||
transform: rotate( 45deg ) translate3d( -5px, -7px, 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show drawer
|
||||
~ #mw-drawer {
|
||||
.citizen-card-show;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-button {
|
||||
&__card {
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
margin-right: var( --margin-header-item--corner );
|
||||
// Need to align with page padding
|
||||
margin-left: var( --margin-header-item--corner );
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
max-height: ~'calc(100vh - var( --margin-header ) * 2 )';
|
||||
margin: var( --margin-header ) var( --padding-header );
|
||||
overscroll-behavior: contain;
|
||||
user-select: none;
|
||||
will-change: transform;
|
||||
.citizen-card();
|
||||
.citizen-card-hide( 0 0 );
|
||||
|
||||
&-icon {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: var( --size-icon );
|
||||
height: var( --size-icon );
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// Don't use padding as margin is needed to hide overflow
|
||||
margin: ~'calc( var( --padding-header-icon ) + var( --margin-header-item ) )' var( --padding-page );
|
||||
|
||||
&-1 {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
&-2 {
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #mw-drawer-button-icon {
|
||||
#mw-drawer-button-icon {
|
||||
&-1 {
|
||||
transform: translate3d( -50%, 0, 0 );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-drawer-button-icon {
|
||||
&-div {
|
||||
background-color: var( --background-color-icon--hover );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
~ #mw-drawer-button-icon {
|
||||
.mw-drawer-button-icon {
|
||||
&-div {
|
||||
background-color: var( --background-color-icon--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
// For transition purpose
|
||||
> * {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// For transition purpose
|
||||
&-header,
|
||||
&-menu {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-header {
|
||||
&__header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding: ~'calc( var( --padding-page ) + 20px )' var( --padding-page ) 15px var( --padding-page );
|
||||
padding: var( --size-button--header ) var( --padding-page ) 0.8rem; // TODO: Replace with space token
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
.mw-logo-icon {
|
||||
width: auto;
|
||||
height: 48px;
|
||||
}
|
||||
// Keep aspect ratio
|
||||
&__logo img {
|
||||
width: auto;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
&-siteinfo {
|
||||
margin: 0 20px;
|
||||
|
||||
&__siteinfo {
|
||||
.mw-logo-wordmark {
|
||||
margin-top: 5px;
|
||||
margin-top: 0.375rem;
|
||||
color: var( --color-base--emphasized );
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-search {
|
||||
margin-top: 10px;
|
||||
|
||||
&-input {
|
||||
width: 200px;
|
||||
padding: 8px;
|
||||
background: var( --color-surface-1 );
|
||||
border-radius: var( --border-radius--small );
|
||||
box-shadow: var( --box-shadow-card );
|
||||
text-align: center;
|
||||
transition: @transition-background;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
&__menu {
|
||||
display: grid;
|
||||
max-width: ~'calc( 100vw - var( --padding-page ) * 4 )';
|
||||
padding: ~'calc( var(--padding-page) / 2 ) calc( var(--padding-page) / 2 ) var( --padding-page ) calc( var(--padding-page) / 2 )';
|
||||
font-size: @ui-menu-text;
|
||||
gap: ~'calc( var(--padding-page) / 4 )';
|
||||
grid-template-columns: repeat( auto-fit, 240px );
|
||||
max-width: 92vw;
|
||||
justify-content: center;
|
||||
padding: 0.625rem 0.625rem 1.25rem 0.625rem; // TODO: Replace with space token
|
||||
font-size: 0.875rem; // TODO: Make this a variable
|
||||
gap: 0.625rem; // TODO: Replace with space token
|
||||
grid-template-columns: repeat( auto-fit, 15rem );
|
||||
|
||||
a {
|
||||
.menu-item-link;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @padding-menu-item-big;
|
||||
padding: 0.625rem 1.25rem; // TODO: Make this a variable
|
||||
border-radius: var( --border-radius--small );
|
||||
gap: 1rem; // TODO: Replace with space token
|
||||
|
||||
&:after {
|
||||
.resource-loader-list-icon;
|
||||
display: block;
|
||||
margin-left: @icon-padding;
|
||||
background-size: contain;
|
||||
opacity: var( --opacity-icon-base );
|
||||
transition: @transition-opacity;
|
||||
|
|
@ -191,83 +86,56 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mw-drawer {
|
||||
&-button {
|
||||
&-icon {
|
||||
&-div {
|
||||
z-index: 5;
|
||||
display: block;
|
||||
width: @icon-size;
|
||||
height: 2px;
|
||||
margin: 1.5px 0;
|
||||
background-color: var( --background-color-icon );
|
||||
border-radius: var( --border-radius--large );
|
||||
transform-origin: 4px 0;
|
||||
transition: @transition-transform, @transition-background, @transition-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-nojs {
|
||||
#mw-drawer-search {
|
||||
// Hide search when client has no JS
|
||||
// Since the function does not work without script
|
||||
display: none;
|
||||
// Checkbox hack
|
||||
#citizen-drawer__checkbox:checked {
|
||||
~ .citizen-drawer > .citizen-drawer__card {
|
||||
.citizen-card-show;
|
||||
}
|
||||
}
|
||||
|
||||
// Wait for first paint before animating
|
||||
.citizen-animations-ready {
|
||||
#mw-drawer {
|
||||
.citizen-drawer__card {
|
||||
.citizen-card-transition();
|
||||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
#mw-drawer-menu a:after {
|
||||
// Icons in nav links
|
||||
.citizen-drawer__menu a:after {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
// RTL
|
||||
.rtl {
|
||||
#mw-drawer-button:hover {
|
||||
~ #mw-drawer-button-icon {
|
||||
#mw-drawer-button-icon-1 {
|
||||
transform: translate3d( 50%, 0, 0 );
|
||||
}
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.citizen-drawer {
|
||||
&__card {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__header {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
#mw-drawer {
|
||||
right: unset;
|
||||
bottom: unset;
|
||||
max-height: ~'calc(100vh - var(--margin-header-item) * 2 )';
|
||||
align-items: flex-start;
|
||||
|
||||
&-header {
|
||||
justify-content: left;
|
||||
.citizen-drawer {
|
||||
&__logo img {
|
||||
// Bigger logo
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
&-siteinfo {
|
||||
&__siteinfo {
|
||||
.mw-logo-wordmark {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
.mw-logo-icon {
|
||||
width: auto;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
#mw-drawer-menu {
|
||||
max-width: 1200px;
|
||||
.citizen-drawer__menu {
|
||||
max-width: 1200px; // So that it doesn't span too wide
|
||||
}
|
||||
}
|
||||
|
|
|
|||
96
resources/skins.citizen.styles/Drawer__button.less
Normal file
96
resources/skins.citizen.styles/Drawer__button.less
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
.citizen-drawer__button {
|
||||
position: relative; // prevent overlap by drawer
|
||||
|
||||
&Icon {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
transition: @transition-transform, @transition-background, @transition-opacity;
|
||||
|
||||
> div {
|
||||
display: block;
|
||||
width: 1.125rem;
|
||||
height: 0.125rem;
|
||||
margin: 0.09375rem 0;
|
||||
background-color: var( --background-color-icon );
|
||||
border-radius: var( --border-radius--large );
|
||||
transform-origin: 0.25rem 0;
|
||||
transition: inherit;
|
||||
|
||||
&:first-child {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
&:nth-child( 2 ) {
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .citizen-drawer__buttonIcon {
|
||||
> div {
|
||||
background-color: var( --background-color-icon--hover );
|
||||
|
||||
&:first-child {
|
||||
transform: translate3d( -50%, 0, 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
> .citizen-drawer__buttonIcon {
|
||||
> div {
|
||||
background-color: var( --background-color-icon--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RTL
|
||||
.rtl {
|
||||
.citizen-drawer__button:hover {
|
||||
&Icon {
|
||||
> div {
|
||||
&:first-child {
|
||||
transform: translate3d( 50%, 0, 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox hack
|
||||
#citizen-drawer__checkbox:checked {
|
||||
// Transform all the slices of the button into a crossmark
|
||||
~ .citizen-drawer {
|
||||
.citizen-drawer__button {
|
||||
&Icon {
|
||||
> div {
|
||||
&:first-child {
|
||||
opacity: 0;
|
||||
/* @noflip */
|
||||
transform: rotate( 0deg ) scale( 0.2, 0.2 );
|
||||
}
|
||||
// Reflect line
|
||||
&:nth-child( 2 ) {
|
||||
/* @noflip */
|
||||
transform: rotate( -45deg ) translate3d( -0.125rem, 0.375rem, 0 );
|
||||
}
|
||||
|
||||
// Hide line
|
||||
&:last-child {
|
||||
/* @noflip */
|
||||
transform: rotate( 45deg ) translate3d( -0.3125rem, -0.4375rem, 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .citizen-drawer__buttonIcon {
|
||||
transform: scale( 0.85 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
.mw-header {
|
||||
.citizen-header {
|
||||
--margin-header-item: 8px;
|
||||
--margin-header-item--corner: ~'calc( var( --padding-page ) / 2 )';
|
||||
--padding-header-icon: ~'calc( ( var( --height-header ) - var( --size-icon ) - var( --margin-header-item ) * 2 ) / 2 )';
|
||||
--width-button-base: ~'calc(var(--size-icon) + var(--padding-page))';
|
||||
--width-button-corner: ~'calc(var(--size-icon) + var(--padding-page) * 2)';
|
||||
|
||||
--size-button--header: ~'calc( var( --height-header ) - 1rem )';
|
||||
--size-icon--header: 1.25rem;
|
||||
--margin-header: 0.5rem;
|
||||
--padding-header: ~'calc( var( --padding-page ) / 2 )';
|
||||
position: fixed;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
|
|
@ -12,21 +17,7 @@
|
|||
display: flex;
|
||||
height: var( --height-header );
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
|
||||
& > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
padding: 0 var( --padding-header );
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
|
|
@ -38,6 +29,54 @@
|
|||
content: '';
|
||||
-webkit-mask-image: linear-gradient( 180deg, #000, transparent );
|
||||
mask-image: linear-gradient( 180deg, #000, transparent );
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: grid;
|
||||
width: var( --size-button--header );
|
||||
height: var( --size-button--header );
|
||||
border-radius: var( --border-radius--small );
|
||||
place-items: center;
|
||||
|
||||
// Used in checkbox hack
|
||||
&Checkbox {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
&Icon {
|
||||
overflow: hidden; // Sometimes CSS animation can clip
|
||||
width: var( --size-icon--header );
|
||||
height: var( --size-icon--header );
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-header {
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&-button {
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.mw-logo {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -4,14 +4,27 @@ a.feedlink {
|
|||
}
|
||||
|
||||
// CSS checkbox hack
|
||||
// TODO: See what MW core offer and maybe we can take it off
|
||||
.mw-checkbox-hack {
|
||||
&-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-button {
|
||||
overflow: hidden;
|
||||
text-indent: -999px;
|
||||
cursor: pointer;
|
||||
|
||||
> span {
|
||||
position: absolute !important;
|
||||
//.mixin-screen-reader-text;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: -1px;
|
||||
clip: rect( 1px, 1px, 1px, 1px );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
// Components
|
||||
@import 'Header.less';
|
||||
@import 'Drawer.less';
|
||||
@import 'Drawer__button.less';
|
||||
@import 'Siteinfo.less';
|
||||
@import 'Logo.less';
|
||||
@import 'Personalmenu.less';
|
||||
@import 'Searchbox.less';
|
||||
@import 'Pagetools.less';
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@
|
|||
/* `--*size` variables are used for `*width` & `*height` properties. */
|
||||
@size-icon: 20px;
|
||||
// Not in the header section it is also used outside of header
|
||||
@height-header: 56px;
|
||||
@height-header: 3.5rem;
|
||||
@width-layout: @width-breakpoint-desktop - 2 * @padding-page;
|
||||
@width-toc: @width-breakpoint-desktop-wide - @width-breakpoint-desktop;
|
||||
|
||||
|
|
@ -335,7 +335,7 @@
|
|||
@html-font-size: 100%;
|
||||
@margin-side: 20px;
|
||||
@footer-width: 1290px;
|
||||
@icon-size: 18px;
|
||||
@icon-size: 1.125rem; // 18px, TODO: Replace this var
|
||||
@icon-box-size: @icon-size + @icon-margin * 2;
|
||||
@icon-margin: 3px;
|
||||
@icon-padding: 15px;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@
|
|||
],
|
||||
"messages": [
|
||||
"citizen-drawer-toggle",
|
||||
"citizen-drawer-search",
|
||||
"citizen-personalmenu-toggle",
|
||||
"citizen-search-toggle",
|
||||
"citizen-theme-toggle",
|
||||
|
|
@ -465,7 +464,7 @@
|
|||
},
|
||||
"skins.citizen.icons.sitestats": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"selector": "#sitestats-{name}:before",
|
||||
"selector": "#citizen-siteStats__item--{name}:before",
|
||||
"useDataURI": false,
|
||||
"images": {
|
||||
"articles": {
|
||||
|
|
@ -736,12 +735,6 @@
|
|||
"descriptionmsg": "citizen-config-portalattach",
|
||||
"public": true
|
||||
},
|
||||
"EnableDrawerSubSearch": {
|
||||
"value": false,
|
||||
"description": "Enables to search the drawer for menu entries",
|
||||
"descriptionmsg": "citizen-config-enabledrawersubsearch",
|
||||
"public": true
|
||||
},
|
||||
"EnableCollapsibleSections": {
|
||||
"value": true,
|
||||
"description": "Enables or disable collapsible sections on content pages",
|
||||
|
|
|
|||
|
|
@ -2,46 +2,21 @@
|
|||
string msg-citizen-drawer-toggle The label used by the drawer button.
|
||||
string msg-sitesubtitle the contents of the sitesubtitle message key
|
||||
}}
|
||||
<input
|
||||
type="checkbox"
|
||||
id="mw-drawer-checkbox"
|
||||
class="mw-checkbox-hack-checkbox">
|
||||
<label
|
||||
id="mw-drawer-button"
|
||||
class="mw-checkbox-hack-button mw-header-button"
|
||||
for="mw-drawer-checkbox"
|
||||
role="button"
|
||||
aria-controls="mw-drawer"
|
||||
tabindex="0">
|
||||
{{msg-citizen-drawer-toggle}}
|
||||
</label>
|
||||
<div id="mw-drawer-button-icon">
|
||||
<div id="mw-drawer-button-icon-1" class="mw-drawer-button-icon-div"></div>
|
||||
<div id="mw-drawer-button-icon-2" class="mw-drawer-button-icon-div"></div>
|
||||
<div id="mw-drawer-button-icon-3" class="mw-drawer-button-icon-div"></div>
|
||||
</div>
|
||||
<aside id="mw-drawer">
|
||||
<header id="mw-drawer-header">
|
||||
<div id="mw-drawer-logo" role="banner">
|
||||
{{>Logo}}
|
||||
</div>
|
||||
<div id="mw-drawer-siteinfo">
|
||||
{{>SiteStats}}
|
||||
<div class="mw-logo-wordmark">{{msg-sitetitle}}</div>
|
||||
{{#data-drawer-subsearch}}
|
||||
<div id="mw-drawer-search">
|
||||
<input
|
||||
type="search"
|
||||
title="{{msg-citizen-drawer-search}}"
|
||||
placeholder="{{msg-citizen-drawer-search}}"
|
||||
id="mw-drawer-search-input" />
|
||||
<div class="citizen-drawer citizen-header__item">
|
||||
{{! ID needed for a11y and checkbox hack }}
|
||||
<aside id="citizen-drawer__card" class="citizen-drawer__card">
|
||||
<header class="citizen-drawer__header">
|
||||
{{>Drawer__logo}}
|
||||
<div class="citizen-drawer__siteinfo">
|
||||
{{>Drawer__siteStats}}
|
||||
<div class="mw-logo-wordmark">{{msg-sitetitle}}</div>
|
||||
</div>
|
||||
{{/data-drawer-subsearch}}
|
||||
</div>
|
||||
</header>
|
||||
<section id="mw-drawer-menu">
|
||||
{{#data-portals-first}}{{>Menu}}{{/data-portals-first}}
|
||||
{{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}}
|
||||
{{#data-portals-languages}}{{>Menu}}{{/data-portals-languages}}
|
||||
</section>
|
||||
</aside>
|
||||
</header>
|
||||
<section class="citizen-drawer__menu">
|
||||
{{#data-portals-first}}{{>Menu}}{{/data-portals-first}}
|
||||
{{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}}
|
||||
{{#data-portals-languages}}{{>Menu}}{{/data-portals-languages}}
|
||||
</section>
|
||||
</aside>
|
||||
{{>Drawer__button}}
|
||||
</div>
|
||||
20
templates/Drawer__button.mustache
Normal file
20
templates/Drawer__button.mustache
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{{!
|
||||
string msg-citizen-drawer-toggle The label used by the drawer button.
|
||||
}}
|
||||
<div class="citizen-drawer__button citizen-header__button">
|
||||
<div class="citizen-drawer__buttonIcon citizen-header__buttonIcon">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<label
|
||||
id="citizen-drawer__buttonCheckbox"
|
||||
class="mw-checkbox-hack-button citizen-header__buttonCheckbox"
|
||||
for="citizen-drawer__checkbox"
|
||||
role="button"
|
||||
title="{{msg-citizen-drawer-toggle}}"
|
||||
aria-controls="citizen-drawer__card"
|
||||
tabindex="0">
|
||||
<span>{{msg-citizen-drawer-toggle}}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
string msg-sitesubtitle the contents of the sitesubtitle message key
|
||||
}}
|
||||
{{#data-logos}}
|
||||
<a {{{html-mainpage-attributes}}} class="mw-logo">
|
||||
<a {{{html-mainpage-attributes}}} class="mw-logo citizen-drawer__logo">
|
||||
{{! alt is provided for valid HTML but given aria-hidden not needed. }}
|
||||
<img class="mw-logo-icon" src="{{!
|
||||
Pick an icon based on this order: Icon > SVG > 1x
|
||||
|
|
@ -16,6 +16,6 @@
|
|||
}}{{#1x}}{{.}}{{/1x}}{{!
|
||||
}}{{/svg}}{{!
|
||||
}}{{/icon}}"{{!
|
||||
}}alt="" aria-hidden="true" height="50" width="50">
|
||||
}}alt="" aria-hidden="true" height="80" width="80">
|
||||
</a>
|
||||
{{/data-logos}}
|
||||
7
templates/Drawer__siteStats.mustache
Normal file
7
templates/Drawer__siteStats.mustache
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{{#data-drawer-sitestats}}
|
||||
<div class="citizen-siteStats">
|
||||
{{#array-drawer-sitestats-item}}
|
||||
<div class="citizen-siteStats__item" id="citizen-siteStats__item--{{id}}" title="{{label}}">{{value}}</div>
|
||||
{{/array-drawer-sitestats-item}}
|
||||
</div>
|
||||
{{/data-drawer-sitestats}}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
{{!
|
||||
string msg-citizen-header-menu-toggle tooltip for menu toggle
|
||||
string msg-citizen-header-search-toggle tooltip for search toggle
|
||||
string msg-citizen-drawer-toggle The label used by the drawer button.
|
||||
}}
|
||||
<header class="mw-header">
|
||||
<header class="mw-header citizen-header">
|
||||
{{>Header__checkboxhack}}
|
||||
{{#data-drawer}}{{>Drawer}}{{/data-drawer}}
|
||||
{{! .citizen-header__inner }}
|
||||
<div id="mw-header-siteinfo">
|
||||
<a id="header-sitetitle" class="mw-wiki-title" {{{html-mainpage-attributes}}}>{{>Wordmark}}</a>
|
||||
<a id="header-pagetitle" href="#top" title="{{msg-citizen-jumptotop}}">{{{html-title}}}</a>
|
||||
|
|
@ -11,6 +12,7 @@
|
|||
<div id="mw-header-tools">
|
||||
{{#data-extratools}}{{>Menu}}{{/data-extratools}}
|
||||
{{#data-personal-menu}}{{>PersonalMenu}}{{/data-personal-menu}}
|
||||
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
|
||||
</div>
|
||||
{{! .citizen-search }}
|
||||
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
|
||||
</header>
|
||||
|
|
|
|||
5
templates/Header__checkboxhack.mustache
Normal file
5
templates/Header__checkboxhack.mustache
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{{! ID needed for a11y and checkbox hack }}
|
||||
<input
|
||||
type="checkbox"
|
||||
id="citizen-drawer__checkbox"
|
||||
class="mw-checkbox-hack-checkbox">
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{{!
|
||||
|
||||
}}
|
||||
{{#data-drawer-sitestats}}
|
||||
<div id="mw-drawer-sitestats">
|
||||
{{#array-drawer-sitestats-item}}
|
||||
<div class="sitestats-item" id="sitestats-{{id}}" title="{{label}}">{{value}}</div>
|
||||
{{/array-drawer-sitestats-item}}
|
||||
</div>
|
||||
{{/data-drawer-sitestats}}
|
||||
Loading…
Reference in a new issue