Skip to content

Commit

Permalink
Home: updating All services button styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Garneauma
Garneauma committed Nov 1, 2024
1 parent 112c366 commit f93bf89
Show file tree
Hide file tree
Showing 7 changed files with 331 additions and 46 deletions.
25 changes: 15 additions & 10 deletions _data/sites.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2323,7 +2323,7 @@
"en": "https://design.canada.ca/styles/typography.html",
"fr": "https://conception.canada.ca/styles/typographie.html"
},
"iteration": "_:iteration_smpt_1",
"iteration": "_:iteration_smpt_2",
"example": [
{
"en": { "href": "main-page-title-stacked-en.html", "text": "Stacked main page title" },
Expand Down Expand Up @@ -2401,7 +2401,7 @@
},
{
"@id": "_:implement_mpt_gcweb",
"iteration": "_:iteration_mpt_2",
"iteration": "_:iteration_mpt_4",
"name": {
"en": "GCWeb Jekyll",
"fr": "GCWeb Jekyll"
Expand Down Expand Up @@ -2437,7 +2437,7 @@
},
{
"@id": "_:implement_smpt",
"iteration": "_:iteration_smpt_1",
"iteration": "_:iteration_smpt_2",
"name": {
"en": "Standard",
"fr": "Standard"
Expand Down Expand Up @@ -2473,7 +2473,7 @@
},
{
"@id": "_:implement_smpt_gcweb",
"iteration": "_:iteration_smpt_1",
"iteration": "_:iteration_smpt_2",
"name": {
"en": "GCWeb Jekyll",
"fr": "GCWeb Jekyll"
Expand Down Expand Up @@ -2512,7 +2512,7 @@
{
"@id": "_:cs_mpt",
"name": "Default h1",
"baseOnIteration": "_:iteration_mpt_3",
"baseOnIteration": "_:iteration_mpt_4",
"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43.",
"layout": "The line is positioned below the text.",
"semantic": "h1",
Expand All @@ -2535,7 +2535,7 @@
{
"@id": "_:cs_smpt",
"name": "Stacked main page title",
"baseOnIteration": "_:iteration_smpt_1",
"baseOnIteration": "_:iteration_smpt_2",
"detectableBy": "hgroup > h1#wb-cont",
"layout": "The section page title is above the page title. The line is positioned below the page title.",
"semantic": "hgroup > p + h1",
Expand Down Expand Up @@ -2581,7 +2581,8 @@
"fixes": [
"Style: Added left/right/top <code>border-*-width: 0;</code> properties to avoid three-sided borders in Safari &lt;= 15.3."
],
"predecessor": "_:iteration_mpt_2"
"predecessor": "_:iteration_mpt_2",
"successor": "_:iteration_mpt_4"
},
{
"@id": "_:iteration_mpt_4",
Expand All @@ -2590,13 +2591,16 @@
"detectableBy": "h1#wb-cont[dir='rtl'], [dir='rtl'] h1#wb-cont",
"additions": [
"Added right to left support"
]
],
"predecessor": "_:iteration_mpt_3"

},
{
"@id": "_:iteration_smpt_1",
"name": "Stacked main page title - Iteration 1",
"date": "2024-08",
"detectableBy": "hgroup > h1#wb-cont"
"detectableBy": "hgroup > h1#wb-cont",
"successor": "_:iteration_smpt_2"
},
{
"@id": "_:iteration_smpt_2",
Expand All @@ -2605,7 +2609,8 @@
"detectableBy": "hgroup > h1#wb-cont[dir='ltr'], [dir='ltr'] hgroup > h1#wb-cont",
"additions": [
"Added right to left support"
]
],
"predecessor": "_:iteration_smpt_1"
}
]
}
Expand Down
18 changes: 18 additions & 0 deletions templates/home/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,4 +76,22 @@
background-repeat: no-repeat;
background-size: 38%;
}

// All services button under services and information
.gc-srvinfo .container > p:last-child {
margin-bottom: 20px;
margin-top: 20px;

.btn-all-services {
border: 2px solid $accent-blue; // #26374a
color: $accent-blue; // #26374a
font-size: 1.1em;
font-weight: bold;
padding: .65em 1.1em;

&:hover {
text-decoration: underline;
}
}
}
}
146 changes: 145 additions & 1 deletion templates/home/api-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ <h3>Component list and latest version</h3>
<li><a href="#home-page-banner">Home page banner - Version 2.2</a></li>
<li><a href="#promotional-banner">Promotional banner - Version 2.0</a></li>
<li>Most requested - Version 1.0</li>
<li>Service and information - Version 1.0</li>
<li><a href="#services-information">Home page service and information - Version 2.0</a></li>
<li>Focus on - Version 1.0</li>
<li><a href="#your-government">Your government - Version 2.0</a></li>
<li><a href="#government-initiatives">Government initiatives - Version 2.0</a></li>
Expand Down Expand Up @@ -146,6 +146,150 @@ <h3 id="promotional-banner">Promotional banner</h3>
&lt;/div&gt;
</code></pre>

