Update style of menu to match rest of page




Bugzilla Anthropology Metrics
4 years ago
2 years ago


(Reporter: ekyle, Unassigned, Mentored)


(Blocks: 1 bug)

Windows 7


(Whiteboard: [good next bug][lang=js])


(3 attachments)



4 years ago
> https://github.com/mozilla/charts

Many of the dashboards (eg http://charts.mozilla.org/fxos/team.html) are an ugly mix of two styles:  jquery-ui (found in fxos/lib/jquery-ui) and what we will call "flat" style (found in fxos/css/menu.css and mozilla.css).

Please remove the jquery-ui style, and replace it with something, of your own creation, that matches the flat style.  Feel free to tweak menu.css if your sense of aesthetics requires you to do so.


4 years ago
Whiteboard: [good next bug]
Kyle, as codebases have changed, is this bug still valid?  If so, lets get a mentor field set, and a [lang=javascript] <- or whatever it really is!
Flags: needinfo?(klahnakoski)

Comment 2

4 years ago
This is still a good bug, the charts.mozilla.org codebase has had additions, and this styling issue continues to be an ugly thorn
Mentor: klahnakoski
Flags: needinfo?(klahnakoski)
Whiteboard: [good next bug] → [good next bug][lang=js]
I've set my environment for Firefox Desktop Development. What should I do to build environment for mozilla.org bugs? 

Also, are you pointing to style for whole page (with link in Description) or just style of those grey colored drop-down menus? 

Thank You
Flags: needinfo?(klahnakoski)

Comment 4

2 years ago
Good work on setting up Firefox Desktop Development, but that is way more than you need for this bug.  This bug concerns the "static" webpage at charts.mozilla.org. You will require some javascript editor, nothing too fancy, and a browser to test on.

The left hand side of the dashboard has a team selector, and it has a default jquery_ui style (if I recall correctly).  They should match the plain gray drop downs.

You picked a good time to work on this: There are plans to move many other dashboards to this site.  Your work on making the menus match will be appreciated by many more people.
Flags: needinfo?(klahnakoski)
Created attachment 8821775 [details]
New design for Dashborad
Just a shot for new design of the webpage. Surely I am not much creative when it comes to designing. Still, please have a look at it, and give your feedback. If you like it, I will attach patch file related to the change.

Also please assign me this bug, as I am already working on this.
Flags: needinfo?(klahnakoski)

Comment 7

2 years ago
Created attachment 8821785 [details]
2016-12-24 17-52-06.png

I like what you did with the background. It does a good job of distracting the eye from the contrasting styles.  

I neglected to mention that Mozilla has a styling guide [1]. The styling guide will help constrain the plethora of possible design decisions you can make to improve the site. You will find most companies have a guide, in one form or another, that dictate the colors and textures allowed. Please use the styling styling guide. 

I attached an image of specific problem: The "Selection Summary" and "Team" headers appear glossy, which does not match matte style of the rest of the site. Nor does it match the Mozilla style.

Thank you! Have a good holiday!  

[1] https://www.mozilla.org/en-US/styleguide/
Flags: needinfo?(klahnakoski)
Created attachment 8822188 [details]
Screen Shot 2016-12-28 at 8.19.31 PM.png
Hi Kyle,

Please tell me how to submit patch for this one or should I directly push those changes. Also, inform me if any further changes required.

Comment 10

2 years ago
Good, you got rid of the gloss, but there are other details: The corners are rounded, the headers have outlines, the arrows have non-standard color. Plus, as much as the background style hid the styling problems, it does not match the Mozilla style guide.

For submitting a patch, fork the repo on github, then push your changes to your fork. This will allow me to review the code changes, and allow you to create a pull request for the main repo.
I've created pull request. But I have not removed headers' outline, as without border those boxes appear to be dead. Hope, this will be fine.
Thanks for help!
You need to log in before you can comment on or make changes to this bug.