LP#1681943 Improve Responsive Design in My Lists
authorTerran McCanna <tmccanna@georgialibraries.org>
Tue, 11 Apr 2017 21:42:54 +0000 (17:42 -0400)
committerGalen Charlton <gmc@equinoxinitiative.org>
Fri, 9 Jun 2017 16:10:48 +0000 (12:10 -0400)
- Moved action dropdown out of header row so that it is no longer
hidden on mobile view.
- Hid less essential columns on mobile view, leaving only title / author.
- Sized and lined up buttons more neatly on both mobile and normal view.
- Added a title to the section for editing a list title and description.

Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Conflicts:
Open-ILS/src/templates/opac/css/style.css.tt2
Open-ILS/src/templates/opac/parts/anon_list.tt2

Signed-off-by: Ben Shum <ben@evergreener.net>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Open-ILS/src/templates/opac/css/style.css.tt2
Open-ILS/src/templates/opac/myopac/lists.tt2
Open-ILS/src/templates/opac/parts/anon_list.tt2

index 3daeb49..b5044c1 100644 (file)
@@ -1680,6 +1680,13 @@ a.dash-link:hover { text-decoration: underline !important; }
     padding-bottom: 4px;
     margin-bottom: 10px;
     border-bottom: 1px dotted [% css_colors.accent_medium %];
+    width: 100%;
+}
+.list_create_table_label {
+    width: 30%;
+}
+#list_description, #list_create_name {
+        width: 500px;
 }
 .list-create-table-buttons input[type=image] { margin-top: 2px; }
 .result_table_format_cell { padding: 0px 10px; text-align: center; }
@@ -1942,6 +1949,14 @@ a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
     margin-right: 5em;
     [% END -%]
 }
+.bookbag-controls-title-block {
+    float:left;
+    width:40%;
+}
+.bookbag-controls-button-block {
+    float:left;
+    width:50%;
+}
 h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
 .bookbag-share .fixed { min-width: 4em; }
 .bookbag-specific {
@@ -1955,11 +1970,13 @@ h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
     [% IF rtl == 't' -%]
     float: right;
     text-align: right;
+    margin-right: 15px;
     [% ELSE -%]
     float: left;
     text-align: left;
+    margin-left: 15px;
     [% END -%]
-    width: 45%;
+    width: 40%;
 }
 .bookbag-specific div.meta {
     [% IF rtl == 't' -%]
@@ -1970,6 +1987,9 @@ h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
     text-align: right;
     [% END -%]
     width: 54%;
+    border: 1px solid [% css_colors.accent_light %];
+    padding: 5px;
+    margin-top: 5px;
 }
 #bbag-name-desc-form tr th { vertical-align: middle; }
 #bbag-name-desc-form .saver { vertical-align: middle; text-align: center; }
@@ -1978,8 +1998,27 @@ h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
     font-style: italic;
     max-width: 40em;
 }
