[remote-dbg-next] Review CSS used for ConnectPage

RESOLVED FIXED in Firefox 64

Status

enhancement
P1
normal
RESOLVED FIXED
11 months ago
11 months ago

People

(Reporter: jdescottes, Assigned: ladybenko)

Tracking

unspecified
Firefox 64
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox64 fixed)

Details

Attachments

(3 attachments)

Follow up to Bug 1489872 

See comments in https://phabricator.services.mozilla.com/D5384#127962

- all sections in Connect should have the same width, maybe avoid hardcoding it in px
- do not render empty <ul></ul> when there are no network locations (I think we should rather render "something" such as "No network location saved" or something similar)
- use grid for connect-page__section__title
Priority: P3 → P2
Assignee: nobody → balbeza
Status: NEW → ASSIGNED
Priority: P2 → P1
Hi Victoria, I couldn't find in about:preferences a section heading with an icon, so I'm not sure how big they should be – and how separate from the text.

I have tentatively set a height of 1.25em and a margin from the text of 0.25em –what appears on the attached screenshot–, but would like your input here. Thanks! 🙏
Flags: needinfo?(victoria)
Hi Victoria, other measurements we'd need is the distance between the container and the number points, as well as the distance between those and the text (highlighted in red). Thanks!
- Fixed some values so they match what it's being used in about:preferences (font sizes, margins, etc.)
- Fixed page width in Connect page
- Refactored some rules to be more generic and not tied up to this specific component
- Now a default message appears instead of an empty <ul> when there are no network locations in the list
- Adjusted icon & alignment in the Connect sections' headings
Hi Belén, indeed, looks like there's no established pattern for these.

I like how the section heading icons look! 

As for the numbered list, I like the numbers to be left-aligned with the heading text (so looks like it just needs to be nudged left a few px). As for distance between numbers and text, I would suggest the equivalent of 8px (there's a general "multiples of 4px" grid system in Photon that I'm trying to line up with more).

Thanks!
Flags: needinfo?(victoria)
Comment on attachment 9012641 [details]
Bug 1490954 - Review Connect page CSS. r=jdescottes,daisuke

Julian Descottes [:jdescottes][:julian] has approved the revision.
Attachment #9012641 - Flags: review+
Pushed by balbeza@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/93467731a34b
Review Connect page CSS. r=jdescottes,daisuke
https://hg.mozilla.org/mozilla-central/rev/93467731a34b
Status: ASSIGNED → RESOLVED
Closed: 11 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64
You need to log in before you can comment on or make changes to this bug.