From 5892f93aed56e0c1588b3b9f0b41ecd904cb06a0 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>
---
 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