-#bbag-edit-description { width: 20em; }
-#bbag-edit-name { width: 20em; }
+.bbag-edit-desc-label {
+    float:left;
+    width:8em;
+}
+.bbag-edit-desc-save {
+    clear:both;
+    margin-bottom:10px;
+}
+#bbag-edit-description { width: 20em; float:left;}
+#bbag-edit-name { width: 20em; float: left; }
+.bbag-action {
+    margin-left: 15px;
+}
+.bbag-navigate-list {
+    padding-left: 32px;
+    float:left;
+}
+.bbag-navigate-list-pages {
+    padding-left: 10px;
+    float:left;
+}
 textarea { font-family: sans-serif; }
 table.bookbag-specific {
     border-right: 1px solid [% css_colors.accent_dark %];
@@ -1989,21 +2028,22 @@ table.bookbag-specific {
 .bookbag-share {
     [% IF rtl == 't' -%]
     float: right;
+    padding: 0px 10px 0px 0px;
     [% ELSE -%]
     float: left;
+    padding: 0px 0px 0px 10px;
     [% END -%]
-    padding: 5px 0;
 }
+.bookbag-share .fixed { min-width: 6em; }
 .bookbag-controls {
     [% IF rtl == 't' -%]
     float: right;
-    padding: 5px 10px 0px 0px;
+    padding: 0px 10px 0px 0px;
     [% ELSE -%]
     float: left;
-    padding: 5px 0px 0px 10px;
+    padding: 0px 0px 0px 10px;
     [% END -%]
 }
-
 .bookbag-specific td.list_checkbox {
     [% IF rtl == 't' -%]
     padding-right: 10px !important;
@@ -2485,6 +2525,9 @@ a.preflib_change {
          display:none;
      }
     .radio-parts-selection { width: 90%; }
+    #list_description, #list_create_name {
+        width: 300px;
+    }
 }
 
 @media only screen and (max-width: 600px) {
@@ -2540,7 +2583,69 @@ a.preflib_change {
        padding: 2px 4px 3px 4px;
        font-size: [% css_fonts.size_base %];
     }
-
+    .bookbag-controls-title-block {
+        clear:left;
+        width:90%;
+    }
+    .bookbag-controls-button-block {
+        clear:left;
+        width;90%;
+    }
+    .bookbag-specific {
+        margin-left: 0px;
+    }
+    .bookbag-specific div.sort {
+        float: left;
+        width: 95%;
+        margin: 5px 0px 5px 0px;
+        text-align: left;
+        border: 1px #ccc solid;
+        padding:5px;
+    }
+    .bookbag-specific div.meta {
+        float: left;
+        width: 95%;
+        margin-left:0px;
+        margin-bottom:5px;
+        padding:5px;
+        text-align: left;
+    }
+    #bbag-edit-name {
+        float: left;
+        width: 220px;
+    }
+    #bbag-edit-description {
+        width: 220px;
+        margin-top:5px;
+    }
+    .bbag-content {
+        padding:5px;
+        border:1px #ccc solid;
+    }
+    .bbag-action {
+        margin-left:0px;
+        margin-bottom:5px;
+    }
+    .bbag-action-field {
+        width:230px;
+    }
+    .bookbag-specific div.sort select {
+        width:180px;
+    }
+    .bookbag-specific td.list_checkbox {
+        padding-left: 0px !important;
+    }
+    .bookbag-specific td.list_entry {
+        min-width: 5em;
+        padding-left: 5px !important;
+    }
+    .bbag-navigate-list {
+        display: none;
+    }
+    .bbag-navigate-list-pages {
+        text-align:right;
+        float:right;
+    }
     #dash_wrapper div {
         background: transparent;
         padding: 0px;
@@ -2583,6 +2688,9 @@ a.preflib_change {
     #myopac_sum_fines {
         display: none;
     }
+    #list_description, #list_create_name {
+        width: 170px;
+    }
     .results_header_lbl {
         display: none;
     }
index b2c26d2..b12b9dc 100644 (file)
@@ -19,7 +19,7 @@
         <h1>[% l('Create New List') %]</h1><a name="createnewlist"></a>
         <table class="table_no_cell_pad" id="list_create_table">
             <tr>
-                <td>
+                <td class="list_create_table_label">
                     <label for="list_create_name">[% l('Enter the name of the new list:') %]</label>
                 </td>
                 <td>
                     <input type="hidden" name="where_from" value="[% ctx.where_from %]" />
                     [% END %]
                 </td>
+            </tr>
+            <tr>
+                <td class="list_create_table_label">
+                    <label for="list_description">[% l("List description (optional):") %]</label>
+                </td>
                 <td>
+                    <textarea name="description" id="list_description"></textarea>
+                </td>
+            </tr>
+            <tr>
+                <td class="list_create_table_label">
                     <label for="list_create_shared">[% l('Share this list?') %]</label>
