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

fix(overflow): 🐛 align scroll buttons with content margin

Browse source
This commit is contained in:
alistair3149 2024-06-11 19:07:38 -04:00
parent cbf60030f1
commit 4b457dfa08
No known key found for this signature in database
2 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/skins.citizen.scripts/overflowElements.js
View file

@ -158,8 +158,14 @@ class OverflowElement {
this.content = content; this.content = content;
if ( this.isPointerDevice ) { if ( this.isPointerDevice ) {
const elementStyles = window.getComputedStyle( this.element );
const topMargin = parseInt( elementStyles.marginTop );
const bottomMargin = parseInt( elementStyles.marginBottom );
const nav = document.createElement( 'div' ); const nav = document.createElement( 'div' );
nav.className = 'citizen-overflow-nav'; nav.className = 'citizen-overflow-nav';
nav.style.marginTop = `${ topMargin }px`;
nav.style.marginBottom = `${ bottomMargin }px`;
const leftButton = document.createElement( 'button' ); const leftButton = document.createElement( 'button' );
leftButton.className = leftButton.className =

10
resources/skins.citizen.styles/components/OverflowElements.less
View file

@ -55,11 +55,10 @@
inset: 0; inset: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: var( --space-md );
margin-bottom: var( --space-md );
} }
&-navButton { &-navButton {
width: @overflow-affordnance-size;
height: 100%; height: 100%;
padding: 0; padding: 0;
appearance: none; appearance: none;
@ -67,8 +66,15 @@
background: transparent; background: transparent;
border: 0; border: 0;
border-radius: var( --border-radius--small ); border-radius: var( --border-radius--small );
display: flex;
align-items: center;
justify-content: center;
.hideOverflowButton(); .hideOverflowButton();
&::before {
width: 1.25rem;
}
&-left { &-left {
.citizen-overflow--left & { .citizen-overflow--left & {
.showOverflowButton(); .showOverflowButton();