Last Comment Bug 886229 - Style text, select and multi-select boxes, and submit Search buttons
: Style text, select and multi-select boxes, and submit Search buttons
Status: RESOLVED FIXED
:
Product: bugzilla.mozilla.org
Classification: Other
Component: Sandstone/Mozilla Skin (show other bugs)
: Production
: All All
: -- normal (vote)
: ---
Assigned To: Bram Pitoyo [:bram]
:
:
Mentors:
good catch
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2013-06-24 00:02 PDT by Bram Pitoyo [:bram]
Modified: 2013-07-26 12:45 PDT (History)
1 user (show)
See Also:
Due Date:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
global.css (14.17 KB, text/css)
2013-06-24 00:02 PDT, Bram Pitoyo [:bram]
no flags Details
global.css (13.84 KB, text/css)
2013-06-24 21:08 PDT, Bram Pitoyo [:bram]
glob: review+
Details
global.css (15.20 KB, text/css)
2013-07-10 17:59 PDT, Bram Pitoyo [:bram]
no flags Details
global.css (15.21 KB, text/css)
2013-07-11 23:06 PDT, Bram Pitoyo [:bram]
no flags Details
screenshot showing small button next to text area (7.93 KB, image/png)
2013-07-12 13:50 PDT, David Lawrence [:dkl]
no flags Details
global.css (15.13 KB, text/css)
2013-07-14 14:42 PDT, Bram Pitoyo [:bram]
no flags Details
Screenshot from 2013-07-25 16:39:47.png (54.20 KB, image/png)
2013-07-25 13:45 PDT, David Lawrence [:dkl]
no flags Details
Screenshot from 2013-07-25 16:39:12.png (65.16 KB, image/png)
2013-07-25 13:45 PDT, David Lawrence [:dkl]
no flags Details
Enter bug - advanced fields (60.35 KB, image/png)
2013-07-25 21:03 PDT, Bram Pitoyo [:bram]
no flags Details
Show bug - comment form (29.77 KB, image/png)
2013-07-25 21:04 PDT, Bram Pitoyo [:bram]
no flags Details

Description Bram Pitoyo [:bram] 2013-06-24 00:02:34 PDT
Created attachment 766553 [details]
global.css

Drop-down menus (non-multiple input elements) are not styled yet because they can cause visual scaling bugs.

Most of these changes are apparent on the advanced search and enter bug interface.

When landing patch, please check #quicksearch_top, #quicksearch_main. When viewed online, I wasn’t able to see the search loupe icon, but this could due to the fact that not all images were downloaded to my machine.
Comment 1 Byron Jones ‹:glob› [PTO until 2016-10-10] 2013-06-24 01:19:21 PDT
this looks great, however there's a few minor issues:
 - <button>s aren't styled
 - disabled buttons/submits look identical to enabled ones
 - the vertical spacing of the 'search' button at the top of the advanced search form is different from the vertical spacing of the 'search' button in the header

we use <button>s on the guided bug entry form:
  https://bugzilla.mozilla.org/enter_bug.cgi?format=guided
Comment 2 Bram Pitoyo [:bram] 2013-06-24 21:08:47 PDT
Created attachment 767033 [details]
global.css

