+
+
-
Preparing for end of life
+Preparing for end of life
Information on how to prepare, organize your affairs and leave instructions to your survivors.
@@ -109,7 +111,7 @@Life Journey Home Page Layout
-
@@ -117,15 +119,15 @@ Notify of a death
+Notify of a death
Programs and departments to notify to cancel benefits or return ineligible benefits.
Life Journey Home Page Layout
-
+
Benefits and Programs
-Applying for benefits to which you may be entitled following a death.
+
Benefits and Programs
+Applying for benefits to which you may be entitled following a death.
-
@@ -133,7 +135,7 @@ Representing someone who died
+Representing someone who died
The legal, financial, estate planning, and other aspects of representing someone who has died.
Life Journey Home Page Layout
-
Someone died,
Taxes and finances related to death
+Taxes and finances related to death
Information on managing finances of an individual who died, including preparing and filing their taxes.
@@ -142,7 +144,7 @@Life Journey Home Page Layout
-
@@ -150,15 +152,15 @@ Estates and wills
+Estates and wills
Find information about estate planning and preparing a will, as well as what to do when there is no will.
Life Journey Home Page Layout
-
+
Death-related documents
-Documents you may need to obtain following a death.
+
Death-related documents
+Documents you may need to obtain following a death.
-
@@ -172,18 +174,19 @@ Contacting services
+Contacting services
Contact information for various federal or provincial programs, departments, or agencies.
Someone died,
what do I do?
This will take less than a minute.
Start questionnaire - +
+ 
Code
-<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"> Lorem ipsum </h2></a>
+ <h4><a href="#" class="stretched-link"> Lorem ipsum </a></h4>
<p>Lorem ipsum dolor sit amet, consectet</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
diff --git "a/m\303\251li-m\303\251lo/th-empathy/empathy.js" "b/m\303\251li-m\303\251lo/th-empathy/empathy.js"
new file mode 100644
index 000000000..e5aaf4c3a
--- /dev/null
+++ "b/m\303\251li-m\303\251lo/th-empathy/empathy.js"
@@ -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 );
diff --git "a/m\303\251li-m\303\251lo/th-empathy/meta.md" "b/m\303\251li-m\303\251lo/th-empathy/meta.md"
index 1d9d3115d..f772e0dce 100644
--- "a/m\303\251li-m\303\251lo/th-empathy/meta.md"
+++ "b/m\303\251li-m\303\251lo/th-empathy/meta.md"
@@ -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
---
diff --git "a/m\303\251li-m\303\251lo/th-empathy/style.css" "b/m\303\251li-m\303\251lo/th-empathy/style.css"
index 100cf3817..b27570ecf 100644
--- "a/m\303\251li-m\303\251lo/th-empathy/style.css"
+++ "b/m\303\251li-m\303\251lo/th-empathy/style.css"
@@ -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;
}
@@ -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;
+ }
+ }