Replace My account tabs with dropdown
authorKathy Lussier <klussier@masslnc.org>
Wed, 18 Sep 2013 19:17:58 +0000 (15:17 -0400)
committerDan Wells <dbw2@calvin.edu>
Wed, 25 Sep 2013 22:41:42 +0000 (18:41 -0400)
The my account tabs were crowded on a small screen, so we switch it to a
dropdown navigation menu. Many thanks to Dan Pearl for his help!

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>
Open-ILS/src/templates/opac/css/style.css.tt2
Open-ILS/src/templates/opac/parts/myopac/base.tt2

index 7520acd..d2d1f9c 100644 (file)
@@ -354,6 +354,10 @@ span.dash_divider {
     color: [% css_colors.accent_medium %];
 }
 
+#acct_select {
+     display: none;
+}
+
 .rdetail_header {
     padding: 5px 7px 6px 0px;
     margin-left: 1em;
@@ -1714,9 +1718,15 @@ a.preflib_change {
        height: 20px;
        margin: 1em 0em 0em .5em;
     }
-    #acct_tabs a:nth-child(4), #acct_tabs a:nth-child(5) {
-        display: none;
+    
+    #acct_select {
+        display: inline-block;
     }
+    
+    #acct_tabs a {
+         display:none;
+    }
+    
     #acct_checked_tabs {
         display:none;
     }
index e478f83..630a5a0 100644 (file)
                     class="[% cls_which %]">[% page.name; %]</a>
                 [% END %]
             </div>
-        </div>
+            <div id="acct_select">
+              <form name="acct_nav">
+                <select name="acct_url" aria-label="Select an account page" onchange="window.location.href=document.acct_nav.acct_url.options[document.acct_nav.acct_url.selectedIndex].value">
+                   <option value="" selected="selected">Go to...</option>
+               [% FOREACH page IN myopac_pages;
+                  IF page.url != myopac_page; %]
+                    <option value="[% mkurl(ctx.opac_root _ '/myopac/' _ page.url, {}, ['bbid', 'offset', 'limit']) %]">[% page.name; %]</option>
+                 [% END;
+               END; %] 
+              </select>
+           </div>
+          </form>
+       </div>
         <div id="main-content">
             [% content %]
             <div class="common-full-pad"></div>