Skip to content

Commit a3a4144

Browse files
GarneaumaGarneauma
committed
Theme: adding multiple components to theme template
1 parent 347bab2 commit a3a4144

File tree

15 files changed

+1051
-280
lines changed

15 files changed

+1051
-280
lines changed

‎components/gc-most-requested/_base.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88
margin-bottom: 20px;
99
padding: 24px 0 12px;
1010

11+
&.highlight {
12+
background-color: $state-info-bg;
13+
margin-bottom: 0;
14+
}
15+
1116
h2 {
1217
font-size: 22px;
1318
margin-top: 0;

‎components/gc-most-requested/_screen-md-min.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
padding-left: 1.15em;
2323
padding-right: 1em;
2424
position: relative;
25+
width: 100%;
2526

2627
&::before {
2728
content: "\2022";
@@ -30,12 +31,6 @@
3031
position: absolute;
3132
top: 0;
3233
}
33-
34-
&::after {
35-
content: "";
36-
display: block;
37-
width: 335px;
38-
}
3934
}
4035

4136
// If there are only two items in the list, display them side by side, horizontally aligned

‎sites/feedback/page-feedback-en.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,143 @@
2020

2121
<div class="wb-prettify all-pre hide"></div>
2222

23+
<p>Mandatory elements for Canada.ca, writing principles, how to organize your content to make it easy to find, optimizing web content, evidence for and research on design choices.</p>
24+
25+
<section class="gc-srvinfo">
26+
<h2 class="wb-inv">Services and information</h2>
27+
<div class="row wb-eqht-grd">
28+
<div class="col-lg-4 col-md-6">
29+
30+
<h3><a href='https://deploy-preview-569--design-system-canada-ca.netlify.app/specifications'>Canada.ca Specifications</a></h3>
31+
32+
<p>Who has to use the Canada.ca design, mandatory elements, design principles, information architecture and findability, templates and patterns</p>
33+
</div>
34+
<div class="col-lg-4 col-md-6">
35+
36+
<h3><a href='https://deploy-preview-569--design-system-canada-ca.netlify.app/continuous-improvement'>Continuous improvement of web content</a></h3>
37+
38+
<p>Choosing what to improve, organizing and preparing your team, research and prototyping, designing content, monitoring and measuring success</p>
39+
</div>
40+
<div class="col-lg-4 col-md-6">
41+
42+
<h3><a href="https://blog.canada.ca/">Canada.ca blog</a></h3>
43+
44+
<p>Evidence and insights on improving information and services on Canada.ca</p>
45+
</div>
46+
<div class="col-lg-4 col-md-6">
47+
48+
<h3><a href="https://deploy-preview-569--design-system-canada-ca.netlify.app/research-summaries/">Research summaries</a></h3>
49+
50+
<p>Research done to make it easier for people to find and understand Government of Canada information and services</p>
51+
</div>
52+
<div class="col-lg-4 col-md-6">
53+
54+
<h3><a href="https://deploy-preview-569--design-system-canada-ca.netlify.app/about/">About Canada.ca</a></h3>
55+
56+
<p>Most requested, analytics for Canada.ca, Government of Canada contacts</p>
57+
</div>
58+
<div class="col-lg-4 col-md-6">
59+
60+
<h3><a href='https://deploy-preview-569--design-system-canada-ca.netlify.app/guidance/'>Canada.ca design guidance</a></h3>
61+
62+
<p>Use this guidance to create and manage web content</p>
63+
</div>
64+
</div>
65+
</section>
66+
<section>
67+
<h2>Find guidance</h2>
68+
<div class="row mrgn-tp-md">
69+
<div class="col-md-3 small">
70+
<details open="">
71+
<summary class="bg-primary text-center">Sources</summary>
72+
<form class="wb-tables-filter mrgn-lft-md mrgn-rght-md" data-bind-to="design" data-gc-analytics-formname="ESDC|EDSC:Find guidance filter" data-gc-analytics-collect="[{&quot;value&quot;:&quot;input[type=checkbox]&quot;,&quot;emptyField&quot;: &quot;n/a&quot;}]">
73+
<div class="row">
74+
<div class="form-group">
75+
<fieldset>
76+
<legend class="wb-inv"><span class="field-name">Sources</span></legend>
77+
<ul class="list-unstyled">
78+
<li class="checkbox">
79+
<label for="dt_source1">
80+
<input type="checkbox" id="dt_source1" name="dt_source" data-column="1" value="Blog post" />
81+
Blog post</label>
82+
</li>
83+
<li class="checkbox">
84+
<label for="dt_source2">
85+
<input type="checkbox" id="dt_source2" name="dt_source" data-column="1" value="Content Style Guide" />
86+
Content Style Guide</label>
87+
</li>
88+
<li class="checkbox">
89+
<label for="dt_source3">
90+
<input type="checkbox" id="dt_source3" name="dt_source" data-column="1" value="Canada.ca Specifications" />
91+
Canada.ca Specifications</label>
92+
</li>
93+
<li class="checkbox">
94+
<label for="dt_source4">
95+
<input type="checkbox" id="dt_source4" name="dt_source" data-column="1" value="Designing content" />
96+
Designing content</label>
97+
</li>
98+
<li class="checkbox">
99+
<label for="dt_source5">
100+
<input type="checkbox" id="dt_source5" name="dt_source" data-column="1" value="Research summary" />
101+
Research summary</label>
102+
</li>
103+
<li class="checkbox">
104+
<label for="dt_source6">
105+
<input type="checkbox" id="dt_source6" name="dt_source" data-column="1" value="Template and pattern library" />
106+
Template and pattern library</label>
107+
</li>
108+
</ul>
109+
</fieldset>
110+
</div>
111+
<div class="col-md-12">
112+
<button type="submit" class="btn btn-primary full-width" aria-controls="dataset-filter"><span class="fas fa-filter mrgn-rght-sm"></span> Filter</button>
113+
</div>
114+
<div class="col-md-12 mrgn-tp-md">
115+
<button type="reset" class="btn btn-default full-width">Reset to defaults</button>
116+
</div>
117+
</div>
118+
</form>
119+
</details>
120+
</div>
121+
<div class="col-md-9">
122+
<div class="panel panel-default">
123+
<div class="mrgn-tp-md mrgn-bttm-md">
124+
<table class="wb-tables table table-striped small mrgn-tp-lg brdr-tp" aria-live="polite" id="design" data-page-length="25" data-wb-tables="{
125+
&quot;bDeferRender&quot;: true,
126+
&quot;ajaxSource&quot;: &quot;./ajax/patterns-01-en.json&quot;,
127+
&quot;order&quot;: [0, &quot;asc&quot;],
128+
&quot;paging&quot;: true,
129+
&quot;info&quot;: true,
130+
&quot;columns&quot;: [
131+
{ &quot;data&quot;: &quot;NAME&quot;, &quot;className&quot;: &quot;&quot; },
132+
{ &quot;data&quot;: &quot;SOURCE&quot;, &quot;className&quot;: &quot;&quot; },
133+
{ &quot;data&quot;: &quot;DESCRIPTION&quot;, &quot;className&quot;: &quot;&quot;, &quot;orderable&quot;: false },
134+
{ &quot;data&quot;: &quot;WHENTOUSE&quot;, &quot;visible&quot;: false },
135+
{ &quot;data&quot;: &quot;CATEGORY&quot;, &quot;visible&quot;: false },
136+
{ &quot;data&quot;: &quot;TYPE&quot;, &quot;visible&quot;: false },
137+
{ &quot;data&quot;: &quot;MANDATORY&quot;, &quot;visible&quot;: false },
138+
{ &quot;data&quot;: &quot;TANDP&quot;, &quot;visible&quot;: false }
139+
]
140+
}">
141+
<thead>
142+
<tr>
143+
<th class="col-md-05">Name</th>
144+
<th class="col-md-02">Source</th>
145+
<th class="col-md-05">Description</th>
146+
<th>When to use this pattern</th>
147+
<th>Category</th>
148+
<th>Type</th>
149+
<th>Mandatory</th>
150+
<th>Tempalates and patterns</th>
151+
</tr>
152+
</thead>
153+
</table>
154+
</div>
155+
</div>
156+
</div>
157+
</div>
158+
</section>
159+
23160
<p>HTML code in the web page</p>
24161
<pre><code>&lt;div class="wb-disable-allow"
25162
data-ajax-replace="https://www.canada.ca/etc/designs/canada/wet-boew/assets/feedback/page-feedback-en.html"

