From 85722d3dded2a939b894ed7c819e3573a6e29767 Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Mon, 10 Nov 2014 14:34:06 -0800
Subject: [PATCH] Use ellipses to truncate long constraint values at responsive
 breakpoints

---
 .../stylesheets/blacklight/_catalog.css.scss  | 20 ++++++++++++++++++-
 .../catalog/_constraints_element.html.erb     |  2 +-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/blacklight/_catalog.css.scss b/app/assets/stylesheets/blacklight/_catalog.css.scss
index 55afd07956..d686ad348c 100644
--- 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
index 3e320307c5..f87d162b01 100644
--- 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? %>