From: Dan Wells <dbw2@calvin.edu>
Date: Thu, 14 Nov 2013 20:12:46 +0000 (-0500)
Subject: Improve facet styling
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=1fff24ee104c1965003d4eea3123fe9227360562;p=working%2FEvergreen.git

Improve facet styling

1) Facets currently display very poorly when the number reaches 3-4
digits.  Facet data is more or less a two column table, so let's style
it that way to make it more robust.

2) Rearrange some styles to reduce redundancy, and allow overflow
where possible.

3) Change the selected highlight to look a little better.

Signed-off-by: Dan Wells <dbw2@calvin.edu>
Signed-off-by: Ben Shum <bshum@biblio.org>
---

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index c41a9b27f1..9c5feb7876 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1013,19 +1013,15 @@ div.adv_search_available {
 
 div#facet_sidebar {
     float: left;
-    border-right: 1px solid [% css_colors.border_standard %];
     margin-right: 1em;
 }
 
 .facet_box_temp {
     padding-bottom:3px;
-    width: 15em;
-    overflow:hidden;
 }
 
 .facet_box_temp .header {
-    height: 2.5em;
-    overflow:hidden;
+    height: 2.3em;
     background:[% css_colors.primary %];
     -moz-border-top-left-radius: 5px;
     border-top-left-radius: 5px;
@@ -1040,7 +1036,6 @@ div#facet_sidebar {
     float:left;
     padding-top:6px;
     padding-left:12px;
-    overflow:hidden;
 }
 
 .facet_box_temp .header a.button {
@@ -1050,45 +1045,36 @@ div#facet_sidebar {
     color:[% css_colors.text_invert %];
 }
 
-.facet_box_wrapper .box_wrapper {
-    position:relative;
-    top:-4px;
-    margin-bottom:-5px;
-    *margin-bottom:-6px;
-}
-
 .facet_box_wrapper .box_wrapper .box {
-    width: 14em;
     border-top:1px solid [% css_colors.border_standard %];
     border-left:1px solid [% css_colors.border_standard %];
     border-right:1px solid [% css_colors.border_standard %];
-    background:[% css_colors.background %];
-    padding-left:12px;
-    padding-top:6px;
+    padding: 0 0.5em;
+    width: 14em;
+    overflow: hidden;
 }
 
 .facet_template {
-    clear: both;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    display: table;
+    margin: 0.5em 0;
+    width: 100%;
 }
 
-.facet_template .facet {
-    float:left;
-    width: 12em;
-    margin-bottom: 0.5em;
+.facet_template div {
+    display: table-cell;
+    padding: 2px;
 }
 
 .facet_template .count {
-    float:right;
+    text-align: right;
     color: [% css_colors.accent_mediumdark %];
 }
 
-.facet_template_selected .facet {
+.facet_template_selected {
     background-color: [% css_colors.accent_lighter2 %];
-}
-
-.facet_border {
-    border-left: 1px solid [% css_colors.border_standard %];
-    padding-right: 0.5em;
+    border: 1px solid [% css_colors.accent_medium %];
 }
 
 #footer-wrap {