‎templates/theme/_base.scss‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,17 @@
2020
}
2121
}
2222

23+
h1#wb-cont {
24+
border: none;
25+
font-size: 1.6875rem;
26+
line-height: 1.1;
27+
margin: 10px 0 11.5px;
28+
}
29+
30+
h2 {
31+
font-size: 1.625rem;
32+
}
33+
2334
#theme-nav {
2435
li {
2536
a {
@@ -70,18 +81,35 @@
7081
}
7182
}
7283

73-
h1#wb-cont {
74-
border: none;
75-
font-size: 1.2em;
76-
line-height: 1.1;
77-
margin: 10px 0 11.5px;
78-
}
79-
8084
.gc-most-requested {
8185
h2 {
8286
float: none;
83-
font-size: 1em;
87+
font-size: 1.25rem;
8488
width: auto;
8589
}
8690
}
91+
92+
.alert {
93+
h2 {
94+
font-size: 1.25rem;
95+
}
96+
}
97+
98+
.bg-light {
99+
.well {
100+
background-color: #fff;
101+
border-radius: 0;
102+
margin-top: 2rem;
103+
padding: 1.5rem 1.5rem 1rem;
104+
position: relative;
105+
106+
h3 {
107+
margin-top: 0;
108+
}
109+
}
110+
111+
&:has(.gc-srvinfo) {
112+
margin-top: 1rem;
113+
}
114+
}
87115
}

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,4 @@
88
#gridContainer {
99
width: $container-lg;
1010
}
11-
12-
.gc-most-requested ul li::after {
13-
width: 335px;
14-
}
1511
}

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

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,31 @@
44
@desc: Styles specific to the theme component for GCWeb
55
*/
66

