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.

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

Theme: adding theme template #2390

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
203 changes: 203 additions & 0 deletions _data/templates.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 <code>.page-type-theme</code> to the page's <code>&lt;body></code> element.",
"The CSS class <code>.active</code> must be added to the current page's <code>&lt;li></code>.",
"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 <code>.page-type-theme</code> sur l'élément <code>&lt;body></code> de la page.",
"La classe CSS <code>.active</code> doit être ajoutée au <code>&lt;li></code> 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 (<code>.page-type-theme</code>) will result in the styles specific to this template not being applied."
],
"fr": [
"Si vous n'ajoutez pas la classe CSS requise (<code>.page-type-theme</code>), 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 <a href='https://www.gcpedia.gc.ca/wiki/AEM_GC-specific_Documentation_6.5'>AEM learning material on GCPedia</a>, 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 <a href='https://www.gcpedia.gc.ca/wiki/Documentation_d%27AEM_sp%C3%A9cifique_au_GC_6.5'>matériel d'apprentissage d'AEM sur GCPedia</a>, 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 <strong>only</strong> 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,
Expand Down
58 changes: 58 additions & 0 deletions sites/layouts/documentation.html
Original file line number Diff line number Diff line change
Expand Up @@ -2147,6 +2147,44 @@ <h3>{% if lng == "fr" %}Itérations{% else %}Iterations{% endif %}</h3>
]
}
]
},
{
"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 }
]
}
]
}

]
}
]
}'>
Expand Down Expand Up @@ -2226,6 +2264,26 @@ <h3>{% if lng == "fr" %}Itérations{% else %}Iterations{% endif %}</h3>
</ul>
</dd>
</template>

<!-- Notes -->
<template data-notes-none>
<dt>Notes:</dt>
<dd>Not applicable or out of scope</dd>
</template>
<template data-notes-description>
<dt>Notes:</dt>
<dd>[[ Description ]]</dd>
</template>
<template data-notes-list>
<dt>Notes:</dt>
<dd>
<ul>
<template>
<li>[[ Description ]]</li>
</template>
</ul>
</dd>
</template>
</dl>
</details>
</template>
Expand Down
6 changes: 6 additions & 0 deletions sites/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@
@import "../templates/news/base";
@import "../templates/application/base";
@import "../templates/institutional-landing/base";
@import "../templates/theme/base";


/*! Core - Utilities */
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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";
}

Expand All @@ -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";
}

Expand Down
Loading
Loading