+                </td>
+                <td>
                     <select name="shared" id="list_create_shared">
                         <option value="0">[% l('No') %]
                         <option value="1">[% l('Yes') %]
                             src="[% ctx.media_prefix %]/images/question-mark.png" />
                     </a>
                 </td>
+            </tr>
+            <tr>
+                <td>&nbsp;</td>
                 <td class="list-create-table-buttons">
-                    <input type="submit"
-                        value="[% l('Submit') %]"
-                        alt="[% l('Submit') %]"
-                        class="opac-button"/>
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     <input type="reset"
                         value="[% l('Cancel') %]"
                         alt="[% l('Cancel') %]"
                         class="opac-button" />
+                    &nbsp;&nbsp;&nbsp;
+                    <input type="submit"
+                        value="[% l('Submit') %]"
+                        alt="[% l('Submit') %]"
+                        class="opac-button"/>
                 </td>
             </tr>
-            <tr>
-                <td class="text-right-top">
-                    <label for="list_description">[% l("List description (optional):") %]</label>
-                </td>
-                <td colspan="3">
-                    <textarea cols="40" rows="3" name="description"
-                        id="list_description"></textarea>
-                </td>
         </table>
     </form>
 
     <div id='acct_lists_prime'>
         [% FOR bbag IN ctx.bookbags %]
         <div class="bookbag-controls-holder">
