Merge pull request #179 from wearefine/v1.4.1

release v1.4.1

CHANGELOG.md

@@ -4,7 +4,25 @@
 
 - enhancements
 - bugs
+
+## 1.4.1
+
+- enhancements
+    + Adds support for "js-results-table" utility class for filtered results AJAX targeting
+- bugs
+    + \#60596: Add helper + CSS for displaying images in list views
+    + \#61975: Add bottom border to table rows
+    + \#61164: Colorize form section headings per $c-custom-highlight
+    + \#60581: Tighten input display by displaying helper text to the right of labels
+    + \#60547: Tighten vertical padding of list view rows
+    + \#59915: Tighten default column widths on list views
+    + \#59343: Add drop-up support for select boxes at bottom of viewport. Increase default height of drop menus
+    + \#61163: Resolve issue with sortable theads not reacting to user input
+    + \#60184: Min-height is no longer added to last form section referenced in form subnav
+    + \#60184: Tighten default padding of form inputs and sections
+    + \#61045: Ensure max-height of asset preview within image uploader
     + Fix bug in activity log paging where certain cases or Kaminari's page object won't convert to a page number
+    + \#60183: Resolive issue with smaller images in popup rendering microscopic due to padding.
     + \#60923: Widen hint model for video url helper
     + \#60433: Adds flash messages to dashboard
     + \#61096: Adds warning notification style, apply to cancel message

Gemfile.lock

@@ -9,7 +9,7 @@ GIT
 PATH
   remote: .
   specs:
-    fae-rails (1.4.0)
+    fae-rails (1.4.1)
       acts_as_list (~> 0.4.0)
       browser (~> 0.8.0)
       carrierwave (~> 0.10.0)

app/assets/javascripts/fae/_modals.js

