ER-864 card progress bar

[peterdavidhamilton]

ER-864

New resources using a %{num} variable:

• my_learning.progress.percentage
• my_learning.progress.viewed
• my_learning.progress.remaining

[viezly]

Changes preview:

Legend:

👀 Review pull request on Viezly

[peterdavidhamilton]

@jack-coggin https://github.com/DFE-Digital/ey-recovery-prototype/blob/08b9bf091cd4c1d9b1e86a23841fb8850c8208c8/app/assets/sass/bespoke/_card-progress.scss

[jack-coggin]

Looks like the maintenance page redirect is still taking place in the CI tests, causing some failures

[github-actions]

https://eyrecovery-review-pr-966.azurewebsites.net

[peterdavidhamilton]

Looks like the maintenance page redirect is still taking place in the CI tests, causing some failures

It would help if I merged/rebased my own change 😑 @jack-coggin

[instantrick]

@peterdavidhamilton Have you considered replacing the class "description" with "govuk-!-font-size-14" as this will be responsive and we won't need the extra declaration

[peterdavidhamilton]

@peterdavidhamilton Have you considered replacing the class "description" with "govuk-!-font-size-14" as this will be responsive and we won't need the extra declaration

I certainly would have before I refactored to see it was the only attribute required; but I am a fan of styling components in the CSS more than templates usually. Is there a visible difference in behaviour between the two or is it down to taste?

Not down to taste as such and there is no visible difference. It is just that we are creating a new class and bit of code to manage when there is no other styling on that element other than size and the controller for that will already exist in the core gov css.

[peterdavidhamilton]

Not down to taste as such and there is no visible difference. It is just that we are creating a new class and bit of code to manage when there is no other styling on that element other than size and the controller for that will already exist in the core gov css.

If pressed I'd actually move .govuk-heading-s out of the template and define that in the style partial. Structure in one, appearance in the other.
WW @jack-coggin D?

[jack-coggin]

Not down to taste as such and there is no visible difference. It is just that we are creating a new class and bit of code to manage when there is no other styling on that element other than size and the controller for that will already exist in the core gov css.

If pressed I'd actually move .govuk-heading-s out of the template and define that in the style partial. Structure in one, appearance in the other. WW @jack-coggin D?

My preference would be to do as much of the styling as possible in the css rather than the template - mainly for readability/maintainability

[peterdavidhamilton]

@instantrick something that breaks the lovely clean lines of SLIM is the ! in the class names which forces you to employ class=foo-!-bar which kind of irks me. @jack-coggin I bet you're not surprised 😄

[instantrick]

@instantrick something that breaks the lovely clean lines of SLIM is the ! in the class names which forces you to employ class=foo-!-bar which kind of irks me. @jack-coggin I bet you're not surprised 😄

Yep that is fair enough. I the class with -s won't push it down. For now it's fine. We're talking about saving bytes ultimately so I am happy to go with the fix of just adding the missing px in the css

[instantrick]

All looks good