LP#1706415: Address usability issues with bottom-of-page menus user/kmlussier/lp1706415-improve-bottom-of-page-menu-usability
authorKathy Lussier <klussier@masslnc.org>
Tue, 25 Jul 2017 19:45:21 +0000 (15:45 -0400)
committerKathy Lussier <klussier@masslnc.org>
Tue, 25 Jul 2017 19:45:21 +0000 (15:45 -0400)
Dropdown menus that appear at the bottom of the page in the web client had some
usability issues because their contents fell below the screen. This commit
adds a little space at the bottom of all web client pages and also makes
three bottom-of-the-page menus "drop up" instead of down. The three menus
are the stat-cat menus that appear at the bottom of the user registration
form, the Z39.50 actions menu, and the create reports template actions menu.

Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Open-ILS/src/templates/staff/cat/z3950/t_list.tt2
Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
Open-ILS/src/templates/staff/css/style.css.tt2
Open-ILS/src/templates/staff/reporter/t_edit_template.tt2

index e687c93..4ad211d 100644 (file)
@@ -88,7 +88,8 @@
   items-provider="z3950SearchGridProvider"
   grid-controls="gridControls"
   persist-key="cat.z3950_results"
-  dateformat="{{$root.egDateAndTimeFormat}}">
+  dateformat="{{$root.egDateAndTimeFormat}}"
+  class="dropup">
 
   <eg-grid-menu-item handler="showInCatalog" disabled="cant_showInCatalog"
     label="[% l('Show in Catalog') %]"></eg-grid-menu-item>
index 76649b7..e17e38a 100644 (file)
@@ -860,7 +860,7 @@ within the "form" by name for validation.
     </div>
     <div class="col-md-3 reg-field-input">
       <div ng-if="cat.entries().length != 0">
-        <div class="btn-group" uib-dropdown>
+        <div class="btn-group dropup" uib-dropdown>
           <button type="button" class="btn btn-default" ng-class="{'ng-invalid': cat.required() == 1 && !stat_cat_entry_maps[cat.id()] }" uib-dropdown-toggle>
             <span style="padding-right: 5px;">
               {{stat_cat_entry_maps[cat.id()]}}</span>
index 9aa3eda..f7abf84 100644 (file)
@@ -1,3 +1,6 @@
+/* Create some padding at bottom of the page for breathing room */
+body { padding-bottom: 50px; }
+
 /* --------------------------------------------------------------------------
  * Simple default navbar style adjustements to apply the Evergreen color.
  * TODO: style other components to match EG color scheme
index fbb266d..62460ef 100644 (file)
             features="-sort,-multisort,-multiselect"
             items-provider="grid_display_fields_provider"
             grid-controls="display_grid_controls"
+            class="dropup"
           >
             <eg-grid-action 
               handler="changeDisplayLabel"