adding responsive-tables.js

Foreground.skin.php

@@ -75,8 +75,8 @@ class foregroundTemplate extends BaseTemplate {
 								<li class="has-dropdown active"><a href="#"><i class="icon-cogs"></i></a>
 									<ul class="dropdown">
 										<?php foreach ( $this->getToolbox() as $key => $item ) { echo $this->makeListItem($key, $item); } ?>
-										<li id="n-recentchanges"><a href="/wiki/Special:RecentChanges">Recent Changes</a></li>
-										<li id="n-help"><a href="/wiki/Help:Contents">Help</a></li>
+										<li id="n-recentchanges" <?php echo Linker::tooltip('recentchanges') ?>><a href="/wiki/Special:RecentChanges">Recent Changes</a></li>
+										<li id="n-help" <?php echo Linker::tooltip('help') ?>><a href="/wiki/Help:Contents">Help</a></li>
 									</ul>
 								</li>
 
@@ -128,13 +128,13 @@ class foregroundTemplate extends BaseTemplate {
 					<?php endif;
 					$namespace = str_replace('_', ' ', $this->getSkin()->getTitle()->getNsText());
 					$displaytitle = $this->data['title'];
-					if (!empty($namespace)) { 
+					if (!empty($namespace)) {
 						$pagetitle = $this->getSkin()->getTitle();
 						$newtitle = str_replace($namespace.':', '', $pagetitle);
 						$displaytitle = str_replace($pagetitle, $newtitle, $displaytitle);
 					?><h4 class="namespace label"><?php print $namespace; ?></h4><?php } ?>
 					<h2 class="title"><?php print $displaytitle; ?></h2>
-					<?php if ( $this->data['isarticle'] ) { ?><h3 id="siteSub"><?php $this->msg( 'tagline' ) ?></h3><?php } ?>
+					<?php if ( $this->data['isarticle'] ) { ?><h3 id="tagline"><?php $this->msg( 'tagline' ) ?></h3><?php } ?>
 					<h5 class="subtitle"><?php $this->html('subtitle') ?></h5>
 					<div class="clear_both"></div>
 					<?php $this->html('bodytext') ?>

assets/scripts/vendor/responsive-tables.js

@@ -0,0 +1,67 @@
+$(document).ready(function() {
+  var switched = false;
+  var updateTables = function() {
+    if (($(window).width() < 767) && !switched ){
+      switched = true;
+      $("table.responsive").each(function(i, element) {
+        splitTable($(element));
+      });
+      return true;
+    }
+    else if (switched && ($(window).width() > 767)) {
+      switched = false;
+      $("table.responsive").each(function(i, element) {
+        unsplitTable($(element));
+      });
+    }
+  };
+   
+  $(window).load(updateTables);
+  $(window).on("redraw",function(){switched=false;updateTables();}); // An event to listen for
+  $(window).on("resize", updateTables);
+   
+	
+	function splitTable(original)
+	{
+		original.wrap("<div class='table-wrapper' />");
+		
+		var copy = original.clone();
+		copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
+		copy.removeClass("responsive");
+		
+		original.closest(".table-wrapper").append(copy);
+		copy.wrap("<div class='pinned' />");
+		original.wrap("<div class='scrollable' />");
+
+    setCellHeights(original, copy);
+	}
+	
+	function unsplitTable(original) {
+    original.closest(".table-wrapper").find(".pinned").remove();
+    original.unwrap();
+    original.unwrap();
+	}
+
+  function setCellHeights(original, copy) {
+    var tr = original.find('tr'),
+        tr_copy = copy.find('tr'),
+        heights = [];
+
+    tr.each(function (index) {
+      var self = $(this),
+          tx = self.find('th, td');
+
+      tx.each(function () {
+        var height = $(this).outerHeight(true);
+        heights[index] = heights[index] || 0;
+        if (height > heights[index]) heights[index] = height;
+      });
+
+    });
+
+    tr_copy.each(function (index) {
+      $(this).height(heights[index]);
+    });
+  }
+
+});

assets/stylesheets/foreground.css

@@ -53,7 +53,7 @@ h2.title {
   margin-bottom: 0.1em;
 }
 
-h3#siteSub {
+h3#tagline {
   font-style: italic;
   font-size: small;
   margin-bottom: 0.5em;

foreground.php

@@ -42,6 +42,7 @@ $wgResourceModules['skins.foreground'] = array(
     'scripts'        => array(
         'foreground/assets/scripts/vendor/custom.modernizr.js',
         'foreground/assets/scripts/vendor/fastclick.js',
+        'foreground/assets/scripts/vendor/responsive-tables.js',
         'foreground/assets/scripts/foundation/foundation.js',
         'foreground/assets/scripts/foundation/foundation.topbar.js',
         'foreground/assets/scripts/foundation/foundation.dropdown.js',