@@ -21,8 +21,8 @@ Fae.modals = {
       // create invisi-image to get natural width/height
       var image = new Image();
       image.src = $this.attr('src');
-      var image_width = image.width;
-      var image_height = image.height;
+      var image_width = image.width + 55;
+      var image_height = image.height + 55;
 
       $this.modal({
         minHeight: image_height,

app/assets/javascripts/fae/_tables.js

@@ -72,6 +72,13 @@ Fae.tables = {
 
         // Save it to the cookie as a string
         Cookies.set(_this.sort_cookie_name, cookie_value);
+
+        // Replace sticky table headers w/ newly sorted headers
+        $this.siblings('.sticky-table-header')
+          .find('thead')
+          .html(
+            $this.find('thead').html()
+          );
       });
   },
 
@@ -294,6 +301,15 @@ Fae.tables = {
 
       $fixed_header.append( $header );
       $this.after($fixed_header);
+
+      // Proxy clicks from .sticky-table-header to underlying tablesorter instance
+      if ($this.hasClass('tablesorter')) {
+        $fixed_header.on('click', 'th', function(e) {
+          $this
+            .find("th[data-column='" + $(e.currentTarget).data('column') + "']")
+            .trigger('sort');
+        });
+      }
     });
 
     /**

app/assets/javascripts/fae/form/_filtering.js

@@ -31,13 +31,17 @@ Fae.form.filtering = {
     // hardcode _this because this === Fryr object
     var _this = Fae.form.filtering;
     var post_url = _this.$filter_form.attr('action');
-    _this.$filter_form.next('table').addClass('loading-fade');
+    var $results_table = ($(".js-results-table").length) ? $(".js-results-table").first() : _this.$filter_form.find('table');
+
+    $results_table.addClass('loading-fade');
 
     $.post(post_url, this.params, function(data){
       var $data = $(data);
       var $table_from_data = $data.find('table').first();
+
       // replace table
-      _this.$filter_form.next('table').replaceWith($table_from_data);
+      $results_table.replaceWith($table_from_data);
+
       // replace sticky header
       $('.sticky-table-header thead').html($table_from_data.find('thead').html());
       // replace pagination
@@ -179,7 +183,10 @@ Fae.form.filtering = {
   _addSortingListeners: function() {
     var _this = this;
 
-    $('th[data-sort]').on('click', function() {
+    // Fizzle if listeneres have already been attached
+    if (this._are_sorting_listeners_setup === true) { return; }
+
+    $('body').on('click', 'th[data-sort]', function() {
       var $this = $(this);
       var new_direction = 'asc';
 
@@ -198,6 +205,9 @@ Fae.form.filtering = {
         page: ''
       });
     });
+
+    // To ensure listeners are only attached once
+    this._are_sorting_listeners_setup = true;
   },
 
   /**

app/assets/javascripts/fae/form/_form.js

@@ -23,8 +23,35 @@ Fae.form = {
       $('.input.file').fileinputer();
     }
 
+    // Mutate DOM to support two column labels for all standard inputs
+    this.makeTwoColumnLabels();
+
     // make all the hint areas
     $('.hint').hinter();
   },
 
+  makeTwoColumnLabels: function() {
+    $('.input label').each(function() {
+      var $element = $(this);
+
+      // Bail if we cannot find any helper_text
+      if (!$element.find('.helper_text').length) { return; }
+
+      // If present, get all DOM nodes w/ contents(), but ignore the .helper_text
+      var label_inner = $element.contents().filter(function() {
+        return !$(this).hasClass('helper_text');
+      });
+      var helper_text = $element.find('.helper_text');
+
+      // Replace existing label w/ newly wrapped elements, sans .helper_text
+      label_inner = $('<div class="label_inner" />').html(label_inner);
+      $element.html(label_inner);
+
+      // But then add .helper_text as a sibling
+      $element.append(helper_text);
+
+      // Ensure that we mark this input as having two column label support
+      $element.addClass('label--two_col');
+    });
+  }
 };

app/assets/javascripts/fae/form/fae_chosen.js

@@ -21,6 +21,22 @@
       }
 
       $this.chosen(settings);
+
+      // add handling for bottom of viewport / drop-up support
+      $this.on('chosen:showing_dropdown', function(event, params) {
+        var $chosen_container = $(event.target ).next('.chosen-container');
+        var $dropdown = $chosen_container.find('.chosen-drop');
+        var results_container_max_height = parseInt($dropdown.find('.chosen-results').css('max-height'));
+        var results_container_top_offset = 40; // to account for possibility of chosen search input
+        var dropdown_top = $dropdown.offset().top - FCH.$window.scrollTop();
+
+        if (dropdown_top + results_container_max_height + results_container_top_offset > FCH.dimensions.wh) {
+          $chosen_container.addClass('chosen-drop-up');
+        }
+      });
+      $this.on('chosen:hiding_dropdown', function(event, params) {
+         $(event.target).next('.chosen-container').removeClass('chosen-drop-up');
+      });
     });
 
   };

app/assets/javascripts/fae/form/hinter.js

@@ -51,21 +51,14 @@
    * @protected
    */
   Hinter.prototype._drawElements = function($el) {
-    var $label = $el.parent().find('label');
-    var $h6 = $label.find('h6');
+    var $label = $el.parent().find('.label_inner');
 
     //create the icon
     this.$icon = $('<span />', {
       class: this.options.icon_class + ' ' + this.options.style_class
     });
 
-    // so if there's an h6 description then insert it before
-    // if not, then append to the end of the label
-    if ($h6.length) {
-      this.$icon.insertBefore($h6);
-    } else {
-      this.$icon.appendTo($label);
-    }
+    this.$icon.appendTo($label);
   };
 
   /**

app/assets/javascripts/fae/navigation/_subnav_highlighter.js

@@ -60,30 +60,20 @@ Fae.navigation.subnav_highlighter = {
         var $this = $(this);
         var position = $this.position().top - scroll_top - legacy_buffer;
         var $link = $('a[href="#' + $this.attr('id') + '"]').parent();
+        var is_scrolled_to_bottom = scroll_top - legacy_buffer >= (FCH.$document.outerHeight() - FCH.dimensions.wh);
 
         $link.removeClass('-active');
-        if (position <= 0 || index === 0) {
-          $link.addClass('js-highligher');
+        if (position <= 0 || index === 0 || is_scrolled_to_bottom) {
+          $link.addClass('js-highlighter');
         }
       });
 
-      $('.js-highligher').last().addClass('-active').removeClass('js-highligher');
+      $('.js-highlighter').last().addClass('-active').removeClass('js-highlighter');
     }
-    FCH.scroll.push(scrollCallback);
 
-    //highlight the first one on page load
+    // highlight the first one on page load
     scrollCallback();
-
-    /**
-     * On resize, ensure last section is the same as the window height so when we skip to it the label is at the top
-     * @private
-     */
-    function lastSectionBuffer() {
-      var last_selector = $( subnav_class + ' li:last-child a').attr('href');
-      $(last_selector).css('min-height', FCH.$window.height());
-    }
-    lastSectionBuffer();
-    FCH.resize.push(lastSectionBuffer);
+    FCH.scroll.push(scrollCallback);
   },
 
   /**
@@ -107,6 +97,7 @@ Fae.navigation.subnav_highlighter = {
       if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) {
         var $target = $(this.hash);
         $target = $target.length ? $target : $('[name=' + this.hash.slice(1) + ']');
+
         // @depreciation - remove conditional wrapping (keep $target = ... and scroll_offset -= ...) in v2.0
         if(should_find_h2 && $target.find('h2').length) {
           $target = $target.find('h2');

app/assets/javascripts/fae/vendor/frob_core_helpers.js

@@ -326,13 +326,22 @@
      * @param {Number} [offset=0] - Additional offset to add to the scrollTop
      */
     smoothScroll: function($target, duration, delay, offset){
+      var _this = this;
+
       duration = this.setDefault(duration, 2000);
       delay = this.setDefault(delay, 100);
       offset = this.setDefault(offset, 0);
 
       setTimeout(function(){
+        var target_offset = $target.offset().top + offset;
+
+        // Ensure we scroll to bottom of page if target doesn't have enough space below for viewing
+        if (_this.$document.outerHeight() < target_offset + _this.dimensions.wh) {
+          target_offset = _this.$document.outerHeight() - _this.dimensions.wh;
+        }
+
         $('html, body').animate({
-          scrollTop: $target.offset().top + offset
+          scrollTop: target_offset
         }, duration);
       }, delay);
     },

