Skip to content

Commit

Permalink
Theme: adding theme template
Browse files Browse the repository at this point in the history
  • Loading branch information
Garneauma committed Jul 18, 2024
1 parent 10fb183 commit 6dd44be
Show file tree
Hide file tree
Showing 14 changed files with 1,057 additions and 0 deletions.
199 changes: 199 additions & 0 deletions _data/templates.json
Original file line number Diff line number Diff line change
Expand Up @@ -1503,6 +1503,205 @@
]
}
}
,{
"@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 page",
"fr": "Page de 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_ilp_1",
"name": "Theme page - Iteration 1",
"date": "2024-07",
"breaking": [
"Introduction of the page template."
],
"detectableBy": ".page-type-theme"
}
],
"changesets": [
{
"@id": "_:cs_ilp_2",
"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
5 changes: 5 additions & 0 deletions sites/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,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/theme-topic/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,7 @@
@import "../components/gc-most-requested/screen-md-min";

@import "../templates/theme-topic/screen-md-min";
@import "../templates/theme/screen-md-min";

@import "wet-boew/src/base/proximity/screen-md-min";
}
Expand All @@ -346,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
90 changes: 90 additions & 0 deletions templates/theme/_base.scss
Original file line number Diff line number Diff line change
@@ -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 {
#menuTrigger {
border-radius: 0;
display: block;
margin-bottom: 1em;
margin-left: -15px;
text-align: left;
width: calc(100% + 30px);

.glyphicon {
margin-left: 10px;
}

&.expanded .glyphicon {
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;
}
}
}
}
}
}
9 changes: 9 additions & 0 deletions templates/theme/_screen-lg-min.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/*
WET-BOEW
@title: Sidebar component
@desc: Styles specific to the sidebar component for GCWeb
*/

.page-type-theme #gridContainer {
width: 1170px;
}
41 changes: 41 additions & 0 deletions templates/theme/_screen-md-min.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/*
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: 970px;

> nav {
border-right: 5px solid #26374a;
flex: 0 0 300px;

.container {
padding: 0;
width: auto;
}

#menuTrigger {
display: none;
}

ul {
display: block !important;
}

& + section {
flex: 1 0 0%;

.container {
padding-left: 35px;
width: auto;
}
}
}
}
}
Loading

0 comments on commit 6dd44be

Please sign in to comment.