Skip to content

Commit

Permalink
News and Home templates: randomizing features
Browse files Browse the repository at this point in the history
  • Loading branch information
@Garneauma
Garneauma committed Oct 4, 2024
1 parent b948ee7 commit 7e535dd
Show file tree
Hide file tree
Showing 25 changed files with 8,137 additions and 4,224 deletions.
8,848 changes: 5,914 additions & 2,934 deletions package-lock.json
View file

Large diffs are not rendered by default.

Binary file removed templates/assets/home-feature-1-520x200.jpg
View file
Binary file not shown.
Binary file removed templates/assets/home-feature-2-520x200.jpg
View file
Binary file not shown.
Binary file removed templates/assets/home-feature-3-520x200.jpg
View file
Binary file not shown.
Binary file removed templates/assets/home-feature-4-520x200.jpg
View file
Binary file not shown.
Binary file removed templates/assets/home-feature-5-520x200.jpg
View file
Binary file not shown.
Binary file removed templates/assets/home-feature-6-520x200.jpg
View file
Binary file not shown.
Binary file removed templates/assets/home-feature-7-520x200.jpg
View file
Binary file not shown.
Binary file removed templates/assets/home-feature-8-520x200.jpg
View file
Binary file not shown.
Binary file removed templates/assets/news-feature-1-360x203.jpg
View file
Binary file not shown.
Binary file removed templates/assets/news-feature-2-360x203.jpg
View file
Binary file not shown.
Binary file removed templates/assets/news-feature-3-360x203.jpg
View file
Binary file not shown.
Binary file removed templates/assets/news-feature-4-360x203.jpg
View file
Binary file not shown.
Binary file removed templates/assets/news-feature-5-360x203.jpg
View file
Binary file not shown.
Binary file removed templates/assets/news-feature-6-360x203.jpg
View file
Binary file not shown.
497 changes: 253 additions & 244 deletions templates/home/api-en.html
View file

Large diffs are not rendered by default.

55 changes: 32 additions & 23 deletions templates/home/api-fr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ <h4>Previous version</h4>
&lt;/section&gt;</code></pre>
</details>

