Merge pull request #1006 from projectblacklight/constraint-breakpoints

Use ellipses to truncate long constraint values at responsive breakpoints
projectblacklight · Nov 12, 2014 · a8fd122 · a8fd122
2 parents 7d4a004 + 85722d3
commit a8fd122
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/app/assets/stylesheets/blacklight/_catalog.css.scss b/app/assets/stylesheets/blacklight/_catalog.css.scss
@@ -52,7 +52,25 @@ span.constraints-label {
 {
   .constraint-value {
     cursor: default;
-
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    @media (max-width: $screen-xs-max) {
+      max-width: $screen-xs-min / 2;
+    }
+
+    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+      max-width: $screen-sm-min / 2;
+    }
+
+    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+      max-width: $screen-md-min / 2;
+    }
+
+    @media (min-width: $screen-lg-min) {
+      max-width: $screen-lg-min / 2;
+    }
+
     &:hover, &:active {
       background-color: $btn-default-bg;
       border-color: $btn-default-border;

diff --git a/app/views/catalog/_constraints_element.html.erb b/app/views/catalog/_constraints_element.html.erb
@@ -13,7 +13,7 @@
       <span class="filterName"><%= label %></span>
     <% end %>
     <% unless value.blank? %>
-      <span class="filterValue"><%= value %></span>
+      <%= content_tag :span, value, class: 'filterValue', title: value %>
     <% end %>
   </span>
   <% unless options[:remove].blank? %>