Changes required when there are only one "part of" step by step navs #458
Conversation
| @@ -3,7 +3,9 @@ | |||
| pretitle ||= t("govuk_component.step_by_step_nav_related.part_of", default: "Part of") | |||
| %> | |||
| <% if links.any? %> | |||
| <div class="gem-c-step-nav-related" data-module="track-click"> | |||
| <div | |||
| class="gem-c-step-nav-related <% if links.length == 1 %> gem-c-step-nav-related-singular <% end %>" | |||
There was a problem hiding this comment.
Could be written more cleanly as
class="gem-c-step-nav-related <%= "gem-c-step-nav-related-singular" if links.length == 1 %>"
You might even not need the == 1 part, worth trying.
There was a problem hiding this comment.
Thanks I will update this, we'll need one as we only want it to match if length is 1
| @@ -15,6 +15,22 @@ | |||
| padding: 0; | |||
| } | |||
|
|
|||
| .gem-c-step-nav-related-singular { | |||
There was a problem hiding this comment.
This class name doesn't follow our BEM convention - should be gem-c-step-nav-related--singular.
| margin-bottom: $gutter-one-third + 3; | ||
| } | ||
|
|
||
| .gem-c-step-nav-related-singular .gem-c-step-nav-related__heading { |
There was a problem hiding this comment.
I think this whole section would be more readable if the classes were nested.
| } | ||
|
|
||
| .gem-c-step-nav-related-singular .gem-c-step-nav-related__heading { | ||
| @include _core-font-generator(19px, 19px, 19px, 1.4, 1.4, false, bold); |
There was a problem hiding this comment.
I've noticed you use the core-font-generator mixin a lot - are you aware you can use @include core-19 or @include bold-19 instead? (see here). Obviously if you want to use custom line heights etc. then that's fine, although we should use the standard mixins where reasonable, just for consistency and ease of maintenance.
There was a problem hiding this comment.
The reason why I used the core-font-generator is because we needed the related size to be consistent with the step title. https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss#L62
If I use bold-19 or core-19, the font size variable between mobile and desktop.
DilwoarH
force-pushed
the
dh-700-fix-the-step-by-step-title-sizing-and-spacing
branch
from
5147984
to
51fbef2
Compare
- Increase size of font to be the same size as the step by step headings - Increase the margin-top for the "part of" text to $gutter-two-third - Decrease the margin-bottom for the "part of" text to $gutter-one-quarter - Decrease the margin-bottom of step by step title to $gutter-one-third + 3 Change number 4 is being done as there is a padding of 7px on the show all button which makes the margin-bottom seem much larger. This should not affect cases where there are multiple step by steps. Ticket: https://trello.com/c/zlQ0Go3P/700-fix-the-step-by-step-title-sizing-and-spacing-on-mobile-when-it-appears-as-a-footer-s
DilwoarH
force-pushed
the
dh-700-fix-the-step-by-step-title-sizing-and-spacing
branch
from
51fbef2
to
877700e
Compare
|
@andysellick - updated |
DilwoarH
deleted the
dh-700-fix-the-step-by-step-title-sizing-and-spacing
branch
Adds styling for singular related step by step navs
Changes
Notes:
Change number 4 is being done as there is a padding of 7px on the show all button which makes the margin-bottom seem much larger.
This should not affect cases where there are multiple step by steps.
Ticket: https://trello.com/c/zlQ0Go3P/700-fix-the-step-by-step-title-sizing-and-spacing-on-mobile-when-it-appears-as-a-footer-s
Screenshot
Component guide for this PR:
https://govuk-publishing-compon-pr-458.herokuapp.com/component-guide/step_by_step_nav_related