From 70a9c180c897a173ae5bc3cc51a9891c52c707c7 Mon Sep 17 00:00:00 2001 From: Mahadi Wachilli Date: Fri, 1 Nov 2024 14:40:31 -0400 Subject: [PATCH 1/2] Journey labs layout work --- .../th-empathy/empathy.html" | 108 ++++++++++++++++++ .../images/lloj-direction-cloud.256.png" | Bin 0 -> 13626 bytes .../th-empathy/style.css" | 39 +++++++ 3 files changed, 147 insertions(+) create mode 100644 "m\303\251li-m\303\251lo/th-empathy/images/lloj-direction-cloud.256.png" 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..d89f55711 100644 --- "a/m\303\251li-m\303\251lo/th-empathy/empathy.html" +++ "b/m\303\251li-m\303\251lo/th-empathy/empathy.html" @@ -92,3 +92,111 @@

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 container">
+    <div class="row wb-eqht-grd">
+    	<div class="col-xs-12 col-md-8 empathy main-content 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>
+    				<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/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 0000000000000000000000000000000000000000..83b870638106d2f15b773d620880010035dc5449 GIT binary patch literal 13626 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 literal 0 HcmV?d00001 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..100cf3817 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,42 @@ 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.main-content .empathy.cards:hover { + background-color: #6c3c9b; + color: #fff; + cursor: pointer; +} + +/* Added to specifically target the link*/ +.empathy.main-content .empathy.cards:hover a { + color: #fff; +} + +.empathy.quiz-content { + background-color: #6c3c9b; + 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%; + } +} From 202d3df709fe86085ff3c76361a56ac1451b858b Mon Sep 17 00:00:00 2001 From: Brahim Mahadi Wachilli Date: Mon, 9 Dec 2024 15:05:56 -0500 Subject: [PATCH 2/2] Addressed some changes --- .../th-empathy/empathy.html" | 41 ++++++++------- .../th-empathy/empathy.js" | 52 +++++++++++++++++++ "m\303\251li-m\303\251lo/th-empathy/meta.md" | 7 +++ .../th-empathy/style.css" | 33 ++++++++---- 4 files changed, 103 insertions(+), 30 deletions(-) create mode 100644 "m\303\251li-m\303\251lo/th-empathy/empathy.js" 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 d89f55711..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 }}

@@ -94,13 +96,13 @@

Code

</div>

Life Journey Home Page Layout

-
-
-
+
+
+
-

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

-

Notify of a death

 +

Notify of a death

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

@@ -117,15 +119,15 @@

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.

-

Representing someone who died

 +

Representing someone who died

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

@@ -133,7 +135,7 @@

Life Journey Home Page Layout

-

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

-

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.

@@ -150,15 +152,15 @@

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.

-

Contacting services

 +

Contacting services

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

@@ -172,18 +174,19 @@

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;
+	}
+	}