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.

Sign up for GitHub

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

Jump to bottom

GC Home Page: Reduced Doormats and added all services button #2434

Merged
merged 2 commits into from
Nov 5, 2024
Merged

GC Home Page: Reduced Doormats and added all services button #2434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
112c366
GC Home Page: Reduced Doormats and added all services button
BrahimMahadi Oct 21, 2024
f93bf89
Home: updating All services button styling
Garneauma Oct 22, 2024
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
25 changes: 15 additions & 10 deletions _data/sites.json
View file
Open in desktop
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
19 changes: 18 additions & 1 deletion templates/home/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@
margin: 1em 0px;
}


/* Home page Most requested section
*
* Reference in:
Expand All @@ -77,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
Open in desktop
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
Loading