Touch-up record detail extras display

1) Remove unsightly gaps, which gave it an overly "stripey"
appearance.

2) Switch off-green arrow graphic with a text-based arrow character.

3) Simplify unnecessarily complex positioning styles.

4) Lighten and add subtle border to give depth and definition to
section headers.

Signed-off-by: Dan Wells <dbw2@calvin.edu>
Signed-off-by: Dan Scott <dscott@laurentian.ca>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 5372577..a617803 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -495,14 +495,16 @@ div.format_icon {
 }
 
 .rdetail_extras {
-    height: 29px;
-    background: [% css_colors.primary %];
+    background: [% css_colors.primary_fade %];
+    border: 1px solid [% css_colors.primary %];
     padding-top:1px;
-    margin-bottom: 10px;
-    margin-top: 10px;
     clear:both;
 }
 
+#rdetail_extras_div {
+    margin: 1em 0;
+}
+
 .rdetail_extras_hr {
     height: 1px;
     background: [% css_colors.accent_light %];
@@ -511,18 +513,15 @@ div.format_icon {
 }
 
 .rdetail_extras_link {
-    padding-top: 4px;
-    padding-left: 12px;
+    padding: 6px 12px;
     font-size: [% css_fonts.size_smaller %];
     text-transform: uppercase;
     font-weight: bold;
 }
 
 .rdetail_extras_lbl {
-    position: relative;
-    top: -4px;
-    left: 7px;
     color: [% css_colors.text_invert %];
+    text-decoration: none;
 }
 
 ##rdetail_extras_expand, #rdetail_extras_collapse, #rdetail_locs_collapse {

diff --git a/Open-ILS/src/templates/opac/parts/record/extras.tt2 b/Open-ILS/src/templates/opac/parts/record/extras.tt2
index a6100f1..f4779b0 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/record/extras.tt2
+++ b/Open-ILS/src/templates/opac/parts/record/extras.tt2
@@ -1,6 +1,6 @@
 [%
-    arrow_img = ctx.media_prefix _ '/images/rdetail_arrow.png';
-    arrow_down_img = ctx.media_prefix _ '/images/rdetail_arrow_down.png';
+    arrow_right = '►';
+    arrow_down = '▼';
 %]
 <div>
     <div id='rdetail_extras_div' style='width: 100%;'> 
@@ -13,8 +13,8 @@
         <div id="gbp_extra" class="rdetail_extras hide_me">
             <div class="rdetail_extras_hr"></div>
             <div id="gbp_extra_links" class="rdetail_extras_link">
-                <a id='gbp_arrow_link' name='[% name %]' href='[% href %]'><img alt='[% label %]' src='[% arrow_img %]'/></a>
-                <a id='gbp_arrow_down_link' name='[% name %]' href='[% href %]' class='hide_me'><img alt='[% label %]' src='[% arrow_down_img %]'/></a>
+                <a id='gbp_arrow_link' name='[% name %]' href='[% href %]' class='rdetail_extras_lbl'>[% arrow_right %]</a>
+                <a id='gbp_arrow_down_link' name='[% name %]' href='[% href %]' class='rdetail_extras_lbl hide_me'>[% arrow_down %]</a>
                 <a name='[% name %]_lbl' href='[% href %]' class="rdetail_extras_lbl">[% label %]</a></div>
         </div>
         <div id="gbp_extra_container" class='rdetail_extras_div'></div>
@@ -75,18 +75,17 @@
                 [%  
                     IF tab_is_active(name);
                         href = mkurl('', {}, ['expand', 'ac']);
-                        img_url = arrow_down_img;
+                        arrow = arrow_down;
                     ELSE;
                         IF name == 'addedcontent' AND default_ac;
                             href = mkurl('', {expand => name, ac => default_ac}) _ '#' _ name; 
                         ELSE;
                             href = mkurl('', {expand => name}) _ '#' _ name; 
                         END;
-                        img_url = arrow_img;
+                        arrow = arrow_right;
                     END;
                 %]
-                <a name='[% name %]' href='[% href %]'><img alt='[% extra.label %]' src='[% img_url %]'/></a>
-                <a name='[% name %]_lbl' href='[% href %]' class="rdetail_extras_lbl">[% extra.label %]</a>
+                <a name='[% name %]' href='[% href %]' class="rdetail_extras_lbl">[% arrow %] [% extra.label %]</a>
             </div>
         </div>
         <div class='rdetail_extras_div'>