Merge "Scrollbars on wikitables and junk"

resources/images/arrow-ltr.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="16" xmlns="http://www.w3.org/2000/svg">
+ <path d="m8 3.5 5 5-5 5z" opacity=".33"/>
+</svg>

resources/images/arrow-rtl.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="16" xmlns="http://www.w3.org/2000/svg">
+ <path d="m13 3.5-5 5 5 5z" opacity=".33"/>
+</svg>

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( '<div class="content-table-wrapper"><div class="content-table"></div></div>' );
+	$( '.content-table-wrapper' ).prepend( '<div class="content-table-toggle"></div>' );
+
+	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 );
 } );

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;
+		}
+	}
+}

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