TPAC: Simply record summary navigation markup

Currently we have the next / previous links on the far right side of the
record summary page, whereas the "Showing item # of #" is on the left
hand side of the page. On wide screens, this leads to a large gap
between the two informational elements. In addition, as the elements are
floated, the vertical alignment is thrown off if you attempt to bring
them together.

The solution is to group the elements inside a SPAN with inline-block
displays for the embedded DIVs. This enables the elements to reflow
appropriately on mobile sized screens while keeping the alignment clean.
In addition, some inline style gets moved to style.css and some
unnecessary elements are removed.

Signed-off-by: Dan Scott <dan@coffeecode.net>
Signed-off-by: Bill Erickson <berick@esilibrary.com>

diff --git a/Open-ILS/src/templates/opac/parts/record/body.tt2 b/Open-ILS/src/templates/opac/parts/record/body.tt2
index 6a64e4e..c5d9ec8 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/record/body.tt2
+++ b/Open-ILS/src/templates/opac/parts/record/body.tt2
@@ -7,12 +7,12 @@
 
     [% IF ctx.search_result_index >= 0 %]
     <div id="rdetail_header">
-        <div style="float:left;">
+        <span id="rdetail_results">
             <a href='[% mkurl(ctx.opac_root _ '/results', {}, stop_parms); %]'>[% l('&#9668; Search Results') %]</a>
             <span id="rdetail_result_count">
                 [% l('Showing Item [_1] of [_2]', ctx.search_result_index + 1, ctx.hit_count) %]
             </span>
-        </div>
+        </span>
         <div id="rdetail_result_nav">
             [%
                 IF ctx.prev_search_record;
@@ -23,11 +23,9 @@
                     ctx.prev_rec_url = mkurl(ctx.prev_search_record, prev_args, stop_parms);
             %]
             <a class='np_nav_link classic_link' title='[% l("Previous Record") %]'
-                href='[% ctx.prev_rec_url %]'><span class="nav_arrow_fix">&#9668; </span>[% l('Previous') %]</a>
+                href='[% ctx.prev_rec_url %]'>&#9668; [% l('Previous') %]</a>
             [% END %]
 
-            <span style="padding:0px 10px;"> </span>
-
             [% 
                 IF ctx.next_search_record;
                     next_args = {};
@@ -37,7 +35,7 @@
                     ctx.next_rec_url = mkurl(ctx.next_search_record, next_args, stop_parms);
             %]
             <a class='np_nav_link classic_link' title='[% l("Next Record") %]'
-                href='[% ctx.next_rec_url %]'>[% l('Next') %]<span class="nav_arrow_fix"> &#9658;</span></a>
+                href='[% ctx.next_rec_url %]'>[% l('Next') %] &#9658;</a>
             [% END %]
 
         </div>

diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/web/css/skin/default/opac/style.css
index 9848bba..62eb298 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/style.css
+++ b/Open-ILS/web/css/skin/default/opac/style.css
@@ -316,25 +316,28 @@ span.dash_divider {
 }
 
 #rdetail_header {
-       font-size:14px;
-       font-weight:bold;
-       color:#074079;
-       padding: 5px 7px 6px 0px;
+    padding: 5px 7px 6px 0px;
     margin-left: 1em;
-       border-bottom: 1px dotted #ccc;
+    border-bottom: 1px dotted #ccc;
+}
+
+#rdetail_results a {
+    color:#074079;
+    font-weight:bold;
+    font-size: 1.2em;
 }
 
 #rdetail_result_count {
-       color: black;
-       font-size: 11px;
-       font-weight: normal;
-    padding-left: 10px;
+    color: black;
+    font-weight: normal;
+    padding-left: 1em;
+    display: inline-block;
 }
 
 #rdetail_result_nav {
-       float:right;
-       font-size: 11px;
-       font-weight:normal;
+    font-weight:normal;
+    padding-left: 1em;
+    display: inline-block;
 }
 
 #rdetail_details_table {
@@ -712,12 +715,6 @@ div.format_icon {
        font-size: 11px;
 }
 
-.nav_arrow_fix {
-       font-size:8px;
-       position:relative;
-       top:-1px;
-}
-
 #result_table_div {
        margin-top: 1em;
 }