Skip to content

Commit

Permalink
Addressed some changes
Browse files Browse the repository at this point in the history
  • Loading branch information
BrahimMahadi committed Jan 17, 2025
1 parent 70a9c18 commit 202d3df
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 30 deletions.
41 changes: 22 additions & 19 deletions méli-mélo/th-empathy/empathy.html
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
---
title: Empathy theme
dateModified: 2024-04-30
dateModified: 2024-12-09
description: Empathy CSS styles
lang: en
pageclass: cnt-wdth-lmtd
css:
- https://use.fontawesome.com/releases/v5.15.4/css/all.css
- style.css
- https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.css
script:
- https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.js
- empathy.js
layout: without-h1
---
<h1 property="name" id="wb-cont" class="empathy">{{ page.title }}</h1>
Expand Down Expand Up @@ -94,13 +96,13 @@ <h4>Code</h4>
&lt;/div&gt;</code></pre>

<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">
<div class="mrgn-tp-lg">
<div class="row wb-eqht-grd gc-empathy provisional wb-init">
<div class="col-xs-12 col-md-8 empathy services-and-information small">
<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>
<h4><a href="#" class="stretched-link">Preparing for end of life</a></h4>
<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>
Expand All @@ -109,31 +111,31 @@ <h3>Life Journey Home Page Layout</h3>

<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">Notify of a death</h2></a>
<h4><a href="#" class="stretched-link">Notify of a death</a></h4>
<p>Programs and departments to notify to cancel benefits or return ineligible benefits.</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<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>
<h4><a href="#" class="stretched-link">Benefits and Programs</a></h4>
<p>Applying for benefits to which you may be entitled following a death.</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<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">Representing someone who died</h2></a>
<h4><a href="#" class="stretched-link">Representing someone who died</a></h4>
<p>The legal, financial, estate planning, and other aspects of representing someone who has died.</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<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">Taxes and finances related to death</h2></a>
<h4><a href="#" class="stretched-link">Taxes and finances related to death</a></h4>
<p>Information on managing finances of an individual who died, including preparing and filing their taxes.
</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
Expand All @@ -142,23 +144,23 @@ <h3>Life Journey Home Page Layout</h3>

<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">Estates and wills</h2></a>
<h4><a href="#" class="stretched-link">Estates and wills</a></h4>
<p>Find information about estate planning and preparing a will, as well as what to do when there is no will.</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<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">Death-related documents</h2></a>
<p>Documents you may need to obtain following a death.</p><br>
<h4><a href="#" class="stretched-link">Death-related documents</a></h4>
<p>Documents you may need to obtain following a death.</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<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">Contacting services</h2></a>
<h4><a href="#" class="stretched-link">Contacting services</a></h4>
<p>Contact information for various federal or provincial programs, departments, or agencies.</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
Expand All @@ -172,18 +174,19 @@ <h2>Someone died, <br>what do I do?</h2>
<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?">
<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?">
</div>
</div>
</div>
<h4>Code</h4>
<pre><code>&lt;div class="mrgn-tp-lg container"&gt;
&lt;div class="row wb-eqht-grd"&gt;
&lt;div class="col-xs-12 col-md-8 empathy main-content small"&gt;
<div class="wb-prettify all-pre hide"></div>
<pre><code>&lt;div class="mrgn-tp-lg"&gt;
&lt;div class="row wb-eqht-grd gc-empathy provisional wb-init"&gt;
&lt;div class="col-xs-12 col-md-8 empathy services-and-information small"&gt;
&lt;div class="row wb-eqht-grd"&gt;
&lt;div class="col-sm-12 col-md-6 mrgn-bttm-lg"&gt;
&lt;div class="empathy cards h-100 full-width"&gt;
&lt;a href="#" class="stretched-link"&gt;&lt;h2 class="h4"&gt; Lorem ipsum &lt;/h2&gt;&lt;/a&gt;
&lt;h4&gt;&lt;a href="#" class="stretched-link"&gt; Lorem ipsum &lt;/a&gt;&lt;/h4&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectet&lt;/p&gt;
&lt;span class="fas fa-arrow-right" aria-hidden="true"&gt;&lt;/span&gt;
&lt;/div&gt;
Expand Down
52 changes: 52 additions & 0 deletions méli-mélo/th-empathy/empathy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* @title WET-BOEW GC Empathy quiz card mutator
* @overview Plugin used to mutate DOM elements depending on viewport size, in order to follow order accessibility criteria while respecting UI
* @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
* @author @BrahimMahadi
*/
( function( $, window, wb ) {
"use strict";

var $document = wb.doc,
componentName = "gc-empathy",
selector = ".provisional." + componentName,
initEvent = "wb-init " + selector,
$quizDiv,

/**
* @method init
* @param {jQuery Event} event Event that triggered the function call
*/
init = function( event ) {

// Start initialization
// returns DOM object = proceed with init
// returns undefined = do not proceed with init (e.g., already initialized)
var elm = wb.init( event, componentName, selector ),
$elm;

if ( elm && event.currentTarget === event.target ) {
$elm = $( elm );

$quizDiv = $( ".quiz-content" );

if ( $quizDiv ){
$quizDiv.clone().addClass( "hidden-md hidden-lg" ).insertBefore( " .services-and-information ");
$quizDiv.addClass( "hidden-xs hidden-sm" );
}

// Prevent on-load blinking on desktop
elm.classList.add( "no-blink" );

// Identify that initialization has completed
wb.ready( $elm, componentName );
}
};

// Bind the init event of the plugin
$document.on( "timerpoke.wb " + initEvent, selector, init );

// Add the timer poke to initialize the plugin
wb.add( selector );

} )( jQuery, window, wb );
7 changes: 7 additions & 0 deletions méli-mélo/th-empathy/meta.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,12 @@ pages:
language: en
path: empathy.html
sponsor: ESDC - Principal Publisher

changes:
- date: 2024-12-02
description: Life Journey home page layout, includes the code and an example to enable the home page layout to be used by current and future Life Journey projects
departmentImpact: Having this layout intergrated will allow Canada.ca to have a more streamlined and consistent theme throughout the Journey Labs projects. Currently the pages that make use of this layout have it hardcoded into the page
publicImpact: The Public at Large, the layout makes it easy for users to know that they are currently on a Journey Labs project page

output: false
---
33 changes: 22 additions & 11 deletions méli-mélo/th-empathy/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,14 @@ h1#wb-cont.empathy {
border-radius: 10px;
}

.empathy.main-content .empathy.cards:hover {
.empathy.services-and-information .empathy.cards:hover {
background-color: #6c3c9b;
color: #fff;
cursor: pointer;
}

/* Added to specifically target the link*/
.empathy.main-content .empathy.cards:hover a {
.empathy.services-and-information .empathy.cards:hover a {
color: #fff;
}

Expand All @@ -109,17 +109,28 @@ h1#wb-cont.empathy {
color: #fff;
}

/*
Might be able to accomplish something similar by adding the purple box first and floating it right -- doesn't work in a display flex
*/
@media screen and (max-width: 991px) {
.empathy.main-content {
order: 1;
}
}

@media screen and (min-width: 992px) {
.empathy.quiz-img {
width: 100%;
}
}

/* checklist.hmtl specific css */
@media screen {
.empathy.cards details summary {
border: 0;
list-style-position: outside;
margin-left: 0px;
padding-left: 0px;
}
.empathy.cards details[open] {
border: 0;
}
}

@media print {
details[open] > summary::marker {
content: "\2B1C\0020";
display: none;
}
}

0 comments on commit 202d3df

Please sign in to comment.