<h3 id="government-initiatives">Government initiatives</h3>
<h3 id="government-initiatives">Government initiatives</h3>
<dl>
<dt>Version</dt>
<dd>1.1</dd>
Expand All @@ -275,59 +275,68 @@ <h3 id="government-initiatives">Government initiatives</h3>
<pre><code>&lt;section class="container gc-features"&gt;
&lt;h2&gt;Government initiatives&lt;/h2&gt;
&lt;div class="row wb-eqht"&gt;
&lt;div class="col-sm-6" data-wb-randomize='{ "shuffle": true, "selector": "div", "toggle": "hide" }'&gt;
&lt;div class="well well-sm eqht-trgt"&gt;
&lt;img src="../assets/home-feature-1-520x200.jpg" alt=""&gt;
&lt;div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'&gt;
&lt;div class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[URL de l'image]" alt=""&gt;
&lt;h3&gt;&lt;a class="stretched-link" href="#"&gt;[1. Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;1. Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm eqht-trgt"&gt;
&lt;img src="../assets/home-feature-2-520x200.jpg" alt=""&gt;
&lt;div class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[URL de l'image]" alt=""&gt;
&lt;h3&gt;&lt;a class="stretched-link" href="#"&gt;[2. Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;2. Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-6" data-wb-randomize='{ "shuffle": true, "selector": "div", "toggle": "hide" }'&gt;
&lt;div class="well well-sm eqht-trgt"&gt;
&lt;img src="../assets/home-feature-3-520x200.jpg" alt=""&gt;
&lt;div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'&gt;
&lt;div class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[URL de l'image]" alt=""&gt;
&lt;h3&gt;&lt;a class="stretched-link" href="#"&gt;[3. Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;3. Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm eqht-trgt"&gt;
&lt;img src="../assets/home-feature-4-520x200.jpg" alt=""&gt;
&lt;div class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[URL de l'image]" alt=""&gt;
&lt;h3&gt;&lt;a class="stretched-link" href="#"&gt;[4. Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;4. Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row wb-eqht"&gt;
&lt;div class="col-sm-6" data-wb-randomize='{ "shuffle": true, "selector": "div", "toggle": "hide" }'&gt;
&lt;div class="well well-sm eqht-trgt"&gt;
&lt;img src="../assets/home-feature-5-520x200.jpg" alt=""&gt;
&lt;div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'&gt;
&lt;div class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[URL de l'image]" alt=""&gt;
&lt;h3&gt;&lt;a class="stretched-link" href="#"&gt;[5. Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;5. Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm eqht-trgt"&gt;
&lt;img src="../assets/home-feature-6-520x200.jpg" alt=""&gt;
&lt;div class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[URL de l'image]" alt=""&gt;
&lt;h3&gt;&lt;a class="stretched-link" href="#"&gt;[6. Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;6. Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-6" data-wb-randomize='{ "shuffle": true, "selector": "div", "toggle": "hide" }'&gt;
&lt;div class="well well-sm eqht-trgt"&gt;
&lt;img src="../assets/home-feature-7-520x200.jpg" alt=""&gt;
&lt;div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'&gt;
&lt;div class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[URL de l'image]" alt=""&gt;
&lt;h3&gt;&lt;a class="stretched-link" href="#"&gt;[7. Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;7. Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm eqht-trgt"&gt;
&lt;img src="../assets/home-feature-8-520x200.jpg" alt=""&gt;
&lt;div class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[URL de l'image]" alt=""&gt;
&lt;h3&gt;&lt;a class="stretched-link" href="#"&gt;[8. Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;8. Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
</code></pre>
&lt;/section&gt;</code></pre>

<h5>Transition from version 1.0 to 1.1</h5>
<ul>
<li>Add a second row of features under the first one.</li>
<li>Add the attribute <code>data-wb-randomize='{ "toggle": "hide" }'</code> to the <code>&lt;div class="col-sm-6"></code> element wrapping the features groups.</li>
<li>Change the HTML tag for features from <code>&lt;div></code> to <code>&lt;section></code></li>
<li>Add the class <code>hide</code> to the <code>&lt;section class="well well-sm eqht-trgt"></code> elements (feature elements).</li>
<li>Above the <code>&lt;div class="row"></code> element, add a <code>&lt;ul class="nojs-show"></code> with a list of the links for all the features contained in the <code>&lt;div class="row"></code> element. This step is necessary for users of the basic HTML version.</li>
</ul>

<h4>Previous version</h4>
<details>
<summary>Deprecated - Version 1.0</summary>
Expand Down
267 changes: 130 additions & 137 deletions templates/home/home-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,9 @@ <h1 property="name" id="wb-cont">Canada.ca</h1>
</div>
<section class="gc-featured-link">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="wb-inv">Featured</h2>
<p><a class="stretched-link" href="#">[Promotion title]</a></p>
<p>Long description [Optional]</a></p>
</div>
</div>
<h2 class="wb-inv">Spotlight on</h2>
<p><a class="stretched-link" href="#">[Promotion title]</a></p>
<p>Long description [Optional]</p>
</div>
</section>
</div>
Expand All @@ -44,90 +40,71 @@ <h2 class="mrgn-tp-md">Most requested</h2>
</section>


<section class="gc-srvinfo container">
<h2 class="wb-inv">Services and information</h2>

<div class="wb-eqht row">

<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/jobs.html">Jobs</a></h3>
<p>Find a job, training, hiring programs, work permits, Social Insurance Number (SIN)</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></h3>
<p>Visit, work, study, immigrate, refugees, permanant residents, apply, check status</p>
</div>

<div class="col-lg-4 col-md-6">
<h3><a href="https://travel.gc.ca">Travel and tourism</a></h3>
<p>In Canada or abroad, advice, advisories, passports, visit Canada, events, attractions</p>
</div>

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

<section class="gc-srvinfo container mrgn-bttm-lg">
<h2>Focus on</h2>
<div class="wb-eqht row">
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.aadnc-aandc.gc.ca/eng/1461766373625/1461766394598">Indigenous peoples</a></h3>
<p>Programs and services for First Nations, Inuit and Métis</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/veterans.html">Veterans</a></h3>
<p>Services for current and former military, <abbr title="Royal Canadian Mounted Police">RCMP</abbr> and their families</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/youth.html">Youth</a></h3>
<p>Programs and services for teenagers and young adults</p>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/business.html">Business and industry</a></h3>
<p>Starting a business, permits, copyright, business support, selling to government</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/benefits.html">Benefits</a></h3>
<p>EI, family and sickness leave, pensions, housing, student aid, disabilities</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/health.html">Health</a></h3>
<p>Food, nutrition, diseases, vaccines, drugs, product safety and recalls</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/taxes.html">Taxes</a></h3>
<p>Income tax, payroll, GST/HST, contribution limits, tax credits, charities</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></h3>
<p>Weather, climate, agriculture, wildlife, pollution, conservation, fisheries</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/defence.html">National security and defence</a></h3>
<p>Military, transportation and cyber security, securing the border, counter-terrorism</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/culture.html">Culture, history and sport</a></h3>
<p>Arts, media, heritage, official languages, national identity and funding</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies</a></h3>
<p>Safety, justice system, prepare for emergencies, services for victims of crime</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure</a></h3>
<p>Aviation, marine, road, rail, dangerous goods, infrastructure projects</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></h3>
<p>Foreign policy, trade agreements, development work, global issues</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/finance.html">Money and finances</a></h3>
<p>Personal finance, credit reports, fraud protection, paying for education</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/science.html">Science and innovation</a></h3>
<p>Scientific research on health, environment and space, grants and funding</p>
</div>
</div>
</div>
</section>
Expand Down Expand Up @@ -168,57 +145,73 @@ <h2>Your government</h2>
</div>
</section>

<section class="container gc-features">
<h2>Government initiatives</h2>
<div class="row wb-eqht">
<div class="col-sm-6" data-wb-randomize='{ "shuffle": true, "selector": "div", "toggle": "hide" }'>
<div class="well well-sm eqht-trgt">
<img src="../assets/home-feature-1-520x200.jpg" alt="">
<h3><a class="stretched-link" href="#">[1. Feature hyperlink text]</a></h3>
<p>1. Brief description of the feature being promoted.</p>
</div>
<div class="well well-sm eqht-trgt">
<img src="../assets/home-feature-2-520x200.jpg" alt="">
<h3><a class="stretched-link" href="#">[2. Feature hyperlink text]</a></h3>
<p>2. Brief description of the feature being promoted.</p>
</div>
</div>
<div class="col-sm-6" data-wb-randomize='{ "shuffle": true, "selector": "div", "toggle": "hide" }'>
<div class="well well-sm eqht-trgt">
<img src="../assets/home-feature-3-520x200.jpg" alt="">
<h3><a class="stretched-link" href="#">[3. Feature hyperlink text]</a></h3>
<p>3. Brief description of the feature being promoted.</p>
<section class="gc-features">
<div class="container">
<h2>Government initiatives</h2>
<!-- START: Add the list of links to the features to display in basic HTML mode -->
<ul class="nojs-show">
<li><a href="#">[1. Feature hyperlink text]</a></li>
<li><a href="#">[2. Feature hyperlink text]</a></li>
<li><a href="#">[3. Feature hyperlink text]</a></li>
<li><a href="#">[4. Feature hyperlink text]</a></li>
<li><a href="#">[5. Feature hyperlink text]</a></li>
<li><a href="#">[6. Feature hyperlink text]</a></li>
<li><a href="#">[7. Feature hyperlink text]</a></li>
<li><a href="#">[8. Feature hyperlink text]</a></li>
</ul>
<!-- END -->

<!-- Add the "data-wb-randomize" attribute to the "col-sm-6" element to randomize the features within each theme -->
<div class="row wb-eqht-grd">
<div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'>
<section class="well well-sm eqht-trgt hide">
<img src="https://dummyimage.com/360x203/000000/FFFFFF" alt="">
<h3><a class="stretched-link" href="#">[1. Feature hyperlink text]</a></h3>
<p>1. Brief description of the feature being promoted.</p>
</section>
<section class="well well-sm eqht-trgt hide">
<img src="https://dummyimage.com/360x203/e5ff6a/000000" alt="">
<h3><a class="stretched-link" href="#">[2. Feature hyperlink text]</a></h3>
<p>2. Brief description of the feature being promoted.</p>
</section>
</div>
<div class="well well-sm eqht-trgt">
<img src="../assets/home-feature-4-520x200.jpg" alt="">
<h3><a class="stretched-link" href="#">[4. Feature hyperlink text]</a></h3>
<p>4. Brief description of the feature being promoted.</p>
<div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'>
<section class="well well-sm eqht-trgt hide">
<img src="https://dummyimage.com/360x203/46b393/000000" alt="">
<h3><a class="stretched-link" href="#">[3. Feature hyperlink text]</a></h3>
<p>3. Brief description of the feature being promoted.</p>
</section>
<section class="well well-sm eqht-trgt hide">
<img src="https://dummyimage.com/360x203/0bd6fd/000000" alt="">
<h3><a class="stretched-link" href="#">[4. Feature hyperlink text]</a></h3>
<p>4. Brief description of the feature being promoted.</p>
</section>
</div>
</div>
</div>
<div class="row wb-eqht">
<div class="col-sm-6" data-wb-randomize='{ "shuffle": true, "selector": "div", "toggle": "hide" }'>
<div class="well well-sm eqht-trgt">
<img src="../assets/home-feature-5-520x200.jpg" alt="">
<h3><a class="stretched-link" href="#">[5. Feature hyperlink text]</a></h3>
<p>5. Brief description of the feature being promoted.</p>
</div>
<div class="well well-sm eqht-trgt">
<img src="../assets/home-feature-6-520x200.jpg" alt="">
<h3><a class="stretched-link" href="#">[6. Feature hyperlink text]</a></h3>
<p>6. Brief description of the feature being promoted.</p>
<div class="row wb-eqht-grd">
<div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'>
<section class="well well-sm eqht-trgt hide">
<img src="https://dummyimage.com/360x203/2b3551/FFFFFF" alt="">
<h3><a class="stretched-link" href="#">[5. Feature hyperlink text]</a></h3>
<p>5. Brief description of the feature being promoted.</p>
</section>
<section class="well well-sm eqht-trgt hide">
<img src="https://dummyimage.com/360x203/311893/FFFFFF" alt="">
<h3><a class="stretched-link" href="#">[6. Feature hyperlink text]</a></h3>
<p>6. Brief description of the feature being promoted.</p>
</section>
</div>
</div>
<div class="col-sm-6" data-wb-randomize='{ "shuffle": true, "selector": "div", "toggle": "hide" }'>
<div class="well well-sm eqht-trgt">
<img src="../assets/home-feature-7-520x200.jpg" alt="">
<h3><a class="stretched-link" href="#">[7. Feature hyperlink text]</a></h3>
<p>7. Brief description of the feature being promoted.</p>
</div>
<div class="well well-sm eqht-trgt">
<img src="../assets/home-feature-8-520x200.jpg" alt="">
<h3><a class="stretched-link" href="#">[8. Feature hyperlink text]</a></h3>
<p>8. Brief description of the feature being promoted.</p>
<div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'>
<section class="well well-sm eqht-trgt hide">
<img src="https://dummyimage.com/360x203/844d45/FFFFFF" alt="">
<h3><a class="stretched-link" href="#">[7. Feature hyperlink text]</a></h3>
<p>7. Brief description of the feature being promoted.</p>
</section>
<section class="well well-sm eqht-trgt hide">
<img src="https://dummyimage.com/360x203/5e71a9/FFFFFF" alt="">
<h3><a class="stretched-link" href="#">[8. Feature hyperlink text]</a></h3>
<p>8. Brief description of the feature being promoted.</p>
</section>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 7e535dd

Please sign in to comment.