From: Terran McCanna Date: Tue, 11 Apr 2017 21:42:54 +0000 (-0400) Subject: LP#1681943 Improve Responsive Design in My Lists X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=7ac7a74be65847337b409151664dc782d6921b4d;p=evergreen%2Fpines.git LP#1681943 Improve Responsive Design in My Lists - 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 Signed-off-by: Galen Charlton Conflicts: Open-ILS/src/templates/opac/css/style.css.tt2 Open-ILS/src/templates/opac/parts/anon_list.tt2 Signed-off-by: Ben Shum Signed-off-by: Galen Charlton --- diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2 index 48473d2365..da19a6fa51 100644 --- a/Open-ILS/src/templates/opac/css/style.css.tt2 +++ b/Open-ILS/src/templates/opac/css/style.css.tt2 @@ -1731,6 +1731,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; } @@ -1999,6 +2006,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 { @@ -2012,11 +2027,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' -%] @@ -2027,6 +2044,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; } @@ -2035,8 +2055,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 %]; @@ -2046,26 +2085,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 { - padding-top:10px; - padding-bottom:10px; -} - .bookbag-specific td.list_checkbox { [% IF rtl == 't' -%] padding-right: 10px !important; @@ -2565,6 +2600,9 @@ div.result_table_utils { display:none; } .radio-parts-selection { width: 90%; } + #list_description, #list_create_name { + width: 300px; + } } @media only screen and (max-width: 600px) { @@ -2631,7 +2669,69 @@ div.result_table_utils { 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; @@ -2674,6 +2774,9 @@ div.result_table_utils { #myopac_sum_fines { display: none; } + #list_description, #list_create_name { + width: 170px; + } .results_header_lbl { display: none; } diff --git a/Open-ILS/src/templates/opac/myopac/lists.tt2 b/Open-ILS/src/templates/opac/myopac/lists.tt2 index a3cde8095d..af4d7ace3a 100644 --- a/Open-ILS/src/templates/opac/myopac/lists.tt2 +++ b/Open-ILS/src/templates/opac/myopac/lists.tt2 @@ -23,7 +23,7 @@

[% l('Create New List') %]

- + + + + + + + - - - - - - +
+ @@ -37,8 +37,20 @@ [% END %]
+ + + +
+
- - - -
  + -       +    
@@ -133,7 +136,7 @@
[% FOR bbag IN ctx.bookbags %]
-
+
[% baseurl = ctx.opac_root _ '/myopac/lists'; IF bbag.id != CGI.param("bbid"); url = mkurl(baseurl,{bbid => bbag.id, item_page => 1},['edit_notes','sort']); @@ -145,6 +148,7 @@

[% bbag.name | html %]

[% IF bbag.description %]
[% bbag.description | html %]
[% END %]
+
[% IF ctx.add_rec %]
@@ -228,8 +232,6 @@ alt="[% l('RSS Feed') %]" border="0" src="[% ctx.media_prefix %]/images/small-rss.png"/> [% END %] -
-
[% IF bbag.pub == 't'; %] [% l('HTML View') %] [% END %]
+
[% IF CGI.param("bbid") == bbag.id %]
-
- - - [%- INCLUDE "opac/parts/preserve_params.tt2" params=['loc', 'query', 'qtype']; %] - [% INCLUDE "opac/parts/filtersort.tt2" - value=CGI.param('sort') mode='bookbag' %] - - - -
+ [% IF bbag.items.size %] +
+
+ + [%- INCLUDE "opac/parts/preserve_params.tt2" params=['loc', 'query', 'qtype']; %] + [% INCLUDE "opac/parts/filtersort.tt2" + value=CGI.param('sort') mode='bookbag' %] + + +
+
+ [% END %]
@@ -262,31 +267,23 @@ [%- INCLUDE "opac/parts/preserve_params.tt2"; %] - - - - - - - - - - - - -
+

[% l('Edit List Description') %]

+
-
- + -
- -
- -
+
+ [% l("Save changes to name or description?") %] + +
@@ -294,6 +291,18 @@
+
+ [% IF bbag.items.size %] +
+ + [%- INCLUDE "opac/parts/preserve_params.tt2"; %] + +
+ [% END %] @@ -326,15 +335,6 @@ | [% l('Edit') %] [% END %] - @@ -360,7 +360,7 @@ mkurl(ctx.opac_root _ '/results', {qtype => 'author', query => authorquery}, ['page', 'bbid', 'edit_notes']) -%]">[% attrs.author | html %] - - - [% IF CGI.param("edit_notes") == bbag.id %] - [% ELSE %] - [% END %] [% IF CGI.param("edit_notes") == bbag.id %] - - + + [% END %]
- - [%- INCLUDE "opac/parts/preserve_params.tt2"; %] - -
+ [% copy = attrs.holdings.0; IF copy; @@ -377,21 +377,21 @@ END; %] + [% attrs.pubdate | html %] + [% attrs.format_label | html %] + [% FOR note IN item.notes %] [% END %] + [% FOR note IN item.notes %]
[% note.note | html %]
[% END %] @@ -400,22 +400,22 @@
[%- INCLUDE "opac/parts/preserve_params.tt2"; %] - +
- +
[% IF ctx.bb_page_count > 1; %]
- [% l('Navigate Selected List ') %] - +
[% l('Navigate Selected List ') %]
+
[%- IF item_page > 1 -%] item_page - 1 @@ -459,7 +459,7 @@ item_page => item_page + 1 }) %]'>[% l('Next') %]► [%- END; -%] - +
[% END %] diff --git a/Open-ILS/src/templates/opac/parts/anon_list.tt2 b/Open-ILS/src/templates/opac/parts/anon_list.tt2 index 2cb06fabba..dab23bff5b 100644 --- a/Open-ILS/src/templates/opac/parts/anon_list.tt2 +++ b/Open-ILS/src/templates/opac/parts/anon_list.tt2 @@ -1,5 +1,7 @@ [% IF ctx.mylist.size %]
+

[% l('Temporary List') %]

+
[% INCLUDE "opac/parts/filtersort.tt2" mode='bookbag' @@ -7,41 +9,39 @@ [%- INCLUDE "opac/parts/preserve_params.tt2"; %] - +
-
-
-

[% l('Temporary List') %]

- +
+ + [%- INCLUDE "opac/parts/preserve_params.tt2"; %] + +
+
+
- - - - - + + + @@ -49,11 +49,11 @@ attrs = {marc_xml => ctx.mylist_marc_xml.$item}; PROCESS get_marc_attrs args=attrs %] - - - + -
+ [% l('Title') %][% l('Author(s)') %][% l('Local Call Number') %] - - [%- INCLUDE "opac/parts/preserve_params.tt2"; %] - - [% l('Title') %][% l('Author(s)') %][% l('Local Call Number') %]
+ [% attrs.title | html %][% attrs.title | html %][% attrs.author | html %] + [% copy = attrs.holdings.0; IF copy; @@ -84,4 +84,5 @@

+ [% END %]