From 2d67204d598cdb62585e59b1526a5ed98dfd5e4e Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@equinoxinitiative.org>
Date: Wed, 24 May 2017 21:22:11 -0400
Subject: [PATCH] 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>
---
 Open-ILS/src/templates/opac/css/style.css.tt2 | 19 +++++++++++++++++--
 Open-ILS/src/templates/opac/myopac/lists.tt2  | 16 ++++++++--------
 .../src/templates/opac/parts/anon_list.tt2    |  8 ++++----
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index ad3bdcc75b..4c4e13f4c3 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -2065,6 +2065,7 @@ table.bookbag-specific {
     border-right: 1px solid [% css_colors.accent_dark %];
     border-bottom: 1px solid [% css_colors.accent_medium %];
     margin-bottom: 2ex;
+    width: 100%;
 }
 .bookbag-share {
     [% IF rtl == 't' -%]
@@ -2704,6 +2705,10 @@ a.preflib_change {
     .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 {
         [% IF rtl == 't' -%]
         padding-right: 0px !important;
@@ -2712,11 +2717,21 @@ a.preflib_change {
         [% END -%]
     }
     .bookbag-specific td.list_entry {
+        display: inline-block;
         min-width: 5em;
         [% IF rtl == 't' -%]
-        padding-right: 5px !important;
+        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 -%]
-        padding-left: 5px !important;
+        left: 10px;
         [% END -%]
     }
     .bbag-navigate-list {
diff --git a/Open-ILS/src/templates/opac/myopac/lists.tt2 b/Open-ILS/src/templates/opac/myopac/lists.tt2
index b12b9dce1e..510fea2d4a 100644
--- a/Open-ILS/src/templates/opac/myopac/lists.tt2
+++ b/Open-ILS/src/templates/opac/myopac/lists.tt2
@@ -347,16 +347,16 @@
                     <td class="list_checkbox">
                         <input type="checkbox" name="selected_item" value="[% item.id %]" bbag='[% bbag.id %]'/>
                     </td>
-                    <td class="list_entry">
+                    <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="list_entry">
-                        <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;
@@ -373,21 +373,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 dab23bff5b..9ec6d588a5 100644
--- 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'>
@@ -52,8 +52,8 @@
                         <td class="list_checkbox">
                             <input type="checkbox" name="record" value="[% item %]" />
                         </td>
-                        <td class="list_entry"><a href="[% mkurl(ctx.opac_root _ '/record/' _ item, {}, ['edit_notes', 'id']) %]">[% attrs.title | html %]</a></td>
-                        <td class="list_entry"><a href="[%- 
+                        <td class="list_entry" data-label="[% l('Title') %]"><a href="[% mkurl(ctx.opac_root _ '/record/' _ item, {}, ['edit_notes', 'id']) %]">[% attrs.title | html %]</a></td>
+                        <td class="list_entry" data-label="[% l('Author(s)') %]"><a href="[%-
                             authorquery = attrs.author | replace('[,\.:;]', '');
                             mkurl(
                                 ctx.opac_root _ '/results',
@@ -61,7 +61,7 @@
                                 ['page', 'id', '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;
-- 
2.43.2