-            <div class="bookbag-controls most">
+            <div class="bookbag-controls-title-block">
                 [% baseurl = ctx.opac_root _ '/myopac/lists';
                 IF bbag.id != CGI.param("bbid");
                     url = mkurl(baseurl,{bbid => bbag.id, item_page => 1},['edit_notes','sort']);
                 <h2 class="bookbag-name"><a title="[% ltitle %]" href="[% url %]">[% bbag.name | html %]</a></h2>
                 [% IF bbag.description %]<div class="bookbag-description">[% bbag.description | html %]</div>[% END %]
             </div>
+            <div class="bookbag-controls-button-block">
             [% IF ctx.add_rec %]
             <form action="[% mkurl(ctx.opac_root _ '/myopac/list/update', {}, 1) %]" method="post">
                 <div class="bookbag-controls">
                     alt="[% l('RSS Feed') %]" border="0"
                     src="[% ctx.media_prefix %]/images/small-rss.png"/></a>
                 [% END %]
-            </div>
-            <div class="bookbag-controls">
                 [% IF bbag.pub == 't'; %]
                 <a href='[%-
                     mkurl(
                 -%]'>[% l('HTML View') %]</a>
                 [% END %]
             </div>
+            </div>
             <div class="clear-both pad-bottom-five"></div>
         </div>
         [% IF CGI.param("bbid") == bbag.id %]
         <div class="bookbag-specific">
-            <div class="sort">
-                <form method="get">
-                    <label for="opac.result.sort">[% l("Sort list items by: ") %]</label>
-                    [%- INCLUDE "opac/parts/preserve_params.tt2" params=['loc', 'query', 'qtype']; %]
-                    [% INCLUDE "opac/parts/filtersort.tt2"
-                        value=CGI.param('sort') mode='bookbag' %]
-                    <input type="hidden" name="bbid"
-                        value="[% CGI.param('bbid') | html %]" />
-                    <input type="submit" value="[% l('Sort') %]" />
-                </form>
-            </div>
+            [% IF bbag.items.size %]
+                <div class="sort">
+                    <form method="get">
+                        <label for="opac.result.sort">[% l("Sort list items by: ") %]</label>
+                        [%- INCLUDE "opac/parts/preserve_params.tt2" params=['loc', 'query', 'qtype']; %]
+                        [% INCLUDE "opac/parts/filtersort.tt2"
+                            value=CGI.param('sort') mode='bookbag' %]
+                        <input type="hidden" name="bbid"
+                            value="[% CGI.param('bbid') | html %]"/>
+                        <input type="submit" class="opac-button" value="[% l('Sort') %]" />
+                    </form>
+                </div>
+            [% END %]
             <div class="meta">
                 <form method="post">
                     <input type="hidden" name="bbid" value="[% bbag.id %]" />
                     <input type="hidden" name="limit" value="[% limit %]" />
                     <input type="hidden" name="offset" value="[% offset %]" />
                     [%- INCLUDE "opac/parts/preserve_params.tt2"; %]
-                    <table id="bbag-name-desc-form">
-                        <tr>
-                            <th>
+                            <p style="font-weight:bold;">[% l('Edit List Description') %]</p>
+                            <div class="bbag-edit-desc-label">
                                 <label for="bbag-edit-name">[% l('Name:') %]</label>
-                            </th>
-                            <td>
-                                <input name="name" type="text"
+                            </div>
+                            <input name="name" type="text"
                                     value="[% bbag.name | html %]"
                                     id="bbag-edit-name" />
-                            </td>
-                            <td rowspan="2" class="saver">
-                                [% l("Save changes to name or description?") %]<br />
-                                <input type="submit" value="[% l('Save') %]" />
-                            </td>
-                        </tr>
-                        <tr>
-                            <th><label for="bbag-edit-description">[% l('Description:') %]</label></th>
-                            <td>
-                                <textarea name="description"
+                            <div style="clear:both;" />
+                            <div class="bbag-edit-desc-label">
+                                <label for="bbag-edit-description">[% l('Description:') %]</label>
+                            </div>
+                            <textarea name="description"
                                     id="bbag-edit-description">[% bbag.description | html %]</textarea>
-                            </td>
-                        </tr>
-                    </table>
+                            <div class="bbag-edit-desc-save">
+                                [% l("Save changes to name or description?") %]
+                                <input type="submit" class="opac-button" value="[% l('Save') %]" />
+                            </div>
                 </form>
             </div>
         </div>
         <form action="[% mkurl(ctx.opac_root _ '/myopac/list/update') %]" method="post">
         <input type="hidden" name="list" value="[% bbag.id %]" />
         <input type="hidden" name="sort" value="[% CGI.param('sort') | uri %]" />
+        <div class="bbag-content">
+        [% IF bbag.items.size %]
+            <div class="bbag-action">
+                <select name="action" class="bbag-action-field">
+                    <option disabled="disabled" selected="selected">[% l('-- Actions for these items --') %]</option>
+                    <option value="place_hold">[% l('Place hold') %]</option>
+                    <option value="del_item">[% l('Remove from list') %]</option>
+                </select>
+                [%- INCLUDE "opac/parts/preserve_params.tt2"; %]
+                <input class="opac-button" type="submit" value="[% l('Go') %]" />
+            </div>
+        [% END %]
         <table class="bookbag-specific table_no_cell_pad table_no_border_space table_no_border">
             <thead id="acct_list_header">
                 <tr>
                         | <a href="[% mkurl(ctx.opac_root _ '/myopac/lists', {edit_notes=> bbag.id}) %]">[% l('Edit') %]</a>
                         [% END %]
                     </td>
-                    <td class="list_actions">
-                        <select name="action">
-                            <option disabled="disabled">[% l('-- Actions for these items --') %]</option>
-                            <option value="place_hold">[% l('Place hold') %]</option>
-                            <option value="del_item">[% l('Remove from list') %]</option>
-                        </select>
-                        [%- INCLUDE "opac/parts/preserve_params.tt2"; %]
-                        <input type="submit" value="[% l('Go') %]" />
-                    </td>
                 </tr>
             </thead>
             <tbody>
                             mkurl(ctx.opac_root _ '/results', {qtype => 'author', query => authorquery}, ['page', 'bbid', 'edit_notes'])
                             -%]">[% attrs.author | html %]</a>
                     </td>
-                    <td class="list_entry">
+                    <td class="list_entry mobile_hide">
                         [% 
                             copy = attrs.holdings.0;
                             IF copy;
                             END;
                         %]
                     </td>
