From 239e198d1e668d5567473d7542ca334f732d4876 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Garneau?= Date: Thu, 6 Jun 2024 15:59:33 -0400 Subject: [PATCH] Theme: adding theme template --- _data/templates.json | 203 ++++++++++++++++++++++++++++ sites/layouts/documentation.html | 58 ++++++++ sites/theme.scss | 6 + templates/theme/_base.scss | 90 ++++++++++++ templates/theme/_screen-lg-min.scss | 13 ++ templates/theme/_screen-md-min.scss | 51 +++++++ templates/theme/_screen-sm-max.scss | 44 ++++++ templates/theme/index.json-ld | 203 ++++++++++++++++++++++++++++ templates/theme/theme-doc-en.html | 9 ++ templates/theme/theme-doc-fr.html | 9 ++ templates/theme/theme-en.html | 118 ++++++++++++++++ templates/theme/theme-fr.html | 118 ++++++++++++++++ templates/theme/theme-youth-en.html | 107 +++++++++++++++ templates/theme/theme-youth-fr.html | 107 +++++++++++++++ templates/theme/theme.js | 63 +++++++++ 15 files changed, 1199 insertions(+) create mode 100644 templates/theme/_base.scss create mode 100644 templates/theme/_screen-lg-min.scss create mode 100644 templates/theme/_screen-md-min.scss create mode 100644 templates/theme/_screen-sm-max.scss create mode 100644 templates/theme/index.json-ld create mode 100644 templates/theme/theme-doc-en.html create mode 100644 templates/theme/theme-doc-fr.html create mode 100644 templates/theme/theme-en.html create mode 100644 templates/theme/theme-fr.html create mode 100644 templates/theme/theme-youth-en.html create mode 100644 templates/theme/theme-youth-fr.html create mode 100644 templates/theme/theme.js diff --git a/_data/templates.json b/_data/templates.json index 37d2f8d0a..2f168e905 100644 --- a/_data/templates.json +++ b/_data/templates.json @@ -1269,6 +1269,209 @@ ] } } +,{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Theme", + "fr": "Thème" + }, + "description": { + "en": "Theme page template", + "fr": "Gabarit de page thème" + }, + "modified": "2020-02-12", + "componentName": "theme", + "status": "stable", + "version": "1.0", + "pages": { + "examples": [ + { + "title": "[Theme]", + "language": "en", + "path": "theme-en.html" + }, + { + "title": "[Thème]", + "language": "fr", + "path": "theme-fr.html" + } + ], + "docs": [ + { + "title": "Theme page", + "language": "en", + "path": "theme-doc-en.html" + }, + { + "title": "Page de thème", + "language": "fr", + "path": "theme-doc-fr.html" + } + ] + }, + "dependencies": { + "en": [ + { "title": "Most requested", "url": "https://wet-boew.github.io/GCWeb/components/gc-most-requested/gc-most-requested-doc-en.html", "component": "gc-most-requested" }, + { "title": "Services and information", "url": "https://wet-boew.github.io/GCWeb/components/gc-srvinfo/gc-srvinfo-doc-en.html", "component": "gc-srvinfo" } + ], + "fr": [ + { "title": "En demande", "url": "https://wet-boew.github.io/GCWeb/components/gc-most-requested/gc-most-requested-doc-fr.html", "component": "gc-most-requested" }, + { "title": "Services et renseignements", "url": "https://wet-boew.github.io/GCWeb/components/gc-srvinfo/gc-srvinfo-doc-fr.html", "component": "gc-srvinfo" } + ] + }, + "a11yGuidance": "No accessibility guidance.", + "variations": [ + { + "name": { + "en": "Theme page", + "fr": "Page de thème" + }, + "status": "stable", + "description": { + "en": "Use this template as the landing page for Government of Canada institutions and organizations.", + "fr": "Utilisez ce modèle comme page d'accueil pour les institutions et organismes du gouvernement du Canada." + }, + "guidance": { + "en": "TBD", + "fr": "TBD" + }, + "iteration": "_:iteration_theme_1", + "example": [ + { + "en": { "href": "theme-en.html", "text": "Theme page" }, + "fr": { "href": "theme-fr.html", "text": "Pages de thème" } + } + ], + "implementation": [ + "_:implement_theme", + "_:implement_theme_aem" + ], + "history": [ + { + "en": "July 2024 - Introduction of the new theme template.", + "fr": "Juillet 2024 - Introduction du nouveau gabarit de page thème." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_theme", + "iteration": "_:iteration_theme_1", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for developers/publishers adding the template manually.", + "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le gabarit manuellement." + }, + "instructions": { + "en": [ + "Add the CSS class .page-type-theme to the page's <body> element.", + "The CSS class .active must be added to the current page's <li>.", + "Refer to the working example for a code sample.", + "Refer to the working example and guidance for more information on how to implement this page template." + ], + "fr": [ + "Ajoutez la classe CSS .page-type-theme sur l'élément <body> de la page.", + "La classe CSS .active doit être ajoutée au <li> de la page courante.", + "Reportez-vous à l'exemple pratique pour un exemple de code.", + "Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page." + ] + }, + "notes": { + "en": [ + "Not adding the required CSS class (.page-type-theme) will result in the styles specific to this template not being applied." + ], + "fr": [ + "Si vous n'ajoutez pas la classe CSS requise (.page-type-theme), les styles spécifiques à ce gabarit ne seront pas appliqués." + ] + } + }, + { + "@id": "_:implement_theme_aem", + "iteration": "_:iteration_theme_1", + "name": { + "en": "AEM users", + "fr": "Utilisateurs AEM" + }, + "introduction": { + "en": "This implementation is meant for publishers adding the template manually into an AEM page.", + "fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM." + }, + "instructions": { + "en": [ + "TBD" + ], + "fr": [ + "TBD" + ] + }, + "notes": { + "en": [ + "For a more detailed implementation guide, a document has been created on the AEM learning material on GCPedia, which includes screenshots and detailed step by step instructions." + ], + "fr": [ + "Pour un guide de mise en œuvre plus détaillé, un document a été créé dans la section du matériel d'apprentissage d'AEM sur GCPedia, qui comprend des captures d'écran et des instructions détaillées étape par étape." + ] + }, + "ajaxSourceCode": { + "en": "theme-en.html main > *:not(.pagedetails)", + "fr": "theme-fr.html main > *:not(.pagedetails)" + } + } + ], + "iteration": [ + { + "@id": "_:iteration_theme_1", + "name": "Theme page - Iteration 1", + "date": "2024-07", + "breaking": [ + "Introduction of the page template." + ], + "detectableBy": ".page-type-theme", + "notes": [ + "The H1 is exempt from the default styling (bottom red line). Confirmed by DTO on July 17th, 2024.", + "The breadcrumbs has specific styling only for Theme pages. Confirmed by DTO on July 8th, 2024." + ] + } + ], + "changesets": [ + { + "@id": "_:cs_theme", + "name": "Theme page", + "status": "stable", + "baseOnIteration": "_:iteration_theme_1", + "detectableBy": ".page-type-theme", + "layout": [ + "On larger screens, navigation on the left and page content on the right.", + "In the page content section, from top to bottom: page title, most requested, services and information." + ], + "style": [ + "The breadcrumbs first element has a left dark blue border.", + "The left navigation's active page has a dark-blue background and white text.", + "A vertical blue bar separates the left navigation from the content on the right.", + "On larger screens, the most requested component's heading is above the list rather than to the left." + ], + "semantic": "h2 + (ul > li)", + "behaviour": "On smaller screens, the navigation is hidden by default and is replaced by a \"Menu\" button which can be clicked to toggle the visibility of the navigation.", + "basic": "On smaller screens the navigation is always visible and the button to toggle the navigation is hidden.", + "context": "This template is only meant for Theme pages.", + "static": [ + "Menu", + "Toggle Menu", + "Basculer le menu" + ] + } + ] +} ,{ "@context": { "@version": 1.1, diff --git a/sites/layouts/documentation.html b/sites/layouts/documentation.html index da8b42a4b..a5304bc10 100644 --- a/sites/layouts/documentation.html +++ b/sites/layouts/documentation.html @@ -2126,6 +2126,44 @@

{% if lng == "fr" %}Itérations{% else %}Iterations{% endif %}

] } ] + }, + { + "about": "/notes", + "dd14": "Notes", + "@type": "rdf:Alt", + "mapping": [ + { + "template": "[data-notes-none]", + "test": "fn:guessType", + "value": "/notes", + "expect": "undefined" + }, + { + "template": "[data-notes-description]", + "test": "fn:guessType", + "value": "/notes", + "expect": "xsd:string", + "mapping": [ + { "selector": "dd", "value": "/", "isHTML": true } + ] + }, + { + "template": "[data-notes-list]", + "test": "fn:guessType", + "value": "/notes", + "expect": "rdfs:Container", + "mapping": [ + { + "template": "template", + "value": "/", + "mapping": [ + { "selector": "li", "value": "/@value", "isHTML": true } + ] + } + ] + } + + ] } ] }'> @@ -2205,6 +2243,26 @@

