From: Dan Wells <dbw2@calvin.edu>
Date: Fri, 4 Oct 2013 15:23:13 +0000 (-0400)
Subject: TPAC: Redo some margins/padding for better collapse behavior
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=00a58d70ab5f94813decf11d3443e46f27318227;p=evergreen%2Fpines.git

TPAC: Redo some margins/padding for better collapse behavior

In the "results header", we have both buttons and form elements. In
order to have these elements collapse in an orderly fashion, they need
to be exactly the same size. To accomplish this, let's simplify and
redo a few of the element margins and padding.

At the very least, this will make the elements line up better
vertically when viewed at the normal screen width.

Signed-off-by: Dan Wells <dbw2@calvin.edu>
Signed-off-by: Jason Stephenson <jstephenson@mvlc.org>
---

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index a7b65c3beb..60ae498a9c 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -680,8 +680,23 @@ div.format_icon {
     font-weight: bold;
     float: left;
     color: [% css_colors.text %];
+    /* this border is not visible, but it keeps these labels the same size
+    as the buttons */
+    border: 1px solid [% css_colors.accent_medium %];
     background: [% css_colors.accent_medium %];
-    margin: 0.5em 0.5em 0.5em 0em;
+    margin: 0.5em 0.3em;
+    padding: 0.3em;
+}
+/* we need a negative margin on the select to allow the containing <label>
+to determine the actual size of the element.  By doing this, we can increase
+the odds that the buttons and the select will be the same size, and therefore
+collapse correctly when the window width decreases */
+.results_header_lbl select {
+    margin: -0.5em 0;
+}
+
+#limit_to_available {
+    vertical-align: middle;
 }
 
 .results_header_sel {
@@ -1218,7 +1233,6 @@ a.dash-link:hover { text-decoration: underline !important; }
 
 .results_header_btns, .results_header_sel {
     float:left;
-    margin: 0.5em 0.5em 0.5em 0em;
 }
 
 /*
@@ -1236,7 +1250,7 @@ a.dash-link:hover { text-decoration: underline !important; }
     border-radius: 5px;
     border: 1px solid [% css_colors.primary %];
     background:  [% css_colors.primary_fade %];
-    margin: 10px;
+    margin: 0.5em;
     padding: 0.3em;
     display: inline-block;
 }
@@ -1259,11 +1273,6 @@ button.opac-button::-moz-focus-inner, input.opac-button::-moz-focus-inner {
     border: 0;
 }
 
-.results_header_btns a, #simple-detail-view-links a {
-    vertical-align: middle;
-    display: table-cell;
-}
-
 .opac-button-header, #dash_wrapper .opac-button {
     background: [% css_colors.control %];
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
@@ -1839,7 +1848,7 @@ a.preflib_change {
         background-color: inherit;
     }
     .results_header_btns a {
-        margin: 0px;
+        margin: 0.3em;
     }
     #main-content {
         margin-left: 1px;