From: Kathy Lussier <klussier@masslnc.org>
Date: Fri, 20 Sep 2013 19:09:13 +0000 (-0400)
Subject: Replace prefs tabs with select menu in mobile view
X-Git-Tag: sprint4-merge-nov22~2683
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=f6360ccdd1652b04299eea00018fa372a8f74a8d;p=working%2FEvergreen.git

Replace prefs tabs with select menu in mobile view

There are too many account preference tabs to display cleanly on a small
screen resolution, so let's replace them with a select menu for
navigation. At the same time, we remove hardcoded values used for the
navigation tabs so that we do not need to maintain links/labels for the
menus in two different places.

Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Signed-off-by: Lebbeous Fogle-Weekley <lebbeous@esilibrary.com>
Signed-off-by: Dan Wells <dbw2@calvin.edu>
---

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 87647609e6..cdc607138c 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -353,7 +353,7 @@ span.dash_divider {
     color: [% css_colors.accent_medium %];
 }
 
-#acct_select {
+#acct_select, #acct_prefs_select {
      display: none;
 }
 
@@ -1753,11 +1753,11 @@ a.preflib_change {
        display: none;
     }
 
-    #acct_select {
+    #acct_select, #acct_prefs_select {
         display: inline-block;
     }
     
-    #acct_tabs {
+    #acct_tabs, #acct_prefs_tabs {
          display:none;
     }
     
diff --git a/Open-ILS/src/templates/opac/myopac/prefs.tt2 b/Open-ILS/src/templates/opac/myopac/prefs.tt2
index 8e45561eb4..df1d444148 100644
--- a/Open-ILS/src/templates/opac/myopac/prefs.tt2
+++ b/Open-ILS/src/templates/opac/myopac/prefs.tt2
@@ -1,7 +1,7 @@
 [%  PROCESS "opac/parts/header.tt2";
     WRAPPER "opac/parts/myopac/prefs_base.tt2";
     myopac_page = "prefs";
-    prefs_page = 'personal' %]
+    prefs_page = 'prefs' %]
 
 <div id="acct_info_main">
     <div id='myopac.expired.alert'
diff --git a/Open-ILS/src/templates/opac/myopac/prefs_my_lists.tt2 b/Open-ILS/src/templates/opac/myopac/prefs_my_lists.tt2
index 69106a43c0..441ba3ec76 100644
--- a/Open-ILS/src/templates/opac/myopac/prefs_my_lists.tt2
+++ b/Open-ILS/src/templates/opac/myopac/prefs_my_lists.tt2
@@ -1,7 +1,7 @@
 [%  PROCESS "opac/parts/header.tt2";
     WRAPPER "opac/parts/myopac/prefs_base.tt2";
     myopac_page = "prefs";
-    prefs_page = 'my_lists' %]
+    prefs_page = 'prefs_my_lists' %]
 
 
     <form method='post'>
diff --git a/Open-ILS/src/templates/opac/myopac/prefs_notify.tt2 b/Open-ILS/src/templates/opac/myopac/prefs_notify.tt2
index c0c1fba906..0663d86346 100644
--- a/Open-ILS/src/templates/opac/myopac/prefs_notify.tt2
+++ b/Open-ILS/src/templates/opac/myopac/prefs_notify.tt2
@@ -1,7 +1,7 @@
 [%  PROCESS "opac/parts/header.tt2";
     WRAPPER "opac/parts/myopac/prefs_base.tt2";
     myopac_page = "prefs";
-    prefs_page = 'notify' %]
+    prefs_page = 'prefs_notify' %]
 
 <form method='post'>
     [% setting = 'opac.hold_notify' %]
diff --git a/Open-ILS/src/templates/opac/myopac/prefs_settings.tt2 b/Open-ILS/src/templates/opac/myopac/prefs_settings.tt2
index 4896a7b66e..30323825a5 100644
--- a/Open-ILS/src/templates/opac/myopac/prefs_settings.tt2
+++ b/Open-ILS/src/templates/opac/myopac/prefs_settings.tt2
@@ -2,7 +2,7 @@
     PROCESS "opac/parts/org_selector.tt2";
     WRAPPER "opac/parts/myopac/prefs_base.tt2";
     myopac_page = "prefs";
-    prefs_page = 'settings' %]
+    prefs_page = 'prefs_settings' %]
 
 
     <form method='post'>
diff --git a/Open-ILS/src/templates/opac/parts/myopac/prefs_base.tt2 b/Open-ILS/src/templates/opac/parts/myopac/prefs_base.tt2
index 031da15dfb..ec9e657581 100644
--- a/Open-ILS/src/templates/opac/parts/myopac/prefs_base.tt2
+++ b/Open-ILS/src/templates/opac/parts/myopac/prefs_base.tt2
@@ -1,65 +1,31 @@
 [%  PROCESS "opac/parts/header.tt2";
     WRAPPER "opac/parts/myopac/base.tt2"; %]
 