7+
@mixin continuous-bg($bg-color) {
8+
position: relative;
9+
10+
&::after {
11+
background-color: $bg-color;
12+
bottom: 0;
13+
content: "";
14+
left: calc(100% - 1px);
15+
position: absolute;
16+
top: 0;
17+
width: 9999px;
18+
}
19+
}
20+
721
.page-type-theme {
822
overflow-x: hidden;
923

24+
h1#wb-cont {
25+
font-size: 1.875rem;
26+
}
27+
28+
h2 {
29+
font-size: 1.8125rem;
30+
}
31+
1032
#gridContainer {
1133
display: flex;
1234
margin: 0 auto;
@@ -46,21 +68,35 @@
4668
display: none;
4769
}
4870

71+
.alert {
72+
h2 {
73+
font-size: 1.5rem;
74+
}
75+
}
76+
77+
.gc-featured-link {
78+
@include continuous-bg($bg-gctheme);
79+
}
80+
4981
.gc-most-requested {
50-
position: relative;
51-
52-
&::after {
53-
background-color: #f5f5f5;
54-
bottom: 0;
55-
content: "";
56-
left: calc(100% - 1px);
57-
position: absolute;
58-
top: 0;
59-
width: 9999px;
82+
@include continuous-bg(#f5f5f5);
83+
84+
&.highlight::after {
85+
background-color: $state-info-bg;
6086
}
6187

62-
ul li::after {
63-
width: 240px
88+
h2 {
89+
font-size: 1.5rem;
90+
}
91+
}
92+
93+
.bg-light {
94+
@include continuous-bg(#f5f5f5);
95+
}
96+
97+
.gc-srvinfo {
98+
h3 {
99+
font-size: 1.5rem;
64100
}
65101
}
66102
}

0 commit comments

Comments
 (0)