Empathy Thematic - Improve CSS for Card Pattern #2445
Conversation
BrahimMahadi
temporarily deployed
to
github-ci
GitHub Actions
Inactive
|
Pre-approved upon successful review. |
There was a problem hiding this comment.
In addition to the requested changes. Please include in the meta.md the following:
- Clear and simple explanations of the new feature, change or update;
- The impact on the sponsored department of the new feature, change or update;
- The impact on the public of the new feature, change or update.
You can refer to the "changes" property in the meta.md file of 2024-10-datatable-utilities.
| @@ -92,3 +92,111 @@ <h4>Code</h4> | |||
| <pre><code><div class="wb-frmvld provisional wb-steps quiz empathy panel-body"> | |||
| <!-- Steps Quiz Form --> | |||
| </div></code></pre> | |||
|
|
|||
| <h3>Life Journey Home Page Layout</h3> | |||
| <div class="mrgn-tp-lg container"> | |||
There was a problem hiding this comment.
Either remove this container or use the page layout without container and add containers where needed.
| <div class="mrgn-tp-lg container"> | |
| <div class="mrgn-tp-lg"> |
| <div class="row wb-eqht-grd"> | ||
| <div class="col-sm-12 col-md-6 mrgn-bttm-lg"> | ||
| <div class="empathy cards h-100 full-width"> | ||
| <a href="#" class="stretched-link"><h2 class="h4">Preparing for end of life</h6></a> |
There was a problem hiding this comment.
Anchors should be inside headings not around them (do for all items). Also, this one has an closing tag instead of .
| <a href="#" class="stretched-link"><h2 class="h4">Preparing for end of life</h6></a> | |
| <h2 class="h4"><a href="#" class="stretched-link">Preparing for end of life</a></h2> |
There was a problem hiding this comment.
Well, that heading can't be an heading level 2, it must be an heading level 4
If you absolutely need to provide an example that show a heading level 2, you can add a new page only for that example.
| <a href="#" class="stretched-link"><h2 class="h4">Preparing for end of life</h6></a> | ||
| <p>Information on how to prepare, organize your affairs and leave instructions to your survivors. | ||
| </p> | ||
| <span class="fas fa-arrow-right" aria-hidden="true"></span> |
There was a problem hiding this comment.
Add the Fontawesome CSS to the page in order for these arrows to show up.
| </div> | ||
| </div> | ||
| <h4>Code</h4> | ||
| <pre><code><div class="mrgn-tp-lg container"> |
There was a problem hiding this comment.
Add the following div to the top of the page to style the code sample.
| <pre><code><div class="mrgn-tp-lg container"> | |
| <div class="wb-prettify all-pre hide"></div> | |
| <pre><code><div class="mrgn-tp-lg container"> |
| .empathy.quiz-img { | ||
| width: 100%; | ||
| } | ||
| } |
There was a problem hiding this comment.
It seems like you are missing the custom styles for the <details> elements on the results page after the quiz. Please make sure all the custom styles for all empathy pages are taken into account.
| <div class="row wb-eqht-grd"> | ||
| <div class="col-sm-12 col-md-6 mrgn-bttm-lg"> | ||
| <div class="empathy cards h-100 full-width"> | ||
| <a href="#" class="stretched-link"><h2 class="h4">Preparing for end of life</h6></a> |
There was a problem hiding this comment.
Well, that heading can't be an heading level 2, it must be an heading level 4
If you absolutely need to provide an example that show a heading level 2, you can add a new page only for that example.
| <h3>Life Journey Home Page Layout</h3> | ||
| <div class="mrgn-tp-lg container"> | ||
| <div class="row wb-eqht-grd"> | ||
| <div class="col-xs-12 col-md-8 empathy main-content small"> |
There was a problem hiding this comment.
What mean "main-content"? Can you use a more meaningful name? That section looks like to be a "Service and information" similar section. Am I right? If so can you use a similar name.
| <div class="col-sm-12 col-md-6 mrgn-bttm-lg"> | ||
| <div class="empathy cards h-100 full-width"> | ||
| <a href="#" class="stretched-link"><h2 class="h4">Benefits and Programs</h2></a> | ||
| <p>Applying for benefits to which you may be entitled following a death.</p><br> |
There was a problem hiding this comment.
Why a <br> here and not everywhere. What is the use? If it is to position the font-awesome icon it will be preferable to put it into its own block element that don't convey any semantic, like a <div>
| <p>Applying for benefits to which you may be entitled following a death.</p><br> | |
| <p>Applying for benefits to which you may be entitled following a death.</p> |
| <p class="mrgn-tp-lg"><span class="fas fa-clock"></span> This will take less than a minute.</p> | ||
| <a href="#" class="mrgn-tp-lg btn btn-default btn-empathy btn-block btn-lg">Start questionnaire</a> | ||
|
|
||
| <img class="quiz-img mrgn-tp-lg center-block hidden-xs hidden-sm" src="./images/lloj-direction-cloud.256.png" alt="Someone died, what do I do?"> |
There was a problem hiding this comment.
The image don't load when I run this change in my local environment.
Is that image decorative or not? It seems to be decorative when I look at the inserted image.
| */ | ||
| @media screen and (max-width: 991px) { | ||
| .empathy.main-content { | ||
| order: 1; |
There was a problem hiding this comment.
That is problematic and make the content failing WCAG regarding the meaningful order Success Criteria in small device.
| order: 1; |
There was a problem hiding this comment.
Note that images are not copied over and are not included in the thématique library.
Here to see the issue is the image is not available in the compiled version of the thématique, the one linked from our méli-mélo page which is locally located here: /méli-mélo-démos/gc-thématique/th-empathy/
The following pull request was made to address CSS styles that have been injected to the landing page of the What to do when someone dies section using the Multi-Media component instead of having these styles added to the existing Empathy theme.
General checklist