Issue #2225355 by emma.maria, thamas, sqndr, Manuel Garcia: Make tables responsive

bluecheese.info

@@ -25,6 +25,8 @@ stylesheets[all][] = css/styles.css
 
 ; -------- Javascript ---------------
 scripts[] = js/bluecheese.js
+scripts[] = js/plugins/responsive_tables.js
+
 
 ; -------- Theme based custom Vote Up Down Widgets ---------------
 plugins[vud][widgets] = widgets

js/bluecheese.js

@@ -24,4 +24,7 @@
       }
     }
   };
+  $(document).ready(function() {
+    $("table").not("#forum table").not(".page-user-track table").not("#project-usage-project-releases").responsivetable();
+  });
 })(jQuery);

js/plugins/responsive_tables.js

+(function($) {
+  $.fn.responsivetable = function() {
+    var $window = $(window);
+    var windowsize = $window.width();
+    var tables = this;
+      for (var i = tables.length - 1; i >= 0; i--) {
+        var tablesize = $(tables[i]).width();
+        if (windowsize <= tablesize) {
+          $(tables[i]).addClass("mobile-table");
+        }
+      };
+      return this;
+  };
+})(jQuery);

sass/partials/common/_common.scss

@@ -25,6 +25,7 @@
 @import 'node';
 @import 'page';
 @import 'pager';
+@import 'responsive-tables';
 @import 'search';
 @import 'search-advanced';
 @import 'search-help';

sass/partials/common/_responsive-tables.scss

+table.mobile-table {
+  width: 100%;
+  border-collapse: collapse;
+  //Stops table from being bigger than the page container
+  table-layout: fixed;
+  th {
+    display: none;
+  }
+  td {
+    display: block;
+    border: none !important;
+    // Removes label from issue title as it is not needed
+    &.views-field-title,
+    &.views-field-field-project {
+      &:before {
+      display: none;
+      }
+    }
+    &:first-child {
+      padding-top: 0.75em;
+      font-weight: bold;
+    }
+    &:last-child {
+      padding-bottom: 0.75em;
+    }
+    &:before {
+      // Adds the original header title infront of each table cell
+      content: attr(data-th)" ";
+      font-weight: bold;
+      width: 8em;
+      display: inline-block;
+    }
+  }
+  // Switch the issue status table cell border sstyles to the rows for mobile
+  &.project-issue tr {
+    background-color: $issue-status-1;
+    border-bottom: 1px solid nth($greys, 3);
+    border-top: 2px solid $issue-grey;
+    //forces the removal of all border-tops cells of every state
+    td {
+      &.active {
+      background-color: initial !important;
+      }
+      &.views-field-title {
+        max-width: none;
+      }
+    }
+    &.state-1 {
+      background-color: $issue-status-1;
+      border-top: 2px solid $issue-grey;
+    }
+    &.state-2 {
+      background-color: $issue-status-2;
+      border-top: 2px solid $issue-green;
+    }
+    &.state-3,
+    &.state-4,
+    &.state-5,
+    &.state-6,
+    &.state-16 {
+      background-color: $issue-status-3;
+      border-top: 2px solid $issue-blue;
+    }
+    &.state-7,
+    &.state-18 {
+      background-color: $issue-status-7;
+      border-top: 2px solid nth($issue-pink, 2);
+    }
+    &.state-8 {
+      background-color: $issue-status-8;
+      border-top: 2px solid $issue-orange;
+    }
+    &.state-13 {
+      background-color: $issue-status-13;
+      border-top: 2px solid nth($issue-pink, 1);
+    }
+    &.state-14,
+    &.state-15 {
+      background-color: $issue-status-14;
+      border-top: 2px solid $issue-light-green;
+    }
+  }
+}

template.php

@@ -55,6 +55,22 @@ function bluecheese_preprocess_aggregator_item(&$variables) {
   }
 }
 
+/**
+ * Add data-th attributes to table cells in views.
+ */
+function bluecheese_preprocess_views_view_table(&$vars) {
+  $view     = $vars['view'];
+  $handler  = $view->style_plugin;
+  $fields   = &$view->field;
+  $columns  = $handler->sanitize_columns($options['columns'], $fields);
+  $result   = $vars['result'];
+  foreach ($columns as $field => $column) {
+    foreach ($result as $num => $row) {
+      $vars['field_attributes'][$field][$num]['data-th'] = check_plain(!empty($fields[$field]) ? $fields[$field]->label() : '');
+    }
+  }
+}
+
 /**
  * Implements hook_css_alter().
  *