882497 - [FHR] Page content should be centered on the screen, not taking up the width of the screen

Status: RESOLVED WONTFIX

(Firefox Health Report Graveyard :: Web: Health Report, defect)

Description

[Larissa Co [:lco]]

Attachment: Current FHR implmentation

see the attached screenshots. 

Right now, the elements fit the width of the screen, which makes some of the columns (like vital stats) look very wide and spread out on larger screens.

The page layout should be centered, (and perhaps there should be a maximum width for some of the elements?). Shorlander can comment on widths if you need more information.

Comment 1

[Larissa Co [:lco]]

Attachment: Intended look of the FHR page

Comment 2

[Schalk Neethling [:espressive]]

We needed to make this layout responsive and use the full width of the browser as we kept running into problems with overlapping text and things generally falling apart with some locales.

Making the layout take up the entire width and the side bar contract and expand as needed fixed a ton of issues. Also, the tips contracts and expands as other elements on the page does, the graph still does not as it is not as simple a problem to fix as the other.

There are however plans to improve the graphs responsiveness to better fit with the rest of the page.

Comment 3

[Stephen Horlander [:shorlander]]

(In reply to Schalk Neethling [:espressive] from comment #2)
> We needed to make this layout responsive and use the full width of the
> browser as we kept running into problems with overlapping text and things
> generally falling apart with some locales.
> 
> Making the layout take up the entire width and the side bar contract and
> expand as needed fixed a ton of issues. Also, the tips contracts and expands
> as other elements on the page does, the graph still does not as it is not as
> simple a problem to fix as the other.
> 
> There are however plans to improve the graphs responsiveness to better fit
> with the rest of the page.

I would like to keep it centered because now it feels very off balance. It should also have a max-width to avoid controls being very far apart, labels and values being very far apart and just generally feeling awkward; i.e. http://cl.ly/image/2W0D2o2U211h

Seems like it should be possible to let it flex and still keep it centered with a finite width? Do you happen to have any examples of locals where it breaks down?

Thanks!

Comment 4

[Larissa Co [:lco]]

Would it be possible to determine the breakpoints for shorlander's design and then make the responsive layout based on those? I understand what both sides want, and I definitely do want something responsive as well. But maybe there's a way where the margins at the sides get smaller first as the window gets smaller, while keeping correct spacing between the vital stats labels and their contents. 

I'm not really the most savvy front-end designer though, sorry if my suggestions are vague ;-) I'm happy to talk about what we can do to modify the design so that it looks good and is still responsive though.

Comment 5

[Schalk Neethling [:espressive]]

With the current layout all is good but with the previous you could try ru as an example.

Comment 6

[Schalk Neethling [:espressive]]

Also, we can totally use media queries to create break points where we reformat the layout but, with that said, we are currently getting ready to work on implementing FHR for Fx for Android. Do we want to use the current 'page' for this as well or will this be solely be for desktop.

If this is solely for desktop, we can get away with min-widths up to a certain point but, with some locales, problems start to become very apparent at widths that is not even near mobile devices.

Comment 7

[Schalk Neethling [:espressive]]

Actually one thing I was thinking of for the side bar is to use a dl instead of a ul but, I am not sure that is semantically correct. We can then have the dl and dd inline and at a defined break, change then to be block so the display below each other.

Comment 9

[Schalk Neethling [:espressive]]

FHR has seemed to have gone into slumber for various reasons and some of the bugs have remained open whilst there is no discussion happening and no action being taken, this bug then being one of them.

My question then is, what do we want to do with regards to the design/layout of FHR for Desktop. Will we continue with the full width responsive layout that currently exists, and perhaps tweak some design elements or, do we want to revisit the fixed width layout from before?

I have stated my concerns with regards to the problems we might reintroduce if we do decide to go fixed width again but, I am also completely open to discussion.