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

fix(overflow): 🐛 fix undefined wrapper

Browse source
This commit is contained in:
alistair3149 2024-07-20 19:32:22 -04:00
parent 08a7a51566
commit 764f7593c3
No known key found for this signature in database
3 changed files with 24 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -143,13 +143,11 @@ class OverflowElement {
const wrapper = document.createElement( 'div' );
wrapper.className = 'citizen-overflow-wrapper';
this.handleInheritedClasses();
fragment.appendChild( wrapper );
this.wrapper = wrapper;
this.handleInheritedClasses();
if ( this.isPointerDevice ) {
const elementStyles = window.getComputedStyle( this.element );
const topMargin = parseInt( elementStyles.marginTop );
const bottomMargin = parseInt( elementStyles.marginBottom );
const createButton = ( type ) => {
const button = document.createElement( 'button' );
button.className = `citizen-overflow-navButton citizen-overflow-navButton-${ type } citizen-ui-icon mw-ui-icon-wikimedia-collapse`;
@ -160,8 +158,6 @@ class OverflowElement {
const nav = document.createElement( 'div' );
nav.className = 'citizen-overflow-nav';
nav.style.marginTop = `${ topMargin }px`;
nav.style.marginBottom = `${ bottomMargin }px`;
nav.appendChild( createButton( 'left' ) );
nav.appendChild( createButton( 'right' ) );
@ -178,7 +174,6 @@ class OverflowElement {
parentNode.insertBefore( fragment, this.element );
content.appendChild( this.element );
this.wrapper = wrapper;
this.content = content;
} catch ( error ) {
mw.log.error(

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

@ -28,16 +28,28 @@
&-wrapper {
position: relative;
display: flex; /* So that it respects float elements (#878) */
max-width: max-content;
&:has( .citizen-overflow-content > .wikitable ) {
margin-top: var( --space-md );
margin-bottom: var( --space-md );
border-radius: var( --border-radius-medium );
box-shadow: var( --box-shadow-border );
}
}
&-content {
width: 100%;
overflow-x: auto;
.wikitable {
> .wikitable {
display: table;
max-width: none;
/* Handle margin and box-shadow on outer wrapper */
margin-top: 0;
margin-bottom: 0;
overflow: initial;
box-shadow: none;
}
.citizen-overflow--left > & {
@ -72,7 +84,7 @@
cursor: pointer;
background: transparent;
border: 0;
border-radius: var( --border-radius-base );
border-radius: var( --border-radius-medium );
.hideOverflowButton();
&::before {

31
resources/skins.citizen.styles/skinning/content.tables.less
View file

@ -19,15 +19,9 @@
border-radius: var( --border-radius-medium );
box-shadow: var( --box-shadow-border );
// Avoid double border (#902)
&[ border='1' ] {
box-shadow: none;
}
caption {
padding-right: var( --space-sm );
padding-left: var( --space-sm );
margin-bottom: var( --space-xs );
padding: var( --space-xs ) var( --space-sm );
font-size: var( --font-size-medium );
font-weight: var( --font-weight-semibold );
color: var( --color-emphasized );
text-align: start;
@ -49,16 +43,9 @@
}
tr {
th,
td {
border-top: var( --border-width-base ) solid var( --border-color-base );
}
&:first-of-type {
th,
td {
border-top: 0;
&:first-child {
border-top-left-radius: var( --border-radius-medium );
}
@ -83,9 +70,9 @@
}
}
thead:has( + tbody ),
thead:has( + tfoot ),
tbody:has( + tfoot ) {
thead:has( + tbody:not( :empty ) ),
thead:has( + tfoot:not( :empty ) ),
tbody:has( + tfoot:not( :empty ) ) {
tr:last-of-type {
th,
td {
@ -100,14 +87,12 @@
}
}
thead + tbody,
thead + tfoot,
tbody + tfoot {
thead + tbody:not( :empty ),
thead + tfoot:not( :empty ),
tbody + tfoot:not( :empty ) {
tr:first-of-type {
th,
td {
border-top: var( --border-width-base ) solid var( --border-color-base );
&:first-child {
border-top-left-radius: var( --border-radius-sharp );
}