From 1fff24ee104c1965003d4eea3123fe9227360562 Mon Sep 17 00:00:00 2001
From: Dan Wells <dbw2@calvin.edu>
Date: Thu, 14 Nov 2013 15:12:46 -0500
Subject: [PATCH] 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>
---
 Open-ILS/src/templates/opac/css/style.css.tt2 | 44 +++++++++------------------
 1 file changed, 15 insertions(+), 29 deletions(-)

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 {
-- 
2.11.0