diff --git a/resources/images/arrow-ltr.svg b/resources/images/arrow-ltr.svg new file mode 100644 index 0000000..baf5f30 --- /dev/null +++ b/resources/images/arrow-ltr.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/images/arrow-rtl.svg b/resources/images/arrow-rtl.svg new file mode 100644 index 0000000..7e37325 --- /dev/null +++ b/resources/images/arrow-rtl.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/main.js b/resources/main.js index 8406c75..222757b 100644 --- a/resources/main.js +++ b/resources/main.js @@ -42,4 +42,33 @@ $( function () { closeOpen(); } } ); + + /** + * Experimental overflowing table scrolling + */ + + // Gotta wrap them for this to work; maybe later the parser etc will do this for us?! + $( 'div > table' ).wrap( '
' ); + $( '.content-table-wrapper' ).prepend( '
' ); + + function unOverflowTables() { + $( 'div > table' ).each( function () { + var $table = $( this ), + $wrapper = $table.parent().parent(); + if ( $table.outerWidth() > $wrapper.outerWidth() ) { + $wrapper.addClass( 'overflowed' ); + + // Frame styled tables... + // eslint-disable-next-line no-jquery/no-class-state + if ( $table.hasClass( 'wikitable' ) || $table.hasClass( 'mw-datatable' ) ) { + $wrapper.addClass( 'framed' ); + } + } else { + $wrapper.removeClass( [ 'overflowed', 'framed' ] ); + } + } ); + } + + unOverflowTables(); + $( window ).on( 'resize', unOverflowTables ); } ); diff --git a/resources/main.js.less b/resources/main.js.less new file mode 100644 index 0000000..4e497ed --- /dev/null +++ b/resources/main.js.less @@ -0,0 +1,43 @@ +@import 'variables.less'; + +// Experimental overflowing table scrolling +.overflowed { + margin: 1em 0; + position: relative; + padding-right: 25px; + + &.framed { + border: solid 1px @base70; + + .content-table-toggle { + border-left: solid 1px @base70; + } + + .content-table { + border-right: solid 1px @base70; + margin: -1px -2px 0 0; + } + } + + .content-table-toggle { + width: 25px; + height: 100%; + background: @base80 url( images/arrow-ltr.svg ) no-repeat; + background-position: 100% 50%; + position: absolute; + top: 0; + right: 0; + } + + .content-table { + overflow: hidden; + overflow-x: scroll; + + .mw_metadata, + .mw-datatable, + .wikitable { + margin: 0 -1px; + border-bottom-width: 0; + } + } +} diff --git a/skin.json b/skin.json index 9f19e8e..b8c9d5a 100644 --- a/skin.json +++ b/skin.json @@ -1,6 +1,6 @@ { "name": "Timeless", - "version": "0.9.0", + "version": "0.9.1", "author": "Isarra Yos", "url": "https://www.mediawiki.org/wiki/Skin:Timeless", "descriptionmsg": "timeless-desc", @@ -99,7 +99,12 @@ "scripts": [ "resources/main.js", "resources/mobile.js" - ] + ], + "styles": { + "resources/main.js.less": { + "media": "screen" + } + } } }, "ResourceFileModulePaths": {