882548 - outstanding issues with the sandstone/mozilla skin that need to be fixed before becoming default

Status: RESOLVED FIXED

(bugzilla.mozilla.org Graveyard :: Sandstone/Mozilla Skin, defect)

Description

[:glob ✱]

issues that i think should be addressed with the sandstone/mozilla skin before it's made the default (from bug 813632 comment 4 and my personal feelings):

- lots of stuff is in pixels, need to ensure this works well with high dpi devices (especially on windows)
- ensure it looks sane on IE8+ (doesn't have to look perfect, just not bad)
- labels on show_bug are mixed bold/normal, and wrap
- remove the background from the user on show_bug for comments/changes (the user shouldn't be the most highlighted item on the page)
- comments should be wider
- default buttons should be smaller (1em horiz padding, 3em high)
- tabs need to be styled (search, prefs)
- 'last comment' is massive.  massive.
- comment timestamps shouldn't wrap (making the comment column wider may address this)
- change-only divs should have same bg color as with-comment change divs (and the change author should be styled the same as with-comment changes)

Comment 1

[:glob ✱]

- bug groups are shown on a single line
- attachment actions (details | diff | review) shouldn't wrap

Comment 2

[Bram Pitoyo [:bram]]

Attachment: bugzilla - advanced search - 01

(In reply to Byron Jones ‹:glob› from comment #0)
> - tabs need to be styled (search, prefs)

Attached is my attempt at styling the tabs on the search interface.

Notable things:
* Tabs have 1em distance between each other, making each more distinct
* Tab font-size: 12px; text-transform: uppercase;
* Selected tab font-weight: 700;
* Inactive tab background-color: rgba(255,255,255,0.5);
* Search button is colored blue like a Sandstone button. It could be colored green and styled to match the green button we use on the rest of the site, though
* Multiple select box is styled similarly to the input box, but with no gradient
* Multiple select and select boxes have Open Sans font and font-size: 12px;
* Text input boxes have font-size: 13px;

That’s about it for the moment. What do you think?

Comment 3

[:glob ✱]

(In reply to Bram Pitoyo [:bram] from comment #2)
> That’s about it for the moment. What do you think?

wow, that looks amazing.

> Search button is colored blue like a Sandstone button

i actually like the blue buttons more.

Comment 4

[David Lawrence [:dkl]]

(In reply to Byron Jones ‹:glob› from comment #3)
> (In reply to Bram Pitoyo [:bram] from comment #2)
> > That’s about it for the moment. What do you think?
> 
> wow, that looks amazing.
> 
> > Search button is colored blue like a Sandstone button
> 
> i actually like the blue buttons more.

I agree with glob in that this looks really good and much more refined than before.
I also dig the blue buttons as well and looks nicer with the rest of the colors of
the page.

One thing we have discussed in the past, and this may be a topic for a different bug, was to convert the footer to a three column layout similar to how other links are on other Mozilla properties. 

So basically you would have your personal saved queries in the first column, searches shared with you in the middle, and then the last would be for misc links such as Privacy Policy. Would be nice to somehow incorporate the Mozilla logo in there if it can be done cleanly.

Thanks for helping us out!
dkl

Comment 5

[Tim Guan-tin Chien [:timdream] (please needinfo)]

URLs with hash (e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=882548#c4) actually scrolls the targeted comment below the header.

Comment 6

[Ashish Vijayaram [:ashish]]

In show_bug.cgi:

* Items in Group Visibility are missing a <br/>
* needinfo? <input> field has a different style than the others
* needinfo? checkbox needs a "valign=top"
* Suggest a "vertical-align: middle" for .field_label and .field_value
* Suggest a 3px padding for <th> for better cursor interaction

In bug_list.cgi:

* Change background colour of odd rows to something else that matches the theme better (possibly rgba(255,255,255,0.5)?)

In userprefs.cgi:
* watched users <input> field has a different style than the others
* All "Submit Changes" buttons to have the big green button styling of show_bug.cgi's "Save Changes" button

I will be very happy to work with any of the devs and submit a patch!

Comment 7

[Bram Pitoyo [:bram]]

Attachment: bugzilla - footer - 01

(In reply to David Lawrence [:dkl] from comment #4)

Making the footer more functional and accessible is a no-brainer. The mockup is attached here. Note how I tried to organize the various lists into distinct areas: navigation (upper-left), bug control (upper-right), saved queries and search (lower-left), Mozilla branding and footer (lower-right).


(In reply to Tim Guan-tin Chien [:timdream] (MoCo-TPE) from comment #5)

This happens because the #header element sits on top of the content. The only solution I can think of is moving the anchor a little bit up, but I don’t know how to achieve it with pure CSS. Do you have an idea on how to solve this problem?


(In reply to Ashish Vijayaram [:ashish] from comment #6)

The <button>/<input> styling and valign:middle for .field_label has been addressed by bug 886229 comment 6. Let’s reevaluate this visual changes again when the commit gets deployed?

3px padding for <th>, needinfo? alignment and background color of odd rows are good things to fix. Could you edit the global.css and post it here, or in a new bug, so we can test out the changes?

Comment 8

[Liz Henry (:lizzard) (relman/hg->git project)]

Attachment: background-inline_1.patch

This patch changes the background of inline changes (that aren't comments) to white and styles it like the other comments. 

I think this also fixes bug 880483.

Comment 9

[:glob ✱]

(In reply to Byron Jones ‹:glob› from comment #0)
> - lots of stuff is in pixels, need to ensure this works well with high dpi
> devices (especially on windows)

i spent some time on this, and it's significantly more work than i initially suspected.  i'm happy for this to not be a blocker for making the skin the default.

Comment 10

[Felix Miata]

How is it that a bug assignee/owner other than nobody can decide a bug depends on another bug and someone else can reverse it?

Comment 11

[Liz Henry (:lizzard) (relman/hg->git project)]

Felix: Do you mean in this particular case or in general? 

In this case, I have been working this week with glob on fixing some issues with Sandstone. I am a bit new at it and associated this bug with 876220 as I was trying to untangle what depends on what. :)  Today, glob and I were discussing this bug, to decide what needs to be done before the skin can become the default.   I'm okay with it not being a blocker.  Though I would still like to work on improving sandstone for high dpi displays, I can do that in bug 876220. Your notes there look super helpful.

Comment 12

[Florian Bender]

Bug 905763 should be added to the list.

Comment 13

[:glob ✱]

(In reply to Florian Bender from comment #12)
> Bug 905763 should be added to the list.

we're going to go live with a non-fixed header position.
in fact, we're good to go with this now, and it will be made the default after the next code push.