clean up CSS for ds-list component
Categories
(Firefox :: New Tab Page, enhancement, P1)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox66 | --- | fixed |
People
(Reporter: dmosedale, Assigned: dmosedale)
References
Details
(Keywords: github-merged)
User Story
How to test:
* go to about:config
* search for stream.config
* set that preference to {"enabled":true,"layout_endpoint":"https://getpocket.com/v3/newtab/layout?version=1&consumer_key=40249-e88c401e1b1f2242d9e441c4&layout_variant=dev-test-all"}
* open a new tab
The first "Trending Stories" is the list to look at.
This should now match, more or less exactly, the 1st list comp at the top of the Lists page on https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Modules?node-id=9%3A15
Changes of note:
* the horizontal rule above the list should be the right color and positioned correctly
* general whitespace and positioning should match the comp
* item title is clamped at 2 lines, the info below the item title is clamped at 1
* individual horizontal lines are above all of the items except those on the top row
Known bugs are already captured as dependents of the ds-list-component bug: https://bugzilla.mozilla.org/showdependencytree.cgi?id=1514020&hide_resolved=0
Attachments
(2 files)
QA Result : Bug - 1519769.png
The List component will be landing in bug 1519766 so that we have something in tree, but there will be some rough edges. A few things will need to be cleaned up to make them match the spec are:
- make an HR appear above each row
- various whitespace cleanup
- get rid of the left-indentation of the list
|
Assignee | |
Updated•5 years ago
|
|
||
Comment 1•5 years ago
|
||
|
||
Updated•5 years ago
|
|
||
Comment 2•5 years ago
|
||
Commit pushed to master at https://github.com/mozilla/activity-stream https://github.com/mozilla/activity-stream/commit/bb9d65431203e4812958e776c6573c88a87efe31 Bug 1519769 - CSS cleanup for ds-list component (#4675), r=@ScottDowne
|
|
Assignee | |
Updated•5 years ago
|
|
|
Assignee | |
Updated•5 years ago
|
|
|
||
Comment 3•5 years ago
|
||
|
||
Comment 4•5 years ago
|
||
Hi, I have some questions wrt mock design. Added comments in the mock Numbered Lists. Will continue testing after clarification.
|
|
||
Comment 5•5 years ago
|
||
Questions clarified by @WolasiKonu.
Issues :
- There is an issue where if the item title is long, we expect to see "..." at the end of 2nd line which is missing. Attached
QA Result : Bug - 1519769.png - As per Figma (Numbered Lists design mock), expected char limit is 34 char, but this exceeds more than the limit.
Original link to the article : https://www.latimes.com/sports/la-sp-ucla-katelyn-ohashi-20190117-story.html
Tested on :
FF Nightly version : 66.0a1 (2019-01-20)
OS : Mac and Windows 10 Pro
|
|
||
Comment 6•5 years ago
•
|
||
Had an offline discussion with the team and agreeing that ellipsis and char count limit implementations will be considered as part of future release.
There's a separate issue tracked for the padding issues between ds-list-item-text and the image to the right here : https://bugzilla.mozilla.org/show_bug.cgi?id=1521888
Other than that experiment is good.
Closing as verified.
|
|
||
Updated•5 years ago
|
|
||
Updated•5 years ago
|
Description
•