1330884 - Centralize #bugzilla-body for bug modal page

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: User Interface, defect, P3)

Description

[Chih-Hsuan Kuo [:tommykuo]]

Attachment: ui.jpeg

When I use the new interface on a widescreen, there is lot of space at right. I think we should add the following CSS to centralize them:

> #bugzilla-body, #footer {
>   margin-left: auto;
>   margin-right: auto;
> }

Please see the attachment!

Comment 1

[David Lawrence [:dkl]]

Nice. Would we be able to do the same with the header? So that the the content of the header (not the divider itself separating the header from the #bugzilla-body) lines up with the left and right edges of the bug modal content?

If you provide the CSS changes for both then I can incorporate it in the BMO code and make a patch for peer review.

Thanks!
dkl

Comment 2

[Dylan Hardison [:dylan] (he/him)]

(In reply to David Lawrence [:dkl] from comment #1)
> Nice. Would we be able to do the same with the header? So that the the
> content of the header (not the divider itself separating the header from the
> #bugzilla-body) lines up with the left and right edges of the bug modal
> content?

I think we want the full width for the header -- I have some ideas about making it scalable though so below a certain width items get hidden.

Comment 3

[David Lawrence [:dkl]]

(In reply to Dylan Hardison [:dylan] from comment #2)
> (In reply to David Lawrence [:dkl] from comment #1)
> > Nice. Would we be able to do the same with the header? So that the the
> > content of the header (not the divider itself separating the header from the
> > #bugzilla-body) lines up with the left and right edges of the bug modal
> > content?
> 
> I think we want the full width for the header -- I have some ideas about
> making it scalable though so below a certain width items get hidden.

I would personally rather the header and footer be the same width as the content. A lot of sites have the same layouy such as https://addons.mozilla.org/en-US/firefox/ and https://twitter.com/ as a couple of examples. I do propose moving the quickseach field out of the second two and to the top row in the center. Then have it auto-expand like I discussed at the last workweek. That would make things fit a little better in the narrower format.

dkl

Comment 4

[Chih-Hsuan Kuo [:tommykuo]]

Is the source code on https://github.com/bugzilla/bugzilla? Should I generate patch from this repo?

I also think make header be the same width with #bugzilla-body and #footer. I think we can add the following CSS to make it happend:

#header .wrapper {
+  max-width: 1024px;
+  min-width: 800px;
}

#bugzilla-body {
-  margin: 5px !important;
+  margin: 5px auto !important;
}

#footer {
-  margin-bottom: auto;
+  margin: auto auto 1em;
}

Comment 5

[Chih-Hsuan Kuo [:tommykuo]]

Some typo in comment #4.
---
I also think make header be the same width with #bugzilla-body and #footer. -> I also think making header be the same width with #bugzilla-body and #footer is better.

Comment 6

[David Lawrence [:dkl]]

(In reply to Tommy Kuo [:KuoE0] from comment #4)
> Is the source code on https://github.com/bugzilla/bugzilla? Should I
> generate patch from this repo?

Currently the Modal form only exists in the BMO code so the repo would be https://github.com/mozilla-bteam/bmo.

dkl

Comment 7

[Chih-Hsuan Kuo [:tommykuo]]

Attachment: github pull request

Comment 8

[David Lawrence [:dkl]]

Comment on attachment 8827734 [details] [review]
github pull request

r- this as we want to move the changes out of bug_modal.css and into skins/contrib/Mozilla{-Dusk}/global.css so that all content looks the same.

Comment 9

[David Lawrence [:dkl]]

(In reply to David Lawrence [:dkl] from comment #8)
> Comment on attachment 8827734 [details] [review]
> github pull request
> 
> r- this as we want to move the changes out of bug_modal.css and into
> skins/contrib/Mozilla{-Dusk}/global.css so that all content looks the same.

sorry. Meant skins/contrib/Mozilla{-OpenSans}/global.css.

Comment 10

[David Lawrence [:dkl]]

Attachment: 1330884_1.patch

Dylan, would like your opinion on this change. I personally like it but it could be controversial.

dkl

Comment 11

[Dylan Hardison [:dylan] (he/him)]

Attachment: centralized ui

I think this might box us into a corner (ha ha) with regards to making the search box expandable, as in https://dylanwh.tumblr.com/post/151516572597/bigger-and-better-search-box-on-bmo

Something for the agenda of the next meeting to be sure.

Comment 12

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8828954 [details] [diff] [review]
1330884_1.patch

I don't really like this "more" than the current one, but we should explore this a bit more.

Comment 13

[David Lawrence [:dkl]]

Attachment: 1330884_2.patch

I have increased the max-width to 1200px which does look better. I have applied the change to https://bugzilla-dev.allizom.org if anyone wants to take a look.

dkl

Comment 14

[Mark Côté [:mcote]]

That actually looks pretty good to me!

Comment 15

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8834641 [details] [diff] [review]
1330884_2.patch

r-

I don't like the way things currently are, but I also don't like this. we'll need to think about this a bit more.

Comment 16

[Dylan Hardison [:dylan] (he/him)]

Actually, apart from the dashboards having more problems with overly long strings, I sort of can handle this now.

Comment 17

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8834641 [details] [diff] [review]
1330884_2.patch

mcote: You like this too, get other people to comment on this. I'll give it tentative r+ as long as there are not a large number of strong negative reactions.

Comment 18

[Mark Côté [:mcote]]

I've got two votes that this is no worse, so far. :)

Comment 19

[Mark Côté [:mcote]]

Comment on attachment 8834641 [details] [diff] [review]
1330884_2.patch

I think we should just do this.

Comment 20

[David Lawrence [:dkl]]

Thanks for the contribution! This should go live next week.

To https://github.com/mozilla-bteam/bmo.git
   bd4c76b..ab5eef9  master -> master

dkl

Comment 21

[Dylan Hardison [:dylan] (he/him)]

We're going to want to revise this a bit -- possibly only doing it to show bug pages for a start.

To github.com:mozilla-bteam/bmo.git
   aa3c43790..d408c27e0  master -> master

Comment 22

[Robert Kaiser]

Just as a piece of feedback - for me, #header, #footer, and on show_bug the .edit_form (section with summary, status, product, component, etc.) look better when they stretch the full screen width, bug lists also profit from spanning the full width for me (some displayed fields can be quite long). On show_bug, the pieces that are fixed width like attachments and bug comments would probably profit from being centered, though.

Comment 23

[Dylan Hardison [:dylan] (he/him)]

I think the first change that the assignee suggested -- just centering the form on the bug modal page -- would be an acceptable first step. Worry about the header and footer (I think we can remove a lot of options from the footer!)
 in separate bugs. W don't need to change the content of the old pages until we're actually updating their UI.

Comment 24

[David Lawrence [:dkl]]

Attachment: 1330884_3.patch

Comment 25

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8840099 [details] [diff] [review]
1330884_3.patch

r=dylan

Comment 26

[David Lawrence [:dkl]]

To https://github.com/mozilla-bteam/bmo.git
   5a9e39a..e2134a1  master -> master

Comment 27

[:Atoll]

With this merged and deployed, on desktop, the Bugzilla window no longer stretches horizontally beyond a certain point, after which the *entire* Bugzilla page centers modally, rather than staying pinned left. Is this a side effect, or the intended effect, of this change?

(cc various users reporting the centering bug)

Comment 28

[David Lawrence [:dkl]]

(In reply to Richard Soderberg [:atoll] from comment #27)
> With this merged and deployed, on desktop, the Bugzilla window no longer
> stretches horizontally beyond a certain point, after which the *entire*
> Bugzilla page centers modally, rather than staying pinned left. Is this a
> side effect, or the intended effect, of this change?
> 
> (cc various users reporting the centering bug)

intended effect. it never extended past a certain width before, just now it is centered
instead of pinned to the left which IMO looks better.

dkl

Comment 29

[Robert Kaiser]

To be fair, the .edit_form (section with summary, status, product, component, etc.) on show_bug actually did extend further and when the bug has a long summary, whiteboard, etc. it now look much more crammed than before. For the attachment and comment sections, they look better now, though. :)

Comment 30

[:Atoll]

It's that the page now violates the "don't waste my attention" principle, by launching the content with blank space in the prime left and right attention columns. I can't look where I always have with Bugzilla for all time — the left border — because now it's just blank there. It annoys me every time I see it, because every other tab I have open uses the left side of the page for something other than blankness.

Comment 31

[Bug Butler]

Attachment: github pull request

Comment 32

[Dylan Hardison [:dylan] (he/him)]

The content of attachment 8846939 [details] has been deleted for the following reason:

mistake