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": {