diff --git "a/m\303\251li-m\303\251lo/th-empathy/empathy.html" "b/m\303\251li-m\303\251lo/th-empathy/empathy.html" index f0c52216d..57b502dd5 100644 --- "a/m\303\251li-m\303\251lo/th-empathy/empathy.html" +++ "b/m\303\251li-m\303\251lo/th-empathy/empathy.html" @@ -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 ---

{{ page.title }}

@@ -92,3 +94,112 @@

Code

<div class="wb-frmvld provisional wb-steps quiz empathy panel-body">
     <!-- Steps Quiz Form -->
 </div>
+ +

Life Journey Home Page Layout

+
+
+
+
+
+
+

Preparing for end of life

+

Information on how to prepare, organize your affairs and leave instructions to your survivors. +

+ +
+
+ +
+
+

Notify of a death

+

Programs and departments to notify to cancel benefits or return ineligible benefits.

+ +
+
+ +
+
+

Benefits and Programs

+

Applying for benefits to which you may be entitled following a death.

+ +
+
+ +
+
+

Representing someone who died

+

The legal, financial, estate planning, and other aspects of representing someone who has died.

+ +
+
+ +
+
+

Taxes and finances related to death

+

Information on managing finances of an individual who died, including preparing and filing their taxes. +

+ +
+
+ +
+
+

Estates and wills

+

Find information about estate planning and preparing a will, as well as what to do when there is no will.

+ +
+
+ +
+
+

Death-related documents

+

Documents you may need to obtain following a death.

+ +
+
+ +
+
+

Contacting services

+

Contact information for various federal or provincial programs, departments, or agencies.

+ +
+
+
+
+ +
+

Someone died,
what do I do?

+

Answer a few simple questions for guidance on your situation.

+

This will take less than a minute.

+ Start questionnaire + + +
+
+
+

Code

+
+
<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"> Lorem ipsum </a></h4>
+    				<p>Lorem ipsum dolor sit amet, consectet</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>Lorem ipsum?</h2>
+			    <p class="mrgn-tp-lg">Lorem ipsum dolor sit amet, consectet</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="">
+		</div>
+	</div>
+</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/images/lloj-direction-cloud.256.png" "b/m\303\251li-m\303\251lo/th-empathy/images/lloj-direction-cloud.256.png" new file mode 100644 index 000000000..83b870638 Binary files /dev/null and "b/m\303\251li-m\303\251lo/th-empathy/images/lloj-direction-cloud.256.png" differ 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 fb87d73e1..b27570ecf 100644 --- "a/m\303\251li-m\303\251lo/th-empathy/style.css" +++ "b/m\303\251li-m\303\251lo/th-empathy/style.css" @@ -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%; + } +} + +/* 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; + } + }