What’s new in this version:
* Styled <button> elements
* Commit button is colored blue (but not a big deal if it’s green)
* Added style for [disabled] state
* Added style for :hover, too
* Search button in the header has the same text size as the rest of the buttons
Comment 3 David Lawrence [:dkl] 2013-06-25 07:25:49 PDT
(In reply to Bram Pitoyo [:bram] from comment #2)
> Created attachment 767033 [details]
> global.css
> 
> What’s new in this version:
> * Styled <button> elements

The "Find similar issues" buttons on the Guided Bug page are still un-styled.

> * Commit button is colored blue (but not a big deal if it’s green)

I think they should be the same color, no? With this new changes, if you go to the standard enter_bug.cgi page, the Submit button is bigger and green and the "bookmark as template" button is blue.

> * Added style for :hover, too

Do you mean hover of the buttons? I do not see any change when hovering the blue buttons, but I see change for the green ones.

Thanks
dkl
Comment 4 Bram Pitoyo [:bram] 2013-06-26 21:38:07 PDT
(In reply to David Lawrence [:dkl] from comment #3)

Hi David. I rechecked and was able to see the changes in my machine. I am guessing that it has to do with filename naming issue: my file was called ‘global_002.css’, because the way I edit was by saving the file using the File menu (as a result, Firefox sees multiple ‘global.css’ files and decided to save _001, _002 and so on).

Perhaps renaming the file and putting it in the correct directory might fix the problem?
Comment 5 Byron Jones ‹:glob› [PTO until 2016-10-10] 2013-06-30 22:40:37 PDT
Comment on attachment 767033 [details]
global.css

this works and looks good to me; thanks!
Comment 6 Byron Jones ‹:glob› [PTO until 2016-10-10] 2013-06-30 22:41:59 PDT
Committing to: bzr+ssh://bjones%40mozilla.com@bzr.mozilla.org/bmo/4.2/
modified skins/contrib/Mozilla/global.css
Committed revision 8863.
Comment 7 Byron Jones ‹:glob› [PTO until 2016-10-10] 2013-07-09 00:29:23 PDT
this change made textareas lose the monospace font, which is undesirable.

updated:

Committing to: bzr+ssh://bjones%40mozilla.com@bzr.mozilla.org/bmo/4.2/
modified skins/contrib/Mozilla/global.css
Committed revision 8869.
Comment 8 Bram Pitoyo [:bram] 2013-07-09 15:36:18 PDT
Good catch. We do want to leave the comment text fields in monospace. Is there any other text field that needs to be kept this way?
Comment 9 Bram Pitoyo [:bram] 2013-07-10 17:59:46 PDT
Created attachment 773725 [details]
global.css

Styling all generic <input> elements causes input[type=file] and input[type=button] to look like textboxes. Added specific type=button styling instead.

The change is most apparent on enter_bug.cgi. Whereas the “Show advanced fields”, “Add an attachment” and “Choose File” are surrounded by white boxes that looks like a text box before the CSS change, now they’re shaped like proper blue buttons (in the first two instances) and a file picker (in the last instance).
Comment 10 Bram Pitoyo [:bram] 2013-07-10 18:00:18 PDT
Reopened for a small input[type] CSS fix.
Comment 11 David Lawrence [:dkl] 2013-07-10 20:52:28 PDT
(In reply to Bram Pitoyo [:bram] from comment #9)
> Created attachment 773725 [details]
> global.css
> 
> Styling all generic <input> elements causes input[type=file] and
> input[type=button] to look like textboxes. Added specific type=button
> styling instead.
> 
> The change is most apparent on enter_bug.cgi. Whereas the “Show advanced
> fields”, “Add an attachment” and “Choose File” are surrounded by white boxes
> that looks like a text box before the CSS change, now they’re shaped like
> proper blue buttons (in the first two instances) and a file picker (in the
> last instance).

Would it be possible to make the blue buttons not quite so large? They look huge when surrounded by normal labels and other text. I would argue that some of the buttons should not be buttons at all such as adding flags and attachments in enter_bug.cgi. Maybe simply a link instead of a rotating arrow? Also personally I don't think the Submit button should be substantially larger than the others. It could just be the same size.

Thanks
dkl
Comment 12 Bram Pitoyo [:bram] 2013-07-11 23:06:47 PDT
Created attachment 774473 [details]
global.css

(In reply to David Lawrence [:dkl] from comment #11)
> Would it be possible to make the blue buttons not quite so large? They look
> huge when surrounded by normal labels and other text.
> […] I don't think the Submit button should be
> substantially larger than the others. It could just be the same size.

Yes. Attached is the CSS correction to this. I have reduced the text size on every button as well as its padding values, so they look more in line with the surrounding text.

I have also made the submit button the same size as the rest. I’m not sure why it was sized differently in the first place. Perhaps it was a design artifact?


> some of the buttons should not be buttons at all such as adding flags and
> attachments in enter_bug.cgi. Maybe simply a link instead of a rotating
> arrow?

Good point. To do this, we’d have to make the change in the codebase (namely, changing the <button> and <input> elements to plain old <a>. Styling buttons like a link via CSS is certainly possible, but would involve targeting very specific elements.

If you ask me, I would personally prefer changing the page elements themselves, but in case doing this is very hard, we could probably tweak on CSS.
Comment 13 David Lawrence [:dkl] 2013-07-12 13:49:28 PDT
(In reply to Bram Pitoyo [:bram] from comment #12) 
> Yes. Attached is the CSS correction to this. I have reduced the text size on
> every button as well as its padding values, so they look more in line with
> the surrounding text.
> 
> I have also made the submit button the same size as the rest. I’m not sure
> why it was sized differently in the first place. Perhaps it was a design
> artifact?

Sorry to nit-pick but we may need to increase the buttons back up slightly as they are not smaller that the text area they are next to. Ideally if they can be the same height that would be great. Attaching screenshot to illustrate what I mean. Again, sorry to nit.

> > some of the buttons should not be buttons at all such as adding flags and
> > attachments in enter_bug.cgi. Maybe simply a link instead of a rotating
> > arrow?
> 
> Good point. To do this, we’d have to make the change in the codebase
> (namely, changing the <button> and <input> elements to plain old <a>.
> Styling buttons like a link via CSS is certainly possible, but would involve
> targeting very specific elements.
> 
> If you ask me, I would personally prefer changing the page elements
> themselves, but in case doing this is very hard, we could probably tweak on
> CSS.

We are fine with that where necessary so I don't see an issue. Certain pages such as enter_bug.cgi and others are already pretty chopped up from their upstream counterparts so we definitely are not against it.

dkl
Comment 14 David Lawrence [:dkl] 2013-07-12 13:50:11 PDT
Created attachment 774887 [details]
screenshot showing small button next to text area
Comment 15 Bram Pitoyo [:bram] 2013-07-14 14:42:58 PDT
Created attachment 775394 [details]
global.css

> […] we may need to increase the buttons back up slightly as
> they are not smaller that the text area they are next to […]

That was my concern, as well, in making the button size too small for the textboxes, we’d then have to worry about vertically aligning them. The new CSS fixes this problem.
Comment 16 David Lawrence [:dkl] 2013-07-25 13:45:33 PDT
Created attachment 781204 [details]
Screenshot from 2013-07-25 16:39:47.png

Most buttons look fine now except for the commit buttons on the enter_bug.cgi and show_bug.cgi pages. I am attaching screenshots to illustrate the issue. Looks like 

show_bug.cgi:
<input id="commit_top" type="submit" value="Save Changes"></input>

enter_bug.cgi:
<input id="commit" type="submit" value="Submit Bug"></input>

Looks the offending CSS in skins/contrib/Mozilla/global.css is:

#commit, #commit_top {
    height: 48px;
    line-height: 48px;
    padding: 0px 24px;
}

dkl
Comment 17 David Lawrence [:dkl] 2013-07-25 13:45:57 PDT
Created attachment 781205 [details]
Screenshot from 2013-07-25 16:39:12.png
Comment 18 Bram Pitoyo [:bram] 2013-07-25 21:03:45 PDT
Created attachment 781459 [details]
Enter bug - advanced fields
Comment 19 Bram Pitoyo [:bram] 2013-07-25 21:04:02 PDT
Created attachment 781460 [details]
Show bug - comment form
Comment 20 Bram Pitoyo [:bram] 2013-07-25 21:08:56 PDT
(In reply to David Lawrence [:dkl] from comment #16)
> Most buttons look fine now except for the commit buttons on the
> enter_bug.cgi and show_bug.cgi pages. I am attaching screenshots to
> illustrate the issue.

Hi David,

I have no idea what went wrong in your page. The css that I submitted on attachment 775394 [details] didn’t contain the "height: 48px;" value, so all the button throughout the site should have the same size.

On comment 18 and comment 19, you can see what buttons look like when I deployed the CSS on my test pages.
Comment 21 David Lawrence [:dkl] 2013-07-26 12:45:20 PDT
Ok. I was not using the latest version and it also was not in the current production code. I have committed your recent fixes so we can again close this out and work on the other remaining issues.

dkl
Comment 22 David Lawrence [:dkl] 2013-07-26 12:45:34 PDT
And this time I close :)

Note You need to log in before you can comment on or make changes to this bug.