TPAC: Replace arrow images with text + CSS

This commit offers up Unicode arrow symbols in place of the arrow icons,
again in the effort to save one or two HTTP requests per page.

The layout is trickier, though, so could benefit greatly from someone
with more CSS experience and / or patience.

Signed-off-by: Dan Scott <dan@coffeecode.net>

diff --git a/Open-ILS/src/templates/opac/parts/record/copy_table.tt2 b/Open-ILS/src/templates/opac/parts/record/copy_table.tt2
index 71e5502..bc93b14 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/record/copy_table.tt2
+++ b/Open-ILS/src/templates/opac/parts/record/copy_table.tt2
@@ -126,7 +126,7 @@ END;
                 [%- IF  ctx.copy_limit != more_copies_limit AND ctx.copies.size >= ctx.copy_limit %]
                     <div class="rdetail_show_copies">
                         <a href="[% mkurl('', {copy_limit => more_copies_limit, copy_offset => 0}) %]"><span
-                        class="charsign">+</span>[% l('Show more copies') %]</a>
+                        class="charsign"><span>+</span></span>[% l('Show more copies') %]</a>
                     </div>
                 [%- ELSIF ctx.copy_limit == more_copies_limit %]
                     <div  class="rdetail_show_copies">

diff --git a/Open-ILS/src/templates/opac/parts/record/extras.tt2 b/Open-ILS/src/templates/opac/parts/record/extras.tt2
index 4a473c3..7343243 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/record/extras.tt2
+++ b/Open-ILS/src/templates/opac/parts/record/extras.tt2
@@ -41,13 +41,14 @@
                 [%  
                     IF tab_is_active(name);
                         href = mkurl('', {}, ['expand']);
-                        img_url = ctx.media_prefix _ '/images/rdetail_arrow_down.png';
+                        symbol = "▾"; 
                     ELSE;
                         href = mkurl('', {expand => name}) _ '#' _ name; 
-                        img_url = ctx.media_prefix _ '/images/rdetail_arrow.png';
+                        symbol = "▸"; 
                     END;
                 %]
-                <a name='[% name %]' href='[% href %]'><img alt='[% extra.label %]' src='[% img_url %]'/></a>
+                <a name='[% name %]' href='[% href %]' class='nakedlink'><span
+                    class="charsign circle"><span>[% symbol %]</span></span></a>
                 <a href='[% href %]' class="rdetail_extras_lbl">[% extra.label %]</a>
             </div>
         </div>

diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/web/css/skin/default/opac/style.css
index 8591c8e..39f8f27 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/style.css
+++ b/Open-ILS/web/css/skin/default/opac/style.css
@@ -499,7 +499,6 @@ div.format_icon {
 
 .rdetail_extras_lbl {
        position: relative;
-       top: -4px;
        left: 7px;
        color: white;
 }
@@ -1406,15 +1405,31 @@ table.result_holdings_table thead tr {
 table.result_holdings_table thead tr th {
     font-weight: bold;
 }
-.charsign {
-    vertical-align: middle;
+span.charsign {
+    position: relative;
+    top: -.5em;
+    text-align: center;
+    display: inline-block;
     font-weight: bold;
-    padding: 5px 10px;
+    width: 2em;
+    height: 2em;
     margin: .5em;
     color: white;
     background-color: #00593d;
     border-radius: 4px;
 }
-a.charsign, a.charsign:hover {
-    text-decoration: none
+span.charsign span {
+    position: relative;
+    top: .5em;
+}
+span.charsign.circle {
+    border-radius: 50%;
+    margin-bottom: 3em;
+}
+div.rdetail_extras_link span.charsign {
+    color: #00593d;
+    background-color: #dff9ed;
+}
+a.nakedlink {
+    text-decoration: none;
 }

diff --git a/Open-ILS/web/images/rdetail_arrow.png b/Open-ILS/web/images/rdetail_arrow.png
deleted file mode 100644 (file)
index 24b0053..0000000
Binary files a/Open-ILS/web/images/rdetail_arrow.png and /dev/null differ

diff --git a/Open-ILS/web/images/rdetail_arrow_down.png b/Open-ILS/web/images/rdetail_arrow_down.png
deleted file mode 100644 (file)
index 9ccadd3..0000000
Binary files a/Open-ILS/web/images/rdetail_arrow_down.png and /dev/null differ