app/assets/stylesheets/fae/base.scss

@@ -44,7 +44,8 @@
   'modules/tables/collapsible',
   'modules/tables/sticky',
   'modules/tables/tooltips',
-  'modules/tables/pagination'
+  'modules/tables/pagination',
+  'modules/tables/image'
 ;
 
 // Modules

app/assets/stylesheets/fae/globals/imports/_variables.scss

@@ -71,11 +71,10 @@ $c-header-bg: $c-darkest-grey !default;
 
 // Content Headers
 $c-content-header-bg: $c-white !default;
-$c-content-section-title: $c-lightest-grey !default;
 
 // Tables
 $c-table-th: $c-grey !default;
-$c-table-tr-even: $c-lightest-grey !default;
+$c-table-tr-even: $c-light-grey !default;
 $c-table-td: $c-near-white !default;
 $c-table-tr-hover: $c-white !default;
 $c-table-filter-header: $c-darkest-grey !default;

app/assets/stylesheets/fae/globals/imports/finescss/_fine_functions.scss

@@ -46,9 +46,9 @@
   @return false;
 }
 
-/// Grabs a color from $grays map
-/// @param {key} $key - Key to get value from $grays map
-/// @return - Color value
+// Grabs a color from $grays map
+// @param {key} $key - Key to get value from $grays map
+// @return - Color value
 @function gray($key: 30) {
   @if map-has-key($grays, $key) {
     @return map-get($grays, $key);
@@ -57,3 +57,20 @@
     @return #00f;
   }
 }
+
+// Choose from a light or dark contrasting foreground color given a background
+// Original function: https://medium.com/@mkel23/calculating-color-contrast-with-sass-eff39ef23f96
+@function pickForegroundColor($background, $c-light, $c-dark) {
+  $r: red($background);
+  $g: green($background);
+  $b: blue($background);
+
+  $yiq: (($r*299)+($g*587)+($b*114))/1000;
+
+  @if ($yiq >= 170) {
+    @return $c-dark; // Dark foreground
+  }
+  @else {
+    @return $c-light; // Light foreground
+  }
+}

app/assets/stylesheets/fae/globals/layout/_base.scss

@@ -17,7 +17,8 @@
 }
 
 .content {
-  padding: 30px $content-buffer 60px;
+  padding: 30px $content-buffer;
+  padding-bottom: 0;
   display: block; // IE, Safari don't treat <main> as a block element
 
   &.-bottom-shim {
@@ -26,8 +27,8 @@
 
   h2 {
     padding: 17px $content-buffer;
-    color: $c-text-heavy;
-    background: $c-content-section-title;
+    color: pickForegroundColor($c-custom-highlight, $c-white, $c-black);
+    background: $c-custom-highlight;
     border-top: 1px solid $c-border;
     text-transform: uppercase;
     font-size: 14px;

app/assets/stylesheets/fae/globals/legacy/_pre-1.3.scss

@@ -65,8 +65,8 @@
 
 .main_content-section-title {
   padding: 17px 40px;
-  color: $c-text-heavy;
-  background: $c-content-section-title;
+  color: pickForegroundColor($c-custom-highlight, $c-white, $c-black);
+  background: $c-custom-highlight;;
   border-top: 1px solid $c-border;
   text-transform: uppercase;
   font-size: 14px;
@@ -172,7 +172,7 @@ tbody {
 
 .form_content-wrapper {
   padding: 30px 30px 30px 40px;
-  border: 1px solid $c-border;
+  border: 1px solid $c-grey;
   border-top: 0;
   background: $c-form-table-bg;
 
@@ -204,9 +204,11 @@ tbody {
 .main_content-section {
   .js-addedit-form {
     @extend .content;
+    padding-bottom: 20px;
 
     .form_content-wrapper {
       h2 {
+        color: $c-text-heavy;
         letter-spacing: 0;
         text-transform: none;
         border: 0;

app/assets/stylesheets/fae/globals/navigation/_footer.scss

@@ -1,6 +1,6 @@
 .main-footer {
   @include transition(opacity 0.4s);
-  padding: 10px $content-buffer $content-buffer;
+  padding: 20px $content-buffer $content-buffer;
   opacity: 0;
 
   &.active {