-                    <td class="list_entry">
+                    <td class="list_entry mobile_hide">
                           [% attrs.pubdate | html %]
                     </td>
-                    <td class="list_entry">
+                    <td class="list_entry mobile_hide">
                           [% attrs.format_label | html %]
                     </td>
                     [% IF CGI.param("edit_notes") == bbag.id %]
-                    <td class="list_entry">
+                    <td class="list_entry mobile_hide">
                         [% 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">
+                    <td class="list_entry mobile_hide">
                         [% FOR note IN item.notes %]
                         <div>[% note.note | html %]</div>
                         [% END %]
                 </tr>
                 [% END %]
                 [% IF CGI.param("edit_notes") == bbag.id %]
-                <tr>
-                    <td colspan="3"><!-- All space left of notes column --></td>
+                <tr class="mobile_hide">
+                    <td colspan="6"><!-- All space left of notes column --></td>
                     <td class="save-notes">
                         [%- INCLUDE "opac/parts/preserve_params.tt2"; %]
                         <input type="hidden" name="bbid" value="[% CGI.param('bbid') | html %]" />
-                        <input type="submit" name="save_notes" value="[% l('Save Notes') %]" />
+                        <input type="submit" class="opac-button" name="save_notes" value="[% l('Save Notes') %]" />
                     </td>
                 </tr>
                 [% END %]
             </tbody>
         </table>
-
+        </div>
         [% IF ctx.bb_page_count > 1; %]
             <div class="header_middle" style="padding-top:7px;">
-                <span class="float-left" style="padding-left:34px;">[% l('Navigate Selected List ') %]</span>
-                <span class='float-left' style='padding-left: 10px;'>
+                <div class="bbag-navigate-list">[% l('Navigate Selected List ') %]</div>
+                <div class="bbag-navigate-list-pages">
                     [%- IF item_page > 1 -%]
                         <a href='[% mkurl(ctx.opac_root _ '/myopac/lists', {
                             item_page => item_page - 1
                             item_page => item_page + 1
                         }) %]'>[% l('Next') %]<span class="nav_arrow_fix">&#9658;</span></a>
                     [%- END; -%]
-                 </span>
+                 </div>
             </div>
             <div class="clear-both"></div>
         [% END %]
index 2cb06fa..dab23bf 100644 (file)
@@ -1,5 +1,7 @@
         [% IF ctx.mylist.size %]
         <div class="bookbag-specific">
+        <p class="big-strong">[% l('Temporary List') %]</p>
+        <div class="sort">
             <form method="get">
                 <label for="anonsort">[% l("Sort list items by: ") %]</label>
                 [% INCLUDE "opac/parts/filtersort.tt2" mode='bookbag'
@@ -7,41 +9,39 @@
                 <input type="hidden" name="id"
                     value="[% CGI.param('id') | html %]" />
                 [%- INCLUDE "opac/parts/preserve_params.tt2"; %]
-                <input type="submit" value="[% l('Sort') %]" />
+                <input class="opac-button" type="submit" value="[% l('Sort') %]" />
             </form>
         </div>
-
         <form action="[% mkurl(ctx.opac_root _ '/mylist/move') %]" method="get">
-        <div>
-            <p class="big-strong">[% l('Temporary List') %]</p>
-            <table class="table_no_border_space table_no_cell_pad table_no_border">
+        <div class="bbag-action" style="clear:both;">
+            <select name="action">
+                <option>[% l('-- Actions for these items --') %]</option>
+                <option value="place_hold">[% l('Place hold') %]</option>
+                <option value="delete">[% l('Remove from list') %]</option>
+                [% IF ctx.user AND ctx.bookbags.size %]
+                    <optgroup label="[% l('Move selected items to list:') %]">
+                    [% FOR bbag IN ctx.bookbags %]]
+                        <option value="[% bbag.id %]" class="selector_actions_for_list_inner_option">[% bbag.name | html %]</option>
+                    [% END %]
+                    </optgroup>
+                [% END %]
+            </select>
+            [%- INCLUDE "opac/parts/preserve_params.tt2"; %]
+            <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%">
                 <thead id="acct_list_header_anon">
                     <tr>
