Simplify #geolocate_link styling #3006
Conversation
Codecov Report
@@ Coverage Diff @@
## master #3006 +/- ##
==========================================
- Coverage 83.07% 83.07% -0.01%
==========================================
Files 246 246
Lines 15429 15429
Branches 2886 2886
==========================================
- Hits 12818 12817 -1
Misses 1695 1695
- Partials 916 917 +1
Continue to review full report at Codecov.
|
zarino
changed the title
|
Do you think it's obvious enough as a link? Feels like use my location is more a button-y thing than a link-y thing maybe and as there are no other links in view I wouldn't even realise it was a link. Dunno. Why so many |
Yeah, I’m not sure this will be the "final" style for this button, but at least this PR makes the button easier to style in future. I think the link styling will do for now, while we have discussions about all the other changes we want to make to this form. Happy to be persuaded otherwise though, if you feel strongly against it.
A good question. I assume it was there because some cobrand(s) at some point wanted to include links above the search box, and the default blue link colour didn’t have good enough contrast with the #front-main background colour. My instinct is we could just remove it, since it seems to be causing more issues than it solves right now. There’s a ticket for "considering" what to do about it: #3007. |
|
Could we underline it at least? On mobile, I'm just not sure how you'd tell the difference between it and any other text (not saying the old one was brilliant or anything, but it does at least usually look a bit like the main form "Go" button...). Sorry, had missed #3007.
|
Much less opinionated styling for #geolocate_link in core, which
means the link should look better, by default, for most cobrands.
(In particular, the link looks much better on cobrands with the more
modern style of white / off-white #front-main background, such as
highwaysengland, which was the cobrand that started off this work
to begin with.)
I’ve also reduced the specificity of the #geolocate_link rulesets
in both core and all the cobrands.
While this commit means that fewer cobrands need to override styles
on #geolocate_link, there are still 8 cobrands that have to define a
custom text colour for their #geolocate_link, because they both:
A) have a light coloured background for #front-main, and
B) want their #geolocate_link to be coloured like a normal link,
rather than inheriting the text colour of the parent element.
We might want to revisit this handling of #geolocate_link colouring and
the `#front-main a { color: inherit }` rule in _layout.scss at some
point in the future.
Fixes mysociety/societyworks#1835.
zarino
force-pushed
the
issues/commercial/1835-geolocation-button-styling
branch
2 times, most recently
from
d6e3b86
to
4331d90
Compare
The colour and text decoration of links inside `#front-main` can now be customised via `$primary_link_*` Sass variables. Text decoration is set in _base.scss (like global link text decoration) while colour is handled in _layout.scss (which is where `#front-main` is given its background colour, so likely also the time you’ll want to set a contrasting colour for links inside it). The colour variables are set to `null` by default, meaning that no colour or rules for those links will be compiled, enabling the links to inherit the global link colour style, which previously wasn’t possible. The decoration variables are set to `underline` by default, because most cobrands set their #front-main links to be the same colour as the surrounding text, so adding an underline is a sensible default. You can disable the underlines by setting `$primary_link_decoration: none` in your cobrand’s _colours.scss file, as cheshireeast and oxfordshire do. Fixes #3007.
zarino
force-pushed
the
issues/commercial/1835-geolocation-button-styling
branch
from
4331d90
to
5bf3d1b
Compare
|
Ok @dracos:
|
Fixes mysociety/fixmystreet-commercial#1835.
Reduces the amount of styling on the
#geolocate_linkin core, because we’re seeing more cobrands now (eg: bexley, bristol, bucks, lincs) where the very opinionated "dark grey button with rounded bottom corners" styling just didn’t fit and had to be overwritten, separately, again and again.Rather than keep the grey button styling in just a few cobrands, I‘ve removed it everywhere. Also took the opportunity to increase the font size, so it’s a bit more tappable on touchscreens.
Before, and after, at narrow widths:
While I was at it, I also reduced the specificity of all the
#geolocateselectors (in core and the cobrands). No need for them to be as specific as they were.