change tabs on user preferences from horizontal to vertical layout

RESOLVED FIXED

Status

()

bugzilla.mozilla.org
User Interface
RESOLVED FIXED
2 years ago
a year ago

People

(Reporter: glob, Assigned: dkl)

Tracking

Production
Dependency tree / graph

Details

Attachments

(1 attachment, 1 obsolete attachment)

(Reporter)

Description

2 years ago
the current count of tabs on the user preferences page is large, and causes layout issues on smaller screens.

it would look much better if the page selectors were vertical on the left hand side of the page.
(Assignee)

Updated

2 years ago
Assignee: nobody → dkl
Status: NEW → ASSIGNED
(Assignee)

Comment 1

2 years ago
Created attachment 8646130 [details] [diff] [review]
1192854_1.patch
Attachment #8646130 - Flags: review?(glob)
(Reporter)

Comment 2

2 years ago
Comment on attachment 8646130 [details] [diff] [review]
1192854_1.patch

Review of attachment 8646130 [details] [diff] [review]:
-----------------------------------------------------------------

this looks like a great start (i really like the 50% opaque menu background)
- the background of the main content should be white
- there's a unnecessary 40px left padding on the <ul> element - the menu should be flush with the left border of bugzilla-body
- the menu is too wide; 175px looks about right to me (with a 5px gap between it and the content)

::: skins/standard/admin.css
@@ +185,5 @@
> +    margin-top: -1em;
> +}
> +
> +#prefnav li {
> +    font-size: 12px;

i think it would be better to leave the font-size as the default, and tighten up the padding/margins to gain more content space.

::: template/en/default/account/prefs/tabs.html.tmpl
@@ +17,5 @@
> +  #
> +  # Contributor(s): Gervase Markham <gerv@gerv.net>
> +  #                 Myk Melez <myk@mozilla.org>
> +  #                 Marc Schumann <wurblzap@gmail.com>
> +  #%]

this is the wrong license

@@ +35,5 @@
> +        [% IF tab.name == current_tab_name %]
> +          <li class="selected">[% tab.label FILTER html %]</li>
> +        [% ELSE %]
> +          <li><a href="[% tab.link FILTER html %]">[% tab.label FILTER html %]</a></li>
> +        [% END %]

i've been wanting to see something changed here for ages .. since we're touching this code can you make the selected tab's name clickable please.  it should look the same as the current (eg. black text).
Attachment #8646130 - Flags: review?(glob) → review-
(Assignee)

Comment 3

2 years ago
Created attachment 8646545 [details] [diff] [review]
1192854_2.patch
Attachment #8646130 - Attachment is obsolete: true
Attachment #8646545 - Flags: review?(glob)
(Reporter)

Comment 4

2 years ago
Comment on attachment 8646545 [details] [diff] [review]
1192854_2.patch

Review of attachment 8646545 [details] [diff] [review]:
-----------------------------------------------------------------

this looks great, r=glob with comments addressed on commit.

::: skins/standard/admin.css
@@ +184,5 @@
> +}
> +
> +#prefnav {
> +    width: 14em;
> +    float:left;

you're missing a space after that :

@@ +196,5 @@
> +}
> +
> +#prefnav li {
> +    padding: .6em 1em;
> +    background: rgba(255, 255, 255, 0.5) none repeat scroll 0% 0%;

this should just be:
> background: rgba(255, 255, 255, 0.5)

@@ +209,5 @@
> +    text-decoration: underline;
> +}
> +
> +#prefnav li.selected {
> +    background: #FFF none repeat scroll 0% 0%;

that should be
> background: #fff

using the classic theme it's impossible to determine which <li> is selected, and it's barely possible with dusk.

adding "font-weight: bold" appears to be sufficient.

@@ +216,5 @@
> +#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%;

> background: #fff

::: template/en/default/filterexceptions.pl
@@ +202,5 @@
>  ],
>  
> +'account/prefs/tabs.html.tmpl' => [
> +  'content',
> +],

instead of a filter exception, please change tabs.html.tmpl to use "content FILTER none".
Attachment #8646545 - Flags: review?(glob) → review+
(Assignee)

Comment 5

2 years ago
Thanks!

To ssh://gitolite3@git.mozilla.org/webtools/bmo/bugzilla.git
   56c61ae..b109a7d  master -> master
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
Blocks: 1235657
You need to log in before you can comment on or make changes to this bug.