Skip to content

Commit fafacbe

Browse files
GarneaumaGarneauma
committed
Theme: adding theme template
1 parent 6e4a488 commit fafacbe

File tree

13 files changed

+853
-0
lines changed

13 files changed

+853
-0
lines changed

‎_data/templates.json‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1503,6 +1503,205 @@
15031503
]
15041504
}
15051505
}
1506+
,{
1507+
"@context": {
1508+
"@version": 1.1,
1509+
"dct": "http://purl.org/dc/terms/",
1510+
"title": { "@id": "dct:title", "@container": "@language" },
1511+
"description": { "@id": "dct:description", "@container": "@language" },
1512+
"modified": "dct:modified"
1513+
},
1514+
"title": {
1515+
"en": "Theme page",
1516+
"fr": "Page de thème"
1517+
},
1518+
"description": {
1519+
"en": "Theme page template",
1520+
"fr": "Gabarit de page thème"
1521+
},
1522+
"modified": "2020-02-12",
1523+
"componentName": "theme",
1524+
"status": "stable",
1525+
"version": "1.0",
1526+
"pages": {
1527+
"examples": [
1528+
{
1529+
"title": "[Theme]",
1530+
"language": "en",
1531+
"path": "theme-en.html"
1532+
},
1533+
{
1534+
"title": "[Thème]",
1535+
"language": "fr",
1536+
"path": "theme-fr.html"
1537+
}
1538+
],
1539+
"docs": [
1540+
{
1541+
"title": "Theme page",
1542+
"language": "en",
1543+
"path": "theme-doc-en.html"
1544+
},
1545+
{
1546+
"title": "Page de thème",
1547+
"language": "fr",
1548+
"path": "theme-doc-fr.html"
1549+
}
1550+
]
1551+
},
1552+
"dependencies": {
1553+
"en": [
1554+
{ "title": "Most requested", "url": "https://wet-boew.github.io/GCWeb/components/gc-most-requested/gc-most-requested-doc-en.html", "component": "gc-most-requested" },
1555+
{ "title": "Services and information", "url": "https://wet-boew.github.io/GCWeb/components/gc-srvinfo/gc-srvinfo-doc-en.html", "component": "gc-srvinfo" }
1556+
],
1557+
"fr": [
1558+
{ "title": "En demande", "url": "https://wet-boew.github.io/GCWeb/components/gc-most-requested/gc-most-requested-doc-fr.html", "component": "gc-most-requested" },
1559+
{ "title": "Services et renseignements", "url": "https://wet-boew.github.io/GCWeb/components/gc-srvinfo/gc-srvinfo-doc-fr.html", "component": "gc-srvinfo" }
1560+
]
1561+
},
1562+
"a11yGuidance": "No accessibility guidance.",
1563+
"variations": [
1564+
{
1565+
"name": {
1566+
"en": "Theme page",
1567+
"fr": "Page de thème"
1568+
},
1569+
"status": "stable",
1570+
"description": {
1571+
"en": "Use this template as the landing page for Government of Canada institutions and organizations.",
1572+
"fr": "Utilisez ce modèle comme page d'accueil pour les institutions et organismes du gouvernement du Canada."
1573+
},
1574+
"guidance": {
1575+
"en": "TBD",
1576+
"fr": "TBD"
1577+
},
1578+
"iteration": "_:iteration_theme_1",
1579+
"example": [
1580+
{
1581+
"en": { "href": "theme-en.html", "text": "Theme page" },
1582+
"fr": { "href": "theme-fr.html", "text": "Pages de thème" }
1583+
}
1584+
],
1585+
"implementation": [
1586+
"_:implement_theme",
1587+
"_:implement_theme_aem"
1588+
],
1589+
"history": [
1590+
{
1591+
"en": "July 2024 - Introduction of the new theme template.",
1592+
"fr": "Juillet 2024 - Introduction du nouveau gabarit de page thème."
1593+
}
1594+
]
1595+
}
1596+
],
1597+
"implementation": [
1598+
{
1599+
"@id": "_:implement_theme",
1600+
"iteration": "_:iteration_theme_1",
1601+
"name": {
1602+
"en": "Standard",
1603+
"fr": "Standard"
1604+
},
1605+
"introduction": {
1606+
"en": "This implementation is meant for developers/publishers adding the template manually.",
1607+
"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le gabarit manuellement."
1608+
},
1609+
"instructions": {
1610+
"en": [
1611+
"Add the CSS class <code>.page-type-theme</code> to the page's <code>&lt;body></code> element.",
1612+
"The CSS class <code>.active</code> must be added to the current page's <code>&lt;li></code>.",
1613+
"Refer to the working example for a code sample.",
1614+
"Refer to the working example and guidance for more information on how to implement this page template."
1615+
],
1616+
"fr": [
1617+
"Ajoutez la classe CSS <code>.page-type-theme</code> sur l'élément <code>&lt;body></code> de la page.",
1618+
"La classe CSS <code>.active</code> doit être ajoutée au <code>&lt;li></code> de la page courante.",
1619+
"Reportez-vous à l'exemple pratique pour un exemple de code.",
1620+
"Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page."
1621+
]
1622+
},
1623+
"notes": {
1624+
"en": [
1625+
"Not adding the required CSS class (<code>.page-type-theme</code>) will result in the styles specific to this template not being applied."
1626+
],
1627+
"fr": [
1628+
"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."
1629+
]
1630+
}
1631+
},
1632+
{
1633+
"@id": "_:implement_theme_aem",
1634+
"iteration": "_:iteration_theme_1",
1635+
"name": {
1636+
"en": "AEM users",
1637+
"fr": "Utilisateurs AEM"
1638+
},
1639+
"introduction": {
1640+
"en": "This implementation is meant for publishers adding the template manually into an AEM page.",
1641+
"fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM."
1642+
},
1643+
"instructions": {
1644+
"en": [
1645+
"TBD"
1646+
],
1647+
"fr": [
1648+
"TBD"
1649+
]
1650+
},
1651+
"notes": {
1652+
"en": [
1653+
"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."
1654+
],
1655+
"fr": [
1656+
"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."
1657+
]
1658+
},
1659+
"ajaxSourceCode": {
1660+
"en": "theme-en.html main > *:not(.pagedetails)",
1661+
"fr": "theme-fr.html main > *:not(.pagedetails)"
1662+
}
1663+
}
1664+
],
1665+
"iteration": [
1666+
{
1667+
"@id": "_:iteration_ilp_1",
1668+
"name": "Theme page - Iteration 1",
1669+
"date": "2024-07",
1670+
"breaking": [
1671+
"Introduction of the page template."
1672+
],
1673+
"detectableBy": ".page-type-theme"
1674+
}
1675+
],
1676+
"changesets": [
1677+
{
1678+
"@id": "_:cs_ilp_2",
1679+
"name": "Institutional landing page",
1680+
"status": "stable",
1681+
"baseOnIteration": "_:iteration_ilp_3",
1682+
"detectableBy": ".page-type-ilp",
1683+
"layout": [
1684+
"On larger screens, navigation on the left and page content on the right.",
1685+
"In the page content section, from top to bottom: page title, most requested, services and information."
1686+
],
1687+
"style": [
1688+
"The breadcrumbs first element has a left dark blue border.",
1689+
"The left navigation's active page has a dark-blue background and white text.",
1690+
"A vertical blue bar separates the left navigation from the content on the right.",
1691+
"On larger screens, the most requested component's heading is above the list rather than to the left."
1692+
],
1693+
"semantic": "h2 + (ul > li)",
1694+
"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.",
1695+
"basic": "On smaller screens the navigation is always visible and the button to toggle the navigation is hidden.",
1696+
"context": "This template is only meant for Theme pages.",
1697+
"static": [
1698+
"Menu",
1699+
"Toggle Menu",
1700+
"Basculer le menu"
1701+
]
1702+
}
1703+
]
1704+
}
15061705
,{
15071706
"@context": {
15081707
"@version": 1.1,

‎sites/theme.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,7 @@
204204
@import "../templates/news/base";
205205
@import "../templates/application/base";
206206
@import "../templates/institutional-landing/base";
207+
@import "../templates/theme/base";
207208

208209

209210
/*! Core - Utilities */
@@ -274,6 +275,7 @@
274275
@import "../templates/home/screen-sm-max";
275276
@import "../templates/theme-topic/screen-sm-max";
276277
@import "../templates/institutional-landing/screen-sm-max";
278+
@import "../templates/theme/screen-sm-max";
277279
}
278280

279281
/* Medium view and under */
@@ -332,6 +334,7 @@
332334
@import "../components/gc-most-requested/screen-md-min";
333335

334336
@import "../templates/theme-topic/screen-md-min";
337+
@import "../templates/theme/screen-md-min";
335338

336339
@import "wet-boew/src/base/proximity/screen-md-min";
337340
}
@@ -346,6 +349,8 @@
346349
@import "../components/header-rwd/screen-lg-min";
347350
@import "../components/equalheight/screen-lg-min";
348351

