From d786c57c6ec25b17b25f60e3f4624f8c1c368ba7 Mon Sep 17 00:00:00 2001 From: Terran McCanna Date: Tue, 11 Apr 2017 17:42:54 -0400 Subject: [PATCH] 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 --- Open-ILS/src/templates/opac/css/style.css.tt2 | 124 ++++++++++++++- Open-ILS/src/templates/opac/myopac/lists.tt2 | 142 +++++++++--------- .../src/templates/opac/parts/anon_list.tt2 | 59 ++++---- 3 files changed, 220 insertions(+), 105 deletions(-) diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2 index 3daeb4985a..b5044c1565 100644 --- a/Open-ILS/src/templates/opac/css/style.css.tt2 +++ b/Open-ILS/src/templates/opac/css/style.css.tt2 @@ -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; } diff --git a/Open-ILS/src/templates/opac/myopac/lists.tt2 b/Open-ILS/src/templates/opac/myopac/lists.tt2 index b2c26d2a75..b12b9dce1e 100644 --- a/Open-ILS/src/templates/opac/myopac/lists.tt2 +++ b/Open-ILS/src/templates/opac/myopac/lists.tt2 @@ -19,7 +19,7 @@

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

- + + + + + + + + + + - - -
+ @@ -33,8 +33,20 @@ [% END %]
+ + + +
+
  - -       +     +
- - - -
@@ -125,7 +132,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']); @@ -137,6 +144,7 @@

[% bbag.name | html %]

[% IF bbag.description %]
[% bbag.description | html %]
[% END %]
+
[% IF ctx.add_rec %]
@@ -220,8 +228,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 %]
@@ -254,29 +263,23 @@ [%- INCLUDE "opac/parts/preserve_params.tt2"; %] - - - - - - - - - - -
+

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

+
-
- + - - [% l("Save changes to name or description?") %]
- -
- -
+
+ [% l("Save changes to name or description?") %] + +
@@ -284,6 +287,18 @@
+
+ [% IF bbag.items.size %] +
+ + [%- INCLUDE "opac/parts/preserve_params.tt2"; %] + +
+ [% END %] @@ -316,15 +331,6 @@ | [% l('Edit') %] [% END %] - @@ -350,7 +356,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; @@ -367,21 +373,21 @@ END; %] + [% attrs.pubdate | html %] + [% attrs.format_label | html %] + [% FOR note IN item.notes %] [% END %] + [% FOR note IN item.notes %]
[% note.note | html %]
[% END %] @@ -390,22 +396,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 @@ -449,7 +455,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 %] -- 2.43.2