Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Empathy Thematic - Improve CSS for Card Pattern #2445

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Empathy Thematic - Improve CSS for Card Pattern #2445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70a9c18
Journey labs layout work
BrahimMahadi Nov 1, 2024
202d3df
Addressed some changes
BrahimMahadi Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 112 additions & 1 deletion méli-mélo/th-empathy/empathy.html
View file
Open in desktop
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 @@ -92,3 +94,112 @@ <h4>Code</h4>
<pre><code>&lt;div class="wb-frmvld provisional wb-steps quiz empathy panel-body"&gt;
&lt;!-- Steps Quiz Form --&gt;
&lt;/div&gt;</code></pre>

<h3>Life Journey Home Page Layout</h3>
<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">
<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>
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>

<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
<div class="empathy cards h-100 full-width">
<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">
<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">
<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">
<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>
</div>
</div>

<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
<div class="empathy cards h-100 full-width">
<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">
<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">
<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>
</div>
</div>
</div>

<div class="col-xs-12 col-md-4 cards empathy quiz-content mrgn-bttm-lg">
<h2>Someone died, <br>what do I do?</h2>
<p class="mrgn-tp-lg">Answer a few simple questions for guidance on your situation.</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?">
</div>
</div>
</div>
<h4>Code</h4>
<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;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;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="col-xs-12 col-md-4 cards empathy quiz-content mrgn-bttm-lg"&gt;
&lt;h2&gt;Lorem ipsum?&lt;/h2&gt;
&lt;p class="mrgn-tp-lg"&gt;Lorem ipsum dolor sit amet, consectet&lt;/p&gt;
&lt;p class="mrgn-tp-lg"&gt;&lt;span class="fas fa-clock"&gt;&lt;/span&gt; This will take less than a minute.&lt;/p&gt;
&lt;a href="#" class="mrgn-tp-lg btn btn-default btn-empathy btn-block btn-lg"&gt;Start questionnaire&lt;/a&gt;
&lt;img class="quiz-img mrgn-tp-lg center-block hidden-xs hidden-sm" src="./images/lloj-direction-cloud.256.png" alt=""&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
52 changes: 52 additions & 0 deletions méli-mélo/th-empathy/empathy.js
View file
Open in desktop
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 );
Binary file added méli-mélo/th-empathy/images/lloj-direction-cloud.256.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions méli-mélo/th-empathy/meta.md
View file
Open in desktop
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
---
50 changes: 50 additions & 0 deletions méli-mélo/th-empathy/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,53 @@ h1#wb-cont.empathy {
color: #5c2790;;

}

/* Thematic Journey Labs homepage layout */

.empathy.cards {
padding: 20px;
box-shadow: 0px 2px 3px 0px #cccccc;
border-radius: 10px;
}

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

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

.empathy.quiz-content {
background-color: #6c3c9b;
color: #fff;
}

@media screen and (min-width: 992px) {
.empathy.quiz-img {
width: 100%;
}
}
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved

/* 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;
}
}
Loading