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

feat: change menu into a modal instead of overlay

Browse source
This commit is contained in:
alistair3149 2021-07-30 13:48:57 -04:00
parent 8bca28662b
commit b72ea763a3
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
1 changed files with 19 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
resources/skins.citizen.styles/Drawer.less
View file

@ -6,12 +6,15 @@
bottom: 0;
left: 0;
display: flex;
overflow: auto;
flex-direction: column;
align-items: center;
background-color: var( --background-color-overlay );
transform: translate3d( 0, -100%, 0 );
margin: var( --margin-header-item ) var( --margin-header-item--corner );
overscroll-behavior: contain;
transform: translate3d( 0, -110%, 0 );
transform-origin: 0 0;
user-select: none;
.citizen-card();
&-checkbox {
&:checked {
@ -101,11 +104,9 @@
&-header {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
padding: var( --height-header ) var( --padding-page ) 20px var( --padding-page );
border-bottom: 1px solid var( --border-color-base );
padding: ~'calc( var( --padding-page ) + 10px )' var( --padding-page ) 20px var( --padding-page );
}
&-logo {
@ -140,17 +141,13 @@
}
&-menu {
display: flex;
overflow: auto;
max-width: var( --width-layout );
flex-wrap: wrap;
justify-content: center;
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 )';
border-top: 1px solid var( --border-color-base );
font-size: @ui-menu-text;
overscroll-behavior: contain;
h3 {
font-size: 16px;
}
gap: ~'calc( var(--padding-page) / 4 )';
grid-template-columns: repeat( auto-fit, 240px );
a {
.menu-item-link;
@ -184,11 +181,6 @@
}
}
}
.mw-portal {
width: 240px;
margin-top: 20px;
}
}
}
@ -240,15 +232,17 @@
}
}
}
// Portal width (240px) * 2 + Magic (4px)
@media ( min-width: 484px ) {
#mw-drawer-menu {
justify-content: left; // Portals won't get center when there is more than one col
@media ( min-width: @width-breakpoint-tablet ) {
#mw-drawer {
right: unset;
bottom: unset;
max-height: ~'calc(100vh - var(--margin-header-item) * 2 )';
}
}
@media ( min-width: @width-breakpoint-desktop-wide ) {
#mw-drawer-menu {
max-width: 1200px; // 240px * 5
max-width: 1200px;
}
}