+        [% acct_prefs_pages = [
+           {url => "prefs", name => l("Personal Information")},
+           {url => "prefs_notify", name => l("Notification Preferences")},
+           {url => "prefs_settings", name => l("Search and History Preferences")},
+           {url => "prefs_my_lists", name => l("My Lists Preferences")}
+           ];
+           skin_root = "../"
+%]
+
 <div id='myopac_prefs_div'>
     <div id="acct_prefs_tabs">
         <div style="float:left;">
+                [%- FOREACH page IN acct_prefs_pages;
+                    IF page.url == prefs_page;
+                        cls_select = "align selected";
+                    ELSE;
+                        cls_select = "align";
+                    END -%]
 
-        [% IF prefs_page == 'personal' %]
-            <div class="align selected">
-                <a href='#'>[% l("Personal Information") %]</a>
-            </div>
-            <div class="align">
-                <a href='[% mkurl('prefs_notify') %]'>[% l("Notification Preferences") %]</a>
-            </div>
-            <div class="align">
-                <a href='[% mkurl('prefs_settings') %]'>[% l("Search and History Preferences") %]</a>
-            </div>
-            <div class="align">
-                <a href='[% mkurl('prefs_my_lists') %]'>[% l("My Lists Preferences") %]</a>
-            </div>
-        [% ELSIF prefs_page == 'notify' %]
-            <div class="align">
-                <a href='[% mkurl('prefs') %]'>[% l("Personal Information") %]</a>
-            </div>
-            <div class="align selected">
-                <a href='#'>[% l("Notification Preferences") %]</a>
-            </div>
-            <div class="align" >
-                <a href='[% mkurl('prefs_settings') %]'>[% l("Search and History Preferences") %]</a>
-            </div>
-            <div class="align">
-                <a href='[% mkurl('prefs_my_lists') %]'>[% l("My Lists Preferences") %]</a>
-            </div>
-        [% ELSIF prefs_page == 'settings' %]
-            <div class="align">
-                <a href='[% mkurl('prefs') %]'>[% l("Personal Information") %]</a>
+            <div class="[% cls_select %]">
+                 <a href="[% mkurl(ctx.opac_root _ '/myopac/' _ page.url, {}, ['bbid', 'offset', 'limit']) %]">[% page.name; %]</a>
             </div>
-            <div class="align">
-                <a href='[% mkurl('prefs_notify') %]'>[% l("Notification Preferences") %]</a>
-            </div>
-            <div class="align selected" >
-                <a href='#'>[% l("Search and History Preferences") %]</a>
-            </div>
-            <div class="align">
-                <a href='[% mkurl('prefs_my_lists') %]'>[% l("My Lists Preferences") %]</a>
-            </div>
-        [% ELSE %]
-            <div class="align">
-                <a href='[% mkurl('prefs') %]'>[% l("Personal Information") %]</a>
-            </div>
-            <div class="align">
-                <a href='[% mkurl('prefs_notify') %]'>[% l("Notification Preferences") %]</a>
-            </div>
-            <div class="align" >
-                <a href='[% mkurl('prefs_settings') %]'>[% l("Search and History Preferences") %]</a>
-            </div>
-            <div class="align selected">
-                <a href='#'>[% l("My Lists Preferences") %]</a>
-            </div>
-        [% END %]
-        </div>
-    </div> 
+            [% END %]
+         </div>
+    </div>
 
     <div class="clear-both"></div> <br/>
 
@@ -69,6 +35,19 @@
             <a class="hide_me" href="#">[% l('Export List') %]</a><!-- what does this do? -->
         </span>
     </div>
+        <!- Select box navigation for mobile view ->
+        <div id="acct_prefs_select">
+	     <form name="acct_prefs_nav">
+	       <select name="acct_prefs_url" aria-label="Select a preference page" onchange="window.location.href=document.acct_prefs_nav.acct_prefs_url.options[document.acct_prefs_nav.acct_prefs_url.selectedIndex].value">
+      [% FOREACH page IN acct_prefs_pages;
+          IF page.url != prefs_page; %]
+            <option value="[% mkurl(ctx.opac_root _ '/myopac/' _ page.url, {}, ['bbid', 'offset', 'limit']) %]">[% page.name; %]</option>;
+          [% ELSE; %]
+           <option value="" disabled selected>[% page.name; %]</option>;
+          [% END;
+       END; %]
+       </select>
+      </div>
 
     <div class="clear-both normal-height"></div>