<h3 id="services-information">Services and information</h3>
<dl>
<dt>Version</dt>
<dd>2.0</dd>
<dt>Updated</dt>
<dd>2024-10-22</dd>
<dt>Notes</dt>
<dd>Services now limited to 9 with "All services" link.</dd>
</dl>
<pre><code>&lt;section class="gc-srvinfo">
&lt;div class="container">
&lt;h2 class="wb-inv">Home page services and information&lt;/h2>
&lt;div class="wb-eqht row">
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/jobs.html">Jobs&lt;/a>&lt;/h3>
&lt;p>Find a job, training, hiring programs, work permits, Social Insurance Number (SIN)&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship&lt;/a>&lt;/h3>
&lt;p>Visit, work, study, immigrate, refugees, permanant residents, apply, check status&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://travel.gc.ca">Travel and tourism&lt;/a>&lt;/h3>
&lt;p>In Canada or abroad, advice, advisories, passports, visit Canada, events, attractions&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/business.html">Business and industry&lt;/a>&lt;/h3>
&lt;p>Starting a business, permits, copyright, business support, selling to government&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/benefits.html">Benefits&lt;/a>&lt;/h3>
&lt;p>EI, family and sickness leave, pensions, housing, student aid, disabilities&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/taxes.html">Taxes&lt;/a>&lt;/h3>
&lt;p>Income tax, payroll, GST/HST, contribution limits, tax credits, charities&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/health.html">Health&lt;/a>&lt;/h3>
&lt;p>Food, nutrition, diseases, vaccines, drugs, product safety and recalls&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/environment.html">Environment and natural resources&lt;/a>&lt;/h3>
&lt;p>Weather, climate, agriculture, wildlife, pollution, conservation, fisheries&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/finance.html">Money and finances&lt;/a>&lt;/h3>
&lt;p>Personal finance, credit reports, fraud protection, paying for education&lt;/p>
&lt;/div>
&lt;/div>
&lt;p>
&lt;a class="btn btn-all-services" href="https://www.canada.ca/en/services.html">All services&lt;/a>
&lt;/p>
&lt;/div>
&lt;/section></code></pre>

<h4>Previous version</h4>
<details>
<summary>Version 1.0</summary>
<pre><code>&lt;section class="gc-srvinfo container">
&lt;h2 class="wb-inv">Services and information&lt;/h2>
&lt;div class="wb-eqht row">
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/jobs.html">Jobs&lt;/a>&lt;/h3>
&lt;p>Find a job, training, hiring programs, work permits, Social Insurance Number (SIN)&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship&lt;/a>&lt;/h3>
&lt;p>Visit, work, study, immigrate, refugees, permanant residents, apply, check status&lt;/p>
&lt;/div>

&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://travel.gc.ca">Travel and tourism&lt;/a>&lt;/h3>
&lt;p>In Canada or abroad, advice, advisories, passports, visit Canada, events, attractions&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/business.html">Business and industry&lt;/a>&lt;/h3>
&lt;p>Starting a business, permits, copyright, business support, selling to government&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/benefits.html">Benefits&lt;/a>&lt;/h3>
&lt;p>EI, family and sickness leave, pensions, housing, student aid, disabilities&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/health.html">Health&lt;/a>&lt;/h3>
&lt;p>Food, nutrition, diseases, vaccines, drugs, product safety and recalls&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/taxes.html">Taxes&lt;/a>&lt;/h3>
&lt;p>Income tax, payroll, GST/HST, contribution limits, tax credits, charities&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/environment.html">Environment and natural resources&lt;/a>&lt;/h3>
&lt;p>Weather, climate, agriculture, wildlife, pollution, conservation, fisheries&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/defence.html">National security and defence&lt;/a>&lt;/h3>
&lt;p>Military, transportation and cyber security, securing the border, counter-terrorism&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/culture.html">Culture, history and sport&lt;/a>&lt;/h3>
&lt;p>Arts, media, heritage, official languages, national identity and funding&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies&lt;/a>&lt;/h3>
&lt;p>Safety, justice system, prepare for emergencies, services for victims of crime&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure&lt;/a>&lt;/h3>
&lt;p>Aviation, marine, road, rail, dangerous goods, infrastructure projects&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world&lt;/a>&lt;/h3>
&lt;p>Foreign policy, trade agreements, development work, global issues&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/finance.html">Money and finances&lt;/a>&lt;/h3>
&lt;p>Personal finance, credit reports, fraud protection, paying for education&lt;/p>
&lt;/div>
&lt;div class="col-lg-4 col-md-6">
&lt;h3>&lt;a href="https://www.canada.ca/en/services/science.html">Science and innovation&lt;/a>&lt;/h3>
&lt;p>Scientific research on health, environment and space, grants and funding&lt;/p>
&lt;/div>
&lt;/div>
&lt;/section></code></pre>
</details>

<h4>Transition from version 1.0 to version 2.0</h4>
<ul>
<li>Remove the <code>container</code> class from the <code>&lt;section class="gc-srvinfo"></code> element.</li>
<li>Wrap the content inside the <code>&lt;section class="gc-srvinfo"></code> element with a <code>&lt;div class="container"></code> element.</li>
<li>Remove the following service and information elements:
<ul>
<li>National security and defence</li>
<li>Culture, history and sport</li>
<li>Policing, justice and emergencies</li>
<li>Transport and infrastructure</li>
<li>Canada and the world</li>
<li>Science and innovation</li>
</ul>
</li>
<li>Add the following paragraph right before the end of the <code>&lt;div class="container"></code>: <code>&lt;p>&lt;a class="btn btn-all-services" href="https://www.canada.ca/en/services.html">All services&lt;/a>&lt;/p></code></li>
</ul>

<h3 id="your-government">Your government</h3>
<dl>
<dt>Version</dt>
Expand Down
Loading

0 comments on commit f93bf89

Please sign in to comment.