LP#1681943: show all list fields in mobile view

In mobile view, "rotate" the temporary and permanent list
tables 90 degrees and put the column headings on the left/right
side.  data-label attributes are used to stash copies of the
column labels; the end result is similar to how the current
circulations table is displayed on narrow screens.

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 244853c..cd9fef5 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -2168,7 +2168,8 @@ textarea { font-family: sans-serif; }
 table.bookbag-specific {
     border-right: 1px solid [% css_colors.accent_dark %];
     border-bottom: 1px solid [% css_colors.accent_medium %];
-    margin-bottom: 2px;
+    margin-bottom: 2ex;
+    width: 100%;
 }
 .bookbag-share {
     [% IF rtl == 't' -%]
@@ -2806,12 +2807,30 @@ div.result_table_utils {
     .bookbag-specific div.sort select {
         width:180px;
     }
+    .bookbag-specific tr {
+        display: block;
+        border-bottom: 1px solid [% css_colors.border_standard %];
+    }
     .bookbag-specific td.list_checkbox {
         padding-left: 0px !important;
     }
     .bookbag-specific td.list_entry {
+        display: inline-block;
         min-width: 5em;
-        padding-left: 5px !important;
+        [% IF rtl == 't' -%]
+        padding-right: 40% !important;
+        [% ELSE -%]
+        padding-left: 40% !important;
+        [% END -%]
+    }
+    .bookbag-specific td.list_entry:before {
+        content: attr(data-label);
+        position: absolute;
+        [% IF rtl == 't' -%]
+        right: 10px;
+        [% ELSE -%]
+        left: 10px;
+        [% END -%]
     }
     .bbag-navigate-list {
         display: none;

diff --git a/Open-ILS/src/templates/opac/myopac/lists.tt2 b/Open-ILS/src/templates/opac/myopac/lists.tt2
index 308971d..edc94e0 100644 (file)
--- a/Open-ILS/src/templates/opac/myopac/lists.tt2
+++ b/Open-ILS/src/templates/opac/myopac/lists.tt2
@@ -354,13 +354,13 @@
                     <td class="list_entry" data-label="[% l('Title') %]">
                         <a href="[% mkurl(ctx.opac_root _ '/record/' _ rec_id, {}, ['edit_notes', 'bbid']) %]">[% attrs.title | html %]</a>
                     </td>
-                    <td class="hide_on_small_screens">
-                        <a href="[%- 
+                    <td class="list_entry" data-label="[% l('Author(s)') %]">
+                        <a href="[%-
                             authorquery = attrs.author | replace('[,\.:;]', '');
                             mkurl(ctx.opac_root _ '/results', {qtype => 'author', query => authorquery}, ['page', 'bbid', 'edit_notes'])
                             -%]">[% attrs.author | html %]</a>
                     </td>
-                    <td class="list_entry mobile_hide">
+                    <td class="list_entry" data-label="[% l('Local Call Number') %]">
                         [% 
                             copy = attrs.holdings.0;
                             IF copy;
@@ -377,21 +377,21 @@
                             END;
                         %]
                     </td>
-                    <td class="list_entry mobile_hide">
+                    <td class="list_entry" data-label="[% l('Publication Date') %]">
                           [% attrs.pubdate | html %]
                     </td>
-                    <td class="list_entry mobile_hide">
+                    <td class="list_entry" data-label="[% l('Format') %]">
                           [% attrs.format_label | html %]
                     </td>
                     [% IF CGI.param("edit_notes") == bbag.id %]
-                    <td class="list_entry mobile_hide">
+                    <td class="list_entry" data-label="[% l('Notes') %]">
                         [% FOR note IN item.notes %]
                         <input type="text" name="note-[% note.id %]" value="[% note.note | html %]" />
                         [% END %]
                         <input type="text" name="item-[% item.id %]" />
                     </td>
                     [% ELSE %]
-                    <td class="list_entry mobile_hide">
+                    <td class="list_entry" data-label="[% l('Notes') %]">
                         [% FOR note IN item.notes %]
                         <div>[% note.note | html %]</div>
                         [% END %]

diff --git a/Open-ILS/src/templates/opac/parts/anon_list.tt2 b/Open-ILS/src/templates/opac/parts/anon_list.tt2
index 28eefe6..4ecf9e6 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/anon_list.tt2
+++ b/Open-ILS/src/templates/opac/parts/anon_list.tt2
@@ -30,7 +30,7 @@
             <input class="opac-button" type="submit" value="[% l('Go') %]" />
         </div>
         <div class="bbag-content">
-            <table class="bookbag-specific table_no_cell_pad table_no_border_space table_no_border" width="100%">
+            <table class="bookbag-specific table_no_cell_pad table_no_border_space table_no_border">
                 <thead id="acct_list_header_anon">
                     <tr>
                         <td class='list_checkbox'>
@@ -61,7 +61,7 @@
                                 ['page', 'id', 'edit_notes']
                             )
                         -%]">[% attrs.author | html %]</a></td>
-                        <td class="list_entry mobile_hide" data-label="[% l('Local Call Number') %]">
+                        <td class="list_entry " data-label="[% l('Local Call Number') %]">
                         [% 
                             copy = attrs.holdings.0;
                             IF copy;