Fix facet wrapping/hyphenation in Firefox

projectblacklight · Oct 17, 2015 · 9950055 · 9950055
1 parent 70820e0
commit 9950055
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/app/assets/javascripts/blacklight/blacklight.js b/app/assets/javascripts/blacklight/blacklight.js
@@ -10,6 +10,7 @@
 //= require blacklight/ajax_modal
 //= require blacklight/search_context
 //= require blacklight/collapsable
+//= require blacklight/facet_load
 //
 //Bootstrap JS for providing collapsable tablet/mobile menu/alert boxes
 //= require bootstrap/transition

diff --git a/app/assets/javascripts/blacklight/facet_load.js b/app/assets/javascripts/blacklight/facet_load.js
@@ -0,0 +1,23 @@
+/*global Blacklight */
+
+(function($) {
+  'use strict';
+
+  Blacklight.doResizeFacetLabelsAndCounts = function() {
+    // adjust width of facet columns to fit their contents
+    function longer (a,b){ return b.textContent.length - a.textContent.length; }
+
+    $('ul.facet-values, ul.pivot-facet').each(function(){
+      var longest = $(this).find('span.facet-count').sort(longer).first();
+      var clone = longest.clone()
+        .css('visibility','hidden').css('width', 'auto');
+      $('body').append(clone);
+      $(this).find('.facet-count').first().width(clone.width());
+      clone.remove();
+    });
+  };
+
+  Blacklight.onLoad(function() {
+    Blacklight.doResizeFacetLabelsAndCounts();
+  });
+})(jQuery);
diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
@@ -40,12 +40,12 @@
 
 .facet-values {
   display: table;
+  table-layout: fixed;
   width: 100%;
 
   li {
 
     display: table-row;
-
     .selected {
       @extend .text-success;
     }
@@ -69,35 +69,34 @@
 
   @mixin hyphens-auto {
     // breaks long words apart so they don't cause the containing div to
-    // be too big
-    // from http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
-    -ms-word-break: break-all;
-    word-break: break-all;
+    // be too big, also fix hypenation
+    -ms-word-break: keep-all;
+    word-break: keep-all;
 
     // Non standard for webkit
     word-break: break-word;
 
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     -ms-hyphens: auto;
+    -o-hyphens: auto;
     hyphens: auto;
   }
 
   .facet-label {
     display: table-cell;
     padding-right: 1em;
-
     text-indent: -15px;
     padding-left: 15px;
     padding-bottom: $padding-base-vertical;
-
     @include hyphens-auto;
   }
 
   .facet-count {
     display: table-cell;
     vertical-align: top;
     text-align: right;
+    width: 5em;
   }
 }