Improve filter button

gulpfile.js

@@ -8,14 +8,15 @@ var watchify = require('watchify');
 var browserify = require('browserify');
 
 var gulp = require('gulp');
-var rev = require('gulp-rev');
 var gulpif = require('gulp-if');
-var sass = require('gulp-sass');
 var gutil = require('gulp-util');
-var rename = require('gulp-rename');
-var uglify = require('gulp-uglify');
 var minifyCss = require('gulp-minify-css');
+var rename = require('gulp-rename');
+var rev = require('gulp-rev');
 var preprocessify = require('preprocessify');
+var sass = require('gulp-sass');
+var sourcemaps = require('gulp-sourcemaps');
+var uglify = require('gulp-uglify');
 
 var debug = !!process.env.FEC_WEB_DEBUG;
 var production = !!process.env.FEC_WEB_PRODUCTION;
@@ -57,6 +58,7 @@ gulp.task('copy-static', function() {
 gulp.task('build-sass', ['copy-static'], function() {
   return gulp.src('./static/styles/styles.scss')
     .pipe(rename('static/styles/styles.css'))
+    .pipe(sourcemaps.init())
     .pipe(sass({
       includePaths: Array.prototype.concat(
         './static/styles',
@@ -66,6 +68,7 @@ gulp.task('build-sass', ['copy-static'], function() {
       )
     }).on('error', sass.logError))
     .pipe(rev())
+    .pipe(sourcemaps.write())
     .pipe(gulpif(production, minifyCss()))
     .pipe(gulp.dest('.'))
     .pipe(rev.manifest({merge: true}))

package.json

@@ -5,6 +5,7 @@
   "main": "app.js",
   "devDependencies": {
     "chai": "^1.10.0",
+    "gulp-sourcemaps": "^1.5.2",
     "jquery-mockjax": "^1.6.1",
     "selenium-webdriver": "^2.44.0",
     "watchify": "~2.0.0"

static/js/modules/filters.js

@@ -10,30 +10,35 @@ var List = require('list.js');
 var events = require('./events.js');
 
 // are the panels open?
-var open = true;
+var open = false;
 
 var openFilterPanel = function() {
-    $('body').addClass('panel-active--left');
-    $('.side-panel--left').addClass('side-panel--open');
-    $('#filter-toggle').addClass('active').html('<i class="ti-minus"></i> Hide Filters');
-    open = true;
+  $('body').addClass('panel-active--left');
+  $('.side-panel--left').addClass('side-panel--open');
+  $('#filter-toggle').addClass('active');
+  open = true;
 };
 
 var closeFilterPanel = function() {
-    $('body').removeClass('panel-active--left');
-    $('.side-panel--left').removeClass('side-panel--open');
-    $('#filter-toggle').removeClass('active').html('<i class="ti-plus"></i>Show Filters');
-    open = false;
+  $('body').removeClass('panel-active--left');
+  $('.side-panel--left').removeClass('side-panel--open');
+  $('#filter-toggle').removeClass('active');
+  open = false;
 };
 
-openFilterPanel();
+// Keep in sync with styles/grid-settings.scss.
+// TODO find better way to sync with scss.
+if ($('body').width() > 500) {
+  open = true;
+  openFilterPanel();
+}
 
 $('#filter-toggle').click(function(){
-    if ( open === true ) {
-        closeFilterPanel();
-    } else {
-        openFilterPanel();
-    }
+  if ( open === true ) {
+    closeFilterPanel();
+  } else {
+    openFilterPanel();
+  }
 });
 
 var prepareValue = function($elm, value) {

static/js/modules/tables.js

@@ -163,8 +163,8 @@ function initTable($table, $form, baseUrl, columns) {
     }
   });
   var $paging = $(api.table().container()).find('.results-info--top');
-  $paging.prepend($('#filter-toggle'));
   $paging.append($hideNullWidget);
+  $table.css('width', '100%');
   // Update filters and data table on navigation
   $(window).on('popstate', function() {
     filters.activateInitialFilters();

static/styles/_base/_buttons.scss

@@ -100,4 +100,3 @@ input[type="submit"],
     border: none;
   }
 }
-

static/styles/_base/_tables.scss

@@ -15,9 +15,16 @@ table.dataTable {
   }
 
   th {
-    padding: 1rem !important;
+    padding: 1rem;
     border-bottom: 1px solid $light-gray !important;
     text-align: left;
+
+    &.sorting_asc,
+    &.sorting_desc,
+    &.sorting {
+      background-position-x: left !important;
+      background-position-y: 10px !important;
+    }
   }
 
   tr, td, th {
@@ -37,7 +44,12 @@ table.dataTable {
   td {
     @include truncate();
     padding: .5em;
+    padding-left: 42px !important;
     border-bottom: 1px dotted $light-gray;
+
+    @include media($large) {
+      padding-left: 10px !important;
+    }
   }
 
   &.no-footer {
@@ -341,7 +353,7 @@ table.dataTable.dtr-inline.collapsed > tbody > tr.child > th:first-child:before
 table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
 table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
   top: 8px;
-  left: 4px;
+  left: 18px;
   height: 16px;
   width: 16px;
   display: block;

static/styles/_components/_filters.scss

@@ -29,6 +29,11 @@
     width: 100%;
   }
 
+  &:last-child {
+    border-bottom: 0;
+    text-align: center;
+  }
+
   &:nth-child(even) {
     margin-right: 0;
   }
@@ -38,7 +43,7 @@
     margin-top: 0;
     font-weight: bold;
   }
-  
+
   @include media($medium) {
     @include span-columns(6);
     input[type="text"], 
@@ -51,6 +56,10 @@
   @include media($large) {
     width: 100%;
 
+    &:last-child {
+      text-align: left;
+    }
+
     input[type="text"],
     select,
     .button--dropdown {
@@ -67,4 +76,4 @@
   display: none;
   padding: .5rem;
   float: left;
-}
+}

static/styles/_components/_meta-box.scss

@@ -33,4 +33,4 @@
   .results-count {
     padding-top: 1rem;
   }
-}
+}

static/styles/_components/_side-panel.scss

@@ -1,6 +1,13 @@
 // Side panel
 // This is the styles for slide out side panels
 
+
+.side-panel {
+  bottom: 0;
+  padding: 2rem;
+  top: 0;
+}
+
 .side-toggle {
   @include rem(padding, 1.0rem);
   @include transition(background-color, .1s);
@@ -22,25 +29,143 @@
   }
 }
 
-.side-panel {
-  padding: 2rem;
-  top: 0;
-  bottom: 0;
+.side-panel__toggle {
+  @include transform(translateX(-50%));
+  border-color: $light-gray;
+  left: 50%;
+  padding: 1rem;
+  position: absolute;
+  z-index: 100;
+
+  &:hover {
+    background: $lightest-gray;
+  }
+
+  &:after {
+    content: "Show filters";
+  }
+
+  .icon {
+    display: inline-block;
+    padding-right: .3em;
+
+    &:before {
+      content: "\e64b"; // Down
+    }
+  }
+
+  @include media($large) {
+    @include transform(translateX(0));
+
+    &:after {
+      content: "" !important;
+    }
+
+    &:hover, &:focus {
+      &:after {
+        content: "Show filters" !important;
+      }
+    }
+
+    .icon {
+      display: inline-block;
+      padding-right: .3em;
+
+      &:before {
+        content: "\e649"; // Right
+      }
+    }
+  }
 }
 
 .side-panel--left {
   @include clearfix();
-  display: none;
+  @include transition(margin-left .5s);
   background: $lightest-gray;
+  border-color: $light-gray;
+  border-style: solid;
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+  border-top-width: 0;
+  bottom: 0;
+  height: 0;
+  margin-right: 3%;
+  position: absolute;
+  top: 0;
   width: 100%;
 
-  &.side-panel--open {
-    display: block;
+  h4 {
+    margin-top: 1em;
+  }
+
+  &.side-panel {
+    padding: 0;
   }
 
   @include media($large) {
-    width: 20%;
+    height: auto;
     float: left;
+    margin-left: -17%;
+    position: static;
+    width: 17%;
+
+    .side-panel__box {
+      position: relative;
+    }
+
+    .side-panel__toggle.side-panel__toggle {
+      border-left-width: 0;
+      border-top-width: 1px;
+      float: right;
+      left: 100%;
+      top: 2rem;
+    }
+  }
+
+  &.side-panel--open {
+    left: 0;
+    height: auto;
+    margin-left: 0%;
+  }
+
+  .side-panel__toggle {
+    border-top-width: 0;
+    top: 100%;
+  }
+
+  .side-panel__box {
+    @include clearfix();
+    padding: 1rem 2rem;
+  }
+}
+
+.side-panel--open {
+  position: relative;
+
+  .side-panel__toggle {
+    .icon {
+      &:before {
+        content: "\e648"; // Up
+      }
+    }
+
+    @include media($large) {
+      .icon {
+        &:before {
+          content: "\e64a"; // Left
+        }
+      }
+    }
+
+    &:after {
+      content: "Hide filters";
+    }
+
+    &:hover, &:focus {
+      &:after {
+        content: "Hide filters" !important;
+      }
+    }
   }
 }
 
@@ -67,6 +192,3 @@
 
 }
 
-.panel-active--right {
-
-}