Bug 1192854: change tabs on user preferences from horizontal to vertical layout

Author: dklawren

skins/standard/admin.css

@@ -179,3 +179,49 @@ th.title {
     cursor: default;
 }
 
+/* User Preferences Page */
+
+#prefmain {
+    margin: 1em 0;
+}
+
+#prefnav {
+    width: 14em;
+    float: left;
+}
+
+#prefcontent {
+    margin-left: 15em;
+    padding: .2em 1.5em 1.5em 1.5em;
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+    background: #FFF none repeat scroll 0% 0%;
+}
+
+#prefnav, #prefcontent {
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+}
+
+#prefnav ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+#prefnav li {
+    padding: .6em 1em;
+    background: rgba(255, 255, 255, 0.5);
+}
+
+#prefnav li a {
+    display: block;
+    text-decoration: none;
+}
+
+#prefnav li a:hover {
+    text-decoration: underline;
+}
+
+#prefnav li.selected {
+    font-weight: bold;
+    background: #fff;
+}

template/en/default/account/prefs/prefs.html.tmpl

@@ -95,7 +95,7 @@
   END;
 %]
 
-[% WRAPPER global/tabs.html.tmpl
+[% WRAPPER account/prefs/tabs.html.tmpl
    tabs        = tabs
    current_tab = current_tab
 %]

template/en/default/account/prefs/tabs.html.tmpl

@@ -0,0 +1,30 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%# INTERFACE:
+  # tabs: List of hashes. Must have at least one item.  Each hash has:
+  #   name: string. Name of the tab.
+  #   link: string. relative URL to the tab's resource on this installation.
+  #   label: string. text displayed in the tab.
+  # current_tab_name: string. name of the currently selected tab
+  #%]
+
+<div id="prefmain">
+  <div id="prefnav">
+    <ul>
+      [% FOREACH tab = tabs %]
+        <li [%= IF tab.name == current_tab_name %]class="selected"[% END %]>
+          <a href="[% tab.link FILTER html %]">[% tab.label FILTER html %]</a>
+        </li>
+      [% END %]
+    </ul>
+  </div>
+  <div id="prefcontent">
+    [% content FILTER none %]
+  </div>
+</div>