352+
@import "../templates/theme/screen-lg-min";
353+
349354
@import "wet-boew/src/base/proximity/screen-lg-min";
350355
}
351356

‎templates/theme/_base.scss‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/*
2+
WET-BOEW
3+
@title: Theme template
4+
@desc: Styles specific to the Theme template for GCWeb
5+
*/
6+
7+
.page-type-theme {
8+
#wb-bc {
9+
li:first-child a {
10+
border-left: solid #26374a 5px;
11+
padding-left: 8px;
12+
}
13+
14+
.breadcrumb {
15+
margin-bottom: 15px;
16+
}
17+
}
18+
}
19+
20+
.gc-theme-nav {
21+
.gc-theme-menu-btn {
22+
border-radius: 0;
23+
display: block;
24+
margin-bottom: 1em;
25+
margin-left: -15px;
26+
text-align: left;
27+
width: calc(100% + 30px);
28+
29+
.glyphicon {
30+
margin-left: auto;
31+
}
32+
33+
&[aria-expanded=true] .glyphicon {
34+
transform: rotate(180deg) translateY(2px);
35+
}
36+
}
37+
38+
li {
39+
a {
40+
color: $link-color;
41+
display: block;
42+
font-size: 16px;
43+
line-height: 1.65em;
44+
padding: 10px 14px;
45+
text-decoration: none;
46+
47+
&:hover {
48+
background-color: #f5f5f5;
49+
box-shadow: 3px 0 0 $button-blue inset;
50+
color: $button-blue;
51+
}
52+
}
53+
54+
&.active {
55+
a, a:hover {
56+
background-color: #26374a;
57+
color: #fff;
58+
}
59+
60+
a:focus {
61+
outline: 5px auto -webkit-focus-ring-color;
62+
outline-offset: -3px;
63+
}
64+
}
65+
}
66+
}
67+
68+
.gc-theme-content {
69+
h1#wb-cont {
70+
border: none;
71+
font-size: 1.2em;
72+
line-height: 1.1;
73+
margin: 10px 0 11.5px;
74+
}
75+
76+
.gc-most-requested {
77+
h2 {
78+
float: none !important;
79+
font-size: 1em !important;
80+
width: auto !important;
81+
}
82+
}
83+
}

‎templates/theme/_screen-lg-min.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*
2+
WET-BOEW
3+
@title: Sidebar component
4+
@desc: Styles specific to the sidebar component for GCWeb
5+
*/
6+
7+
.gc-theme {
8+
width: 1170px;
9+
}

‎templates/theme/_screen-md-min.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
WET-BOEW
3+
@title: theme component
4+
@desc: Styles specific to the theme component for GCWeb
5+
*/
6+
7+
.gc-theme {
8+
display: flex;
9+
margin: 0 auto;
10+
padding: 0 15px;
11+
width: 970px;
12+
}
13+
14+
.gc-theme-nav {
15+
border-right: 5px solid #26374a;
16+
flex: 0 0 300px;
17+
18+
.container {
19+
padding: 0;
20+
width: auto;
21+
}
22+
23+
.gc-theme-menu-btn {
24+
display: none;
25+
}
26+
27+
ul {
28+
display: block !important;
29+
}
30+
}
31+
32+
.gc-theme-content {
33+
flex: 1 0 0%;
34+
35+
.container {
36+
padding-left: 35px;
37+
width: auto;
38+
}
39+
}

0 commit comments

Comments
 (0)