Fix Discovery Stream layout components 2/3 and 1/3 column widths
Categories
(Firefox :: New Tab Page, defect, P2)
Tracking
()
Tracking | Status | |
---|---|---|
firefox66 | --- | wontfix |
People
(Reporter: pdahiya, Unassigned)
References
Details
List, Hero, Top Stories components when displayed in 2/3 and 1/3 column layout shows 2 column width as 608px and 1 column width as 280px with 48px pixel space in between.
This should be in sync with design spec that has 2 column and 1 column width as 592px and 296px with 48px space in between.
Comment 1•6 years ago
|
||
A suggestion from Wolasi in Slack:
my hunch is that this is the culprit
grid-column-end: span 12;
(bearbeitet)
and wrapping the full-width and two col layouts with.discovery-stream.ds-layout
i think we should have wrapper classes for full-width and two-col rather than current approach of a
single class to handle both
Comment 2•6 years ago
|
||
One of the things that I noticed when first poking at the existing CSS is that there are gutters (ie grid-column-gaps) at both the very beginning and very end of the grid, which seems to be part of the problem, and that is what Wolasi was responding to above.
Comment 3•6 years ago
|
||
To be clear, the underlying issue is using a css grid columns that span gaps. The CSS spec effectively gives the spanned gaps' width to the column. To fix the issue with css grid, the 2 column layout needs to be specified as 2 columns with differing column widths.
We won't address this for 66 but should aim to fix in 67 nightly (not for uplift).
Updated•6 years ago
|
Updated•6 years ago
|
Comment 5•6 years ago
|
||
QA Note :
Widths exceed by some px for the 2/3rd card and also looks intentional..not matching the mock.
- Like for 2/3rd card grid, requirement is 592px(per mock) but the latest FF Nightly build has 608px.
- Card borders donot have shadow (grey) per mock but the build has it.
Depends on bug 1520568.
Here is the recording : https://www.dropbox.com/home?preview=bug+-+1520568+question.mp4
Comment 6•6 years ago
|
||
Per discussion with Wolasi: It's ok to leave the build as-is:
ds-column-8: 608px + gridColumnGap: 48px + ds-column-4: 280px = 936px
The mock has different numbers for widths, but that's safe to ignore for now.
Updated•6 years ago
|
Assignee | ||
Updated•5 years ago
|
Description
•