-                        <td width="1%" class='padding-left-10'>
+                        <td class='list_checkbox'>
                             <input type="checkbox" onclick="
                                 var inputs=document.getElementsByTagName('input'); 
                                 for (i = 0; i < inputs.length; i++) { 
                                     if (inputs[i].name == 'record' && !inputs[i].disabled) inputs[i].checked = this.checked;}"/>
                         </td>
-                        <td width="40%" class="opac-auto-108"><a href="[% mkurl('', {anonsort=>(CGI.param('anonsort') == 'titlesort' ? 'titlesort.descending' : 'titlesort')}) %]">[% l('Title') %]</a></td>
-                        <td width="40%" class="opac-auto-108"><a href="[% mkurl('', {anonsort=>(CGI.param('anonsort') == 'authorsort' ? 'authorsort.descending' : 'authorsort')}) %]">[% l('Author(s)') %]</a></td>
-                        <td width='18%'>[% l('Local Call Number') %]</td>
-                        <td width="1%" class="nowrap">
-                            <select name="action">
-                                <option>[% l('-- Actions for these items --') %]</option>
-                                <option value="place_hold">[% l('Place hold') %]</option>
-                                <option value="delete">[% l('Remove from list') %]</option>
-                                [% IF ctx.user AND ctx.bookbags.size %]
-                                <optgroup label="[% l('Move selected items to list:') %]">
-                                    [% FOR bbag IN ctx.bookbags %]]
-                                    <option value="[% bbag.id %]" class="selector_actions_for_list_inner_option">[% bbag.name | html %]</option>
-                                    [% END %]
-                                </optgroup>
-                                [% END %]
-                            </select>
-                            [%- INCLUDE "opac/parts/preserve_params.tt2"; %]
-                            <input type="submit" value="[% l('Go') %]" />
-                        </td>
+                        <td><a href="[% mkurl('', {anonsort=>(CGI.param('anonsort') == 'titlesort' ? 'titlesort.descending' : 'titlesort')}) %]">[% l('Title') %]</a></td>
+                        <td><a href="[% mkurl('', {anonsort=>(CGI.param('anonsort') == 'authorsort' ? 'authorsort.descending' : 'authorsort')}) %]">[% l('Author(s)') %]</a></td>
+                        <td>[% l('Local Call Number') %]</td>
                     </tr>
                 </thead>
                 <tbody>
                         attrs = {marc_xml => ctx.mylist_marc_xml.$item};
                         PROCESS get_marc_attrs args=attrs %]
                     <tr>
-                        <td class="item_list_padding padding-left-10">
+                        <td class="list_checkbox">
                             <input type="checkbox" name="record" value="[% item %]" />
                         </td>
-                        <td class="item_list_padding padding-left-5" ><a href="[% mkurl(ctx.opac_root _ '/record/' _ item, {}, ['edit_notes', 'id']) %]">[% attrs.title | html %]</a></td>
-                        <td class="item_list_padding padding-left-5"><a href="[%- 
+                        <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="[%- 
                             authorquery = attrs.author | replace('[,\.:;]', '');
                             mkurl(
                                 ctx.opac_root _ '/results',
@@ -61,7 +61,7 @@
                                 ['page', 'id', 'edit_notes']
                             )
                         -%]">[% attrs.author | html %]</a></td>
-                        <td class="item_list_padding padding-left-5">
+                        <td class="list_entry mobile_hide">
                         [% 
                             copy = attrs.holdings.0;
                             IF copy;
@@ -84,4 +84,5 @@
             <br /><br />
         </div>
         </form>
+        </div>
         [% END %]