From 4b73fa09eaf1dcb79b47a7d9cb0cefae096c5fa8 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>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
---
 Open-ILS/src/templates/opac/css/style.css.tt2   | 25 ++++++++++++++++++++-----
 Open-ILS/src/templates/opac/myopac/lists.tt2    | 16 ++++++++--------
 Open-ILS/src/templates/opac/parts/anon_list.tt2 |  8 ++++----
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 1ee3d6c63f..99f125b73e 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -2119,9 +2119,10 @@ h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
 }
 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;
+    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' -%]
@@ -2790,6 +2791,10 @@ 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 {
         [% IF rtl == 't' -%]
         padding-right: 0px !important;
@@ -2798,11 +2803,21 @@ div.result_table_utils {
         [% 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 af4d7ace3a..aef7cc50e8 100644
--- a/Open-ILS/src/templates/opac/myopac/lists.tt2
+++ b/Open-ILS/src/templates/opac/myopac/lists.tt2
@@ -351,16 +351,16 @@
                     <td class="hide_on_small_screens">
                         <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="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 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.11.0