{% if lng == "fr" %}Itérations{% else %}Iterations{% endif %}

+ + + + + diff --git a/sites/theme.scss b/sites/theme.scss index c3aa3bbe4..2cccd2651 100644 --- a/sites/theme.scss +++ b/sites/theme.scss @@ -205,6 +205,7 @@ @import "../templates/news/base"; @import "../templates/application/base"; @import "../templates/institutional-landing/base"; +@import "../templates/theme/base"; /*! Core - Utilities */ @@ -274,6 +275,7 @@ @import "../templates/home/screen-sm-max"; @import "../templates/institutional-landing/screen-sm-max"; + @import "../templates/theme/screen-sm-max"; } /* Medium view and under */ @@ -332,6 +334,8 @@ @import "../components/gc-subway/screen-md-min"; @import "../components/gc-most-requested/screen-md-min"; + @import "../templates/theme/screen-md-min"; + @import "wet-boew/src/base/proximity/screen-md-min"; } @@ -345,6 +349,8 @@ @import "../components/header-rwd/screen-lg-min"; @import "../components/equalheight/screen-lg-min"; + @import "../templates/theme/screen-lg-min"; + @import "wet-boew/src/base/proximity/screen-lg-min"; } diff --git a/templates/theme/_base.scss b/templates/theme/_base.scss new file mode 100644 index 000000000..860ec8a49 --- /dev/null +++ b/templates/theme/_base.scss @@ -0,0 +1,90 @@ +/* + WET-BOEW + @title: Theme template + @desc: Styles specific to the Theme template for GCWeb +*/ + +.page-type-theme { + #wb-bc { + li:first-child a { + border-left: solid #26374a 5px; + padding-left: 8px; + } + + .breadcrumb { + margin-bottom: 15px; + } + } + + #gridContainer { + > nav { + #menuBtn { + border-radius: 0; + display: block; + margin-bottom: 1em; + margin-left: -15px; + text-align: left; + width: calc(100% + 30px); + + .glyphicon-chevron-down { + margin-left: 10px; + } + + &.expanded .glyphicon-chevron-down { + transform: rotate(180deg) translateY(2px); + } + + // Les items du menu sont affichés par défaut en mode basic HTML, donc il n'est pas nécessaire d'afficher le bouton menu car il ne sera pas fonctionnel + .wb-disable & { + display: none; + } + } + + li { + a { + color: $link-color; + display: block; + font-size: 16px; + line-height: 1.65em; + padding: 10px 14px; + text-decoration: none; + + &:hover { + background-color: #f5f5f5; + color: $button-blue; + text-decoration: underline; + } + } + + &.active { + a, a:hover { + background-color: #26374a; + color: #fff; + } + + a:focus { + outline: 5px auto #fff; + outline-offset: -5px; + } + } + } + + & + section { + h1#wb-cont { + border: none; + font-size: 1.2em; + line-height: 1.1; + margin: 10px 0 11.5px; + } + + .gc-most-requested { + h2 { + float: none; + font-size: 1em; + width: auto; + } + } + } + } + } +} diff --git a/templates/theme/_screen-lg-min.scss b/templates/theme/_screen-lg-min.scss new file mode 100644 index 000000000..8281e88e9 --- /dev/null +++ b/templates/theme/_screen-lg-min.scss @@ -0,0 +1,13 @@ +/* + WET-BOEW + @title: Sidebar component + @desc: Styles specific to the sidebar component for GCWeb +*/ + +.page-type-theme #gridContainer { + width: $container-lg; + + > nav + section .gc-most-requested::after { + width: calc( (100vw - #{$container-lg} + 15px)/2 ); + } +} diff --git a/templates/theme/_screen-md-min.scss b/templates/theme/_screen-md-min.scss new file mode 100644 index 000000000..6c00d3e08 --- /dev/null +++ b/templates/theme/_screen-md-min.scss @@ -0,0 +1,51 @@ +/* + WET-BOEW + @title: theme component + @desc: Styles specific to the theme component for GCWeb +*/ + +.page-type-theme { + #gridContainer { + display: flex; + margin: 0 auto; + padding: 0 15px; + width: $container-md; + + > nav { + border-right: 5px solid #26374a; + flex: 0 0 300px; + + .container { + padding: 0; + width: auto; + } + + #menuBtn { + display: none; + } + + & + section { + flex: 1 0 0%; + + .container { + padding-left: 35px; + width: auto; + } + + .gc-most-requested { + position: relative; + + &::after { + background-color: #f5f5f5; + bottom: 0; + content: ""; + left: calc(100% - 1px); + position: absolute; + top: 0; + width: calc( (100vw - #{$container-md} + 15px)/2 ); + } + } + } + } + } +} diff --git a/templates/theme/_screen-sm-max.scss b/templates/theme/_screen-sm-max.scss new file mode 100644 index 000000000..4102ed881 --- /dev/null +++ b/templates/theme/_screen-sm-max.scss @@ -0,0 +1,44 @@ +/* + WET-BOEW + @title: theme component + @desc: Styles specific to the theme component for GCWeb +*/ + +.page-type-theme { + #gridContainer { + > nav { + #menuBtn.expanded + ul { + display: block; + } + + ul { + display: none; + + .wb-disable & { + display: block; + } + + li { + border-bottom: #f5f5f5 solid 1px; + position: relative; + + a { + &::after { + content: "\203A"; + font-size: 1.5em; + margin-left: 10px; + position: absolute; + right: 14px; + top: 50%; + transform: translateY(-50%); + } + } + + &.active a::after { + display: none; + } + } + } + } + } +} diff --git a/templates/theme/index.json-ld b/templates/theme/index.json-ld new file mode 100644 index 000000000..4e8019db1 --- /dev/null +++ b/templates/theme/index.json-ld @@ -0,0 +1,203 @@ +{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Theme", + "fr": "Thème" + }, + "description": { + "en": "Theme page template", + "fr": "Gabarit de page thème" + }, + "modified": "2020-02-12", + "componentName": "theme", + "status": "stable", + "version": "1.0", + "pages": { + "examples": [ + { + "title": "[Theme]", + "language": "en", + "path": "theme-en.html" + }, + { + "title": "[Thème]", + "language": "fr", + "path": "theme-fr.html" + } + ], + "docs": [ + { + "title": "Theme page", + "language": "en", + "path": "theme-doc-en.html" + }, + { + "title": "Page de thème", + "language": "fr", + "path": "theme-doc-fr.html" + } + ] + }, + "dependencies": { + "en": [ + { "title": "Most requested", "url": "https://wet-boew.github.io/GCWeb/components/gc-most-requested/gc-most-requested-doc-en.html", "component": "gc-most-requested" }, + { "title": "Services and information", "url": "https://wet-boew.github.io/GCWeb/components/gc-srvinfo/gc-srvinfo-doc-en.html", "component": "gc-srvinfo" } + ], + "fr": [ + { "title": "En demande", "url": "https://wet-boew.github.io/GCWeb/components/gc-most-requested/gc-most-requested-doc-fr.html", "component": "gc-most-requested" }, + { "title": "Services et renseignements", "url": "https://wet-boew.github.io/GCWeb/components/gc-srvinfo/gc-srvinfo-doc-fr.html", "component": "gc-srvinfo" } + ] + }, + "a11yGuidance": "No accessibility guidance.", + "variations": [ + { + "name": { + "en": "Theme page", + "fr": "Page de thème" + }, + "status": "stable", + "description": { + "en": "Use this template as the landing page for Government of Canada institutions and organizations.", + "fr": "Utilisez ce modèle comme page d'accueil pour les institutions et organismes du gouvernement du Canada." + }, + "guidance": { + "en": "TBD", + "fr": "TBD" + }, + "iteration": "_:iteration_theme_1", + "example": [ + { + "en": { "href": "theme-en.html", "text": "Theme page" }, + "fr": { "href": "theme-fr.html", "text": "Pages de thème" } + } + ], + "implementation": [ + "_:implement_theme", + "_:implement_theme_aem" + ], + "history": [ + { + "en": "July 2024 - Introduction of the new theme template.", + "fr": "Juillet 2024 - Introduction du nouveau gabarit de page thème." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_theme", + "iteration": "_:iteration_theme_1", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for developers/publishers adding the template manually.", + "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le gabarit manuellement." + }, + "instructions": { + "en": [ + "Add the CSS class .page-type-theme to the page's <body> element.", + "The CSS class .active must be added to the current page's <li>.", + "Refer to the working example for a code sample.", + "Refer to the working example and guidance for more information on how to implement this page template." + ], + "fr": [ + "Ajoutez la classe CSS .page-type-theme sur l'élément <body> de la page.", + "La classe CSS .active doit être ajoutée au <li> de la page courante.", + "Reportez-vous à l'exemple pratique pour un exemple de code.", + "Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page." + ] + }, + "notes": { + "en": [ + "Not adding the required CSS class (.page-type-theme) will result in the styles specific to this template not being applied." + ], + "fr": [ + "Si vous n'ajoutez pas la classe CSS requise (.page-type-theme), les styles spécifiques à ce gabarit ne seront pas appliqués." + ] + } + }, + { + "@id": "_:implement_theme_aem", + "iteration": "_:iteration_theme_1", + "name": { + "en": "AEM users", + "fr": "Utilisateurs AEM" + }, + "introduction": { + "en": "This implementation is meant for publishers adding the template manually into an AEM page.", + "fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM." + }, + "instructions": { + "en": [ + "TBD" + ], + "fr": [ + "TBD" + ] + }, + "notes": { + "en": [ + "For a more detailed implementation guide, a document has been created on the AEM learning material on GCPedia, which includes screenshots and detailed step by step instructions." + ], + "fr": [ + "Pour un guide de mise en œuvre plus détaillé, un document a été créé dans la section du matériel d'apprentissage d'AEM sur GCPedia, qui comprend des captures d'écran et des instructions détaillées étape par étape." + ] + }, + "ajaxSourceCode": { + "en": "theme-en.html main > *:not(.pagedetails)", + "fr": "theme-fr.html main > *:not(.pagedetails)" + } + } + ], + "iteration": [ + { + "@id": "_:iteration_theme_1", + "name": "Theme page - Iteration 1", + "date": "2024-07", + "breaking": [ + "Introduction of the page template." + ], + "detectableBy": ".page-type-theme", + "notes": [ + "The H1 is exempt from the default styling (bottom red line). Confirmed by DTO on July 17th, 2024.", + "The breadcrumbs has specific styling only for Theme pages. Confirmed by DTO on July 8th, 2024." + ] + } + ], + "changesets": [ + { + "@id": "_:cs_theme", + "name": "Theme page", + "status": "stable", + "baseOnIteration": "_:iteration_theme_1", + "detectableBy": ".page-type-theme", + "layout": [ + "On larger screens, navigation on the left and page content on the right.", + "In the page content section, from top to bottom: page title, most requested, services and information." + ], + "style": [ + "The breadcrumbs first element has a left dark blue border.", + "The left navigation's active page has a dark-blue background and white text.", + "A vertical blue bar separates the left navigation from the content on the right.", + "On larger screens, the most requested component's heading is above the list rather than to the left." + ], + "semantic": "h2 + (ul > li)", + "behaviour": "On smaller screens, the navigation is hidden by default and is replaced by a \"Menu\" button which can be clicked to toggle the visibility of the navigation.", + "basic": "On smaller screens the navigation is always visible and the button to toggle the navigation is hidden.", + "context": "This template is only meant for Theme pages.", + "static": [ + "Menu", + "Toggle Menu", + "Basculer le menu" + ] + } + ] +} diff --git a/templates/theme/theme-doc-en.html b/templates/theme/theme-doc-en.html new file mode 100644 index 000000000..bc36195d8 --- /dev/null +++ b/templates/theme/theme-doc-en.html @@ -0,0 +1,9 @@ +--- +title: Theme +description: Documentation for the theme page template. +language: en +altLangPage: theme-doc-fr.html +dateModified: 2024-06-10 +layout: documentation +index_json: index.json-ld +--- diff --git a/templates/theme/theme-doc-fr.html b/templates/theme/theme-doc-fr.html new file mode 100644 index 000000000..dafc34042 --- /dev/null +++ b/templates/theme/theme-doc-fr.html @@ -0,0 +1,9 @@ +--- +title: Thème +description: Documentation du gabarit de page de thème. +language: fr +altLangPage: theme-doc-en.html +dateModified: 2024-06-10 +layout: documentation +index_json: index.json-ld +--- diff --git a/templates/theme/theme-en.html b/templates/theme/theme-en.html new file mode 100644 index 000000000..4b8804363 --- /dev/null +++ b/templates/theme/theme-en.html @@ -0,0 +1,118 @@ +--- +{ + "title": "[Theme]", + "language": "en", + "layout": "no-container", + "altLangPage": "theme-fr.html", + "overwriteBreadcrumbs": true, + "dateModified": "2024-06-10", + "pageclass": "page-type-theme", + "auth": { + "type": "contextual", + "link": "https://emploisfp-psjobs.cfp-psc.gc.ca/psrs-srfp/applicant/page1710", + "label": "Sign in", + "labelExtended": "Sign in to Jobs" + }, + "contextualFooter": { + "title": "Jobs", + "links": [ + { + "url": "https://www.jobbank.gc.ca/login", + "text": "Job Bank" + }, + { + "url": "https://www.canada.ca/en/services/jobs/opportunities/government.html", + "text": "Government of Canada jobs" + }, + { + "url": "https://www.canada.ca/en/services/jobs/opportunities/student.html", + "text": "Student employment" + } + ] + } +} +--- + +
+ +
+
+

Jobs

+
+
+
+

Most requested

+ +
+
+
+
+

Services and information

+
+
+

Find a job

+

Search for jobs in Canada, apply or extend a work permit, get a Social Insurance Number (SIN), a criminal record check or security clearance.

+
+
+

Funding for jobs and training

+

Find funding programs, grants and contributions that help support jobs, training, and social development.

+
+
+

Training

+

Information on education, training, financial assistance, support for apprentices, and the skills needed to find and keep a job.

+
+
+

Hiring and managing employees

+

Information on payroll, wages and other human resources obligations and advice on recruiting, training and managing employees.

+
+
+

Starting a business

+

Information on what to consider before starting a business, including registration, business plan templates, regulations, and incorporation.

+
+
+

Workplace standards

+

Federal and provincial labour laws, workplace standards, federal health and safety standards and labour relations programs.

+
+
+

Employment Insurance benefits and leave

+

Apply for Employment Insurance (EI) temporary benefits for workers, caregivers, sickness, fishing, maternity and parental EI. Submit your EI report.

+
+
+

Pensions and retirement

+

Employer and personal pensions, federal benefits and registered retirement savings plans and tools to help you plan for retirement information.

+
+
+
+
+
+
diff --git a/templates/theme/theme-fr.html b/templates/theme/theme-fr.html new file mode 100644 index 000000000..769167767 --- /dev/null +++ b/templates/theme/theme-fr.html @@ -0,0 +1,118 @@ +--- +{ + "title": "[Thème]", + "language": "fr", + "layout": "no-container", + "altLangPage": "theme-en.html", + "overwriteBreadcrumbs": true, + "dateModified": "2024-06-10", + "pageclass": "page-type-theme", + "auth": { + "type": "contextual", + "link": "https://emploisfp-psjobs.cfp-psc.gc.ca/psrs-srfp/applicant/page1710", + "label": "Se connecter", + "labelExtended": "Se connecter à Emplois" + }, + "contextualFooter": { + "title": "Emplois", + "links": [ + { + "url": "https://www.guichetemplois.gc.ca/connexion", + "text": "Guichet-Emplois" + }, + { + "url": "https://www.canada.ca/fr/services/emplois/opportunites/gouvernement.html", + "text": "Emplois au gouvernement du Canada" + }, + { + "url": "https://www.canada.ca/fr/services/emplois/opportunites/etudiants.html", + "text": "Emplois pour étudiants" + } + ] + } +} +--- + +
+ +
+
+

Emplois

+
+
+
+

En demande

+ +
+
+
+
+

Services et renseignements

+
+
+

Trouver un emploi

+

Recherche d'emplois au Canada, trouvez des programmes d'embauche, demandez ou prolongez un permis de travail, obtenez un numéro d'assurance sociale (NAS), une vérification du casier judiciaire ou une habilitation de sécurité.

+
+
+

Financement pour les emplois et formations

+

Trouvez des programmes de financement, des subventions et des contributions et de projets d’emplois qui support les emplois, la formation et de développement social.

+
+
+

Formation

+

Renseignements sur l'éducation, la formation, l'aide financière, le soutien aux apprentis, et les compétences nécessaires pour trouver et conserver un emploi.

+
+
+

Embauche et gestion de personnel

+

Renseignements sur les retenues sur la paie, les salaires et d'autres obligations en matière de ressources humaines, et des conseils sur le recrutement, la formation et la gestion des employés.

+
+
+

Normes en milieu de travail

+

Lois fédérales et provinciales sur le travail, normes en milieu de travail, normes fédérales de santé et de sécurité et programmes sur les relations de travail.

+
+
+

Démarrage d'entreprise

+

Renseignements sur les éléments à prendre en compte avant de créer une entreprise, y compris l'enregistrement, les modèles de plans d’affaires, les réglementations et la constitution en société.

+
+
+

Prestations d'assurance-emploi et congés

+

Demandez des prestations temporaires d'assurance-emploi (AE) pour les travailleurs, les aidants naturels, la maladie, la pêche, la maternité et l'assurance parentale. Soumettez votre déclaration d'assurance-emploi.

+
+
+

Pensions et retraite

+

Régimes de pension individuelle et d'employeur, prestations fédérales et régimes enregistrés d'épargne-retraite et outils de planification de retraite.

+
+
+
+
+
+
diff --git a/templates/theme/theme-youth-en.html b/templates/theme/theme-youth-en.html new file mode 100644 index 000000000..ed1681920 --- /dev/null +++ b/templates/theme/theme-youth-en.html @@ -0,0 +1,107 @@ +--- +{ + "title": "[Theme]", + "language": "en", + "layout": "no-container", + "altLangPage": "theme-youth-fr.html", + "overwriteBreadcrumbs": true, + "dateModified": "2024-06-10", + "pageclass": "page-type-theme" +} +--- + +
+ +
+
+

Youth

+
+

Danger alert

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis earum nisi a necessitatibus blanditiis. Quae a tenetur ducimus iste voluptates!

+
+
+
+
+

Most requested

+ +
+
+
+
+

Services and information

+
+
+

Prime Minister's Youth Council

+

Everything you need to know about the Prime Minister's Youth Council.

+
+
+

Jobs

+

Job opportunities and Government of Canada hiring programs for students.

+
+
+

Student aid and education planning

+

Plan for an education, save, budget and explore student aid and career options.

+
+
+

Job training

+

Education, training, financial assistance and the skills you need to find and keep a job.

+
+
+

Travel the world

+

Plan your studies, work or travel abroad and in Canada.

+
+
+

Leadership and cultural programs

+

Work experiences, internships, park activities and language immersion programs.

+
+
+

Contribute to your community

+

Build a better future for yourself and your community by volunteering.

+
+
+

Managing your money

+

Budgeting, banking, money transfers, insurance and planning your finances.

+
+
+

Health

+

Facts about smoking, drugs, cybersafety, bullying, sex, mental health and more.

+
+
+

Youth justice

+

Learn about the youth justice system.

+
+
+
+
+
+
diff --git a/templates/theme/theme-youth-fr.html b/templates/theme/theme-youth-fr.html new file mode 100644 index 000000000..e5c9e04a3 --- /dev/null +++ b/templates/theme/theme-youth-fr.html @@ -0,0 +1,107 @@ +--- +{ + "title": "[Thème]", + "language": "fr", + "layout": "no-container", + "altLangPage": "theme-youth-en.html", + "overwriteBreadcrumbs": true, + "dateModified": "2024-06-10", + "pageclass": "page-type-theme" +} +--- + +
+ +
+
+

Jeunesse

+
+

Alerte de danger

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis earum nisi a necessitatibus blanditiis. Quae a tenetur ducimus iste voluptates!

+
+
+
+
+

En demande

+ +
+
+
+
+

Services et renseignements

+
+
+

Conseil jeunesse du premier ministre

+

Tout ce que vous devez savoir sur le Conseil jeunesse du premier ministre.

+
+
+

Emplois

+

Possibilités d'emploi et programmes d'embauche du gouvernement du Canada pour les étudiants.

+
+
+

Aide aux étudiants et planification des études

+

Planifiez vos études, économisez, établissez un budget et renseignez-vous sur l'aide offerte aux étudiants et les possibilités de carrière.

+
+
+

Formation professionnelle

+

L'éducation, la formation, l'aide financière et les compétences nécessaires pour trouver et conserver un emploi.

+
+
+

Voyager à travers le monde

+

Planifiez vos études, vos expériences de travail ou vos voyages à l'étranger et au Canada.

+
+
+

Programmes de leadership et culturels

+

Expériences de travail, stages, activités de Parcs Canada et programmes d'immersion linguistique.

+
+
+

Contribuer à votre communauté

+

Bâtissez un meilleur avenir pour vous et votre communauté en faisant du bénévolat.

+
+
+

Gérer votre argent

+

Établissement d'un budget, services bancaires, transferts d'argent, assurances et planification financière.

+
+
+

Rester en santé

+

Faits sur le tabagisme, les drogues, la cybersécurité, l'intimidation, le sexe, la santé mentale et plus encore.

+
+
+

Justice pour les jeunes

+

Renseignez-vous sur le système de justice pour les jeunes.

+
+
+
+
+
+
diff --git a/templates/theme/theme.js b/templates/theme/theme.js new file mode 100644 index 000000000..582872912 --- /dev/null +++ b/templates/theme/theme.js @@ -0,0 +1,63 @@ +/** + * @title WET-BOEW Follow us component + * @overview Plugin used to replace Twitter with "X" - Deprecated + * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + * @author @garneauma + */ +( function( $, window, wb ) { +"use strict"; + +var $document = wb.doc, + componentName = "page-type-theme", + selector = "." + componentName, + initEvent = "wb-init " + selector, + + /** + * @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 ); + + if ( elm && event.currentTarget === event.target ) { + + let themeMenuBtn = document.querySelector( "#menuBtn" ), + themeMenuIcon = themeMenuBtn.querySelector( ".glyphicon" ), + themeNavUL = document.querySelector( "#gridContainer > nav ul" ), + activePageLink = themeNavUL.querySelector( ".active a" ); + + themeNavUL.id = themeNavUL.id || wb.getId(); + activePageLink.setAttribute( "aria-current", "page" ); + themeMenuBtn.setAttribute( "aria-controls", themeNavUL.id ); + themeMenuBtn.setAttribute( "aria-expanded", "false" ); + themeMenuIcon.setAttribute( "aria-hidden", "true" ); + + // Identify that initialization has completed + wb.ready( $( elm ), componentName ); + } + }; + +// Bind the init event of the plugin +$document.on( "timerpoke.wb " + initEvent, selector, init ); + +// On click of the menu button +$document.on( "click", "#menuBtn", function( event ) { + let themeMenuBtn = event.currentTarget; + + if ( themeMenuBtn.getAttribute( "aria-expanded" ) === "true" ) { + themeMenuBtn.setAttribute( "aria-expanded", "false" ); + themeMenuBtn.classList.remove( "expanded" ); + } else { + themeMenuBtn.setAttribute( "aria-expanded", "true" ); + themeMenuBtn.classList.add( "expanded" ); + } +} ); + +// Add the timer poke to initialize the plugin +wb.add( selector ); + +} )( jQuery, window, wb );