Skip to content

Commit

Permalink
WET-484 Rotating features for Home and News
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ricokola
Ricokola committed Sep 16, 2024
1 parent 32d2d86 commit 4f5d53a
Show file tree
Hide file tree
Showing 25 changed files with 3,785 additions and 6,020 deletions.
8,853 changes: 2,936 additions & 5,917 deletions package-lock.json
View file

Large diffs are not rendered by default.

Binary file added templates/assets/home-feature-1-520x200.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/home-feature-2-520x200.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/home-feature-3-520x200.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/home-feature-4-520x200.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/home-feature-5-520x200.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/home-feature-6-520x200.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/home-feature-7-520x200.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/home-feature-8-520x200.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/news-feature-1-360x203.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/news-feature-2-360x203.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/news-feature-3-360x203.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/news-feature-4-360x203.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/news-feature-5-360x203.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added templates/assets/news-feature-6-360x203.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
97 changes: 94 additions & 3 deletions templates/home/api-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{ "title": "GCWeb home", "link": "../index-en.html" }
],
"secondlevel": false,
"dateModified": "2024-05-31",
"dateModified": "2024-09-16",
"share": "true"
}
---
Expand Down Expand Up @@ -47,8 +47,8 @@ <h3>Component list and latest version</h3>
<li>Most requested - Version 1.0</li>
<li>Service and information - Version 1.0</li>
<li>Focus on - Version 1.0</li>
<li><a href="#your-government">Your government</a> - Version 2.0</li>
<li>Government initiatives - Version 1.0</li>
<li><a href="#your-government">Your government - Version 2.0</a></li>
<li><a href="#government-initiatives">Government initiatives - Version 1.1</a></li>
</ul>

<h3 id="home-page-menu">Home page menu</h3>
Expand Down Expand Up @@ -259,6 +259,97 @@ <h4>Previous version</h4>
&lt;/section&gt;</code></pre>
</details>

<h3 id="government-initiatives">Government initiatives</h3>
<dl>
<dt>Version</dt>
<dd>1.1</dd>
<dt>Updated</dt>
<dd>2024-09-16</dd>
<dt>Notes</dt>
<dd>Two feature items have been added for a total of four feature items.</dd>
<dd>Implementation of the randomized functionality on each feature items so different images along with their links and descriptions appear on each page load.</dd>
</dl>
<p>There are four feature items in this section presented as four tiles in 2 columns.</p>
<pre><code>&lt;h2&gt;&lt;a id="gi"&gt;&lt;/a&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 brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-1-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-2-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;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 brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-3-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#" data-gc-analytics="promo:promotionalfeature"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-4-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;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 brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-5-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#" data-gc-analytics="promo:promotionalfeature"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-6-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;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 brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-7-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-8-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
</code></pre>
<h4>Previous version</h4>
<details>
<summary>Deprecated - Version 1.0</summary>
<p>There were two non-randomized feature items with links and descriptions.</p>
<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"&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt"&gt;
&lt;img class="img-responsive full-width" src="../../components/gc-features/img/initiative-520x200.png" alt=""/&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-6"&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt"&gt;
&lt;img class="img-responsive full-width" src="../../components/gc-features/img/initiative-520x200.png" alt=""/&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre>
</details>

<h2>Evaluation and report</h2>
<p>There is no evaluation and report available for this component.</p>

Expand Down
97 changes: 94 additions & 3 deletions templates/home/api-fr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{ "title": "GCWeb home", "link": "../index-fr.html" }
],
"secondlevel": false,
"dateModified": "2024-05-31",
"dateModified": "2024-09-16",
"share": "true"
}
---
Expand Down Expand Up @@ -49,8 +49,8 @@ <h3>Component list and latest version</h3>
<li>Most requested - Version 1.0</li>
<li>Service and information - Version 1.0</li>
<li>Focus on - Version 1.0</li>
<li><a href="#your-government">Your government</a> - Version 2.0</li>
<li>Government initiatives - Version 1.0</li>
<li><a href="#your-government">Your government - Version 2.0</a></li>
<li><a href="#government-initiatives">Government initiatives - Version 1.1</a></li>
</ul>

<h3 id="home-page-menu">Home page menu</h3>
Expand Down Expand Up @@ -261,6 +261,97 @@ <h4>Previous version</h4>
&lt;/section&gt;</code></pre>
</details>

<h3 id="government-initiatives">Government initiatives</h3>
<dl>
<dt>Version</dt>
<dd>1.1</dd>
<dt>Updated</dt>
<dd>2024-09-16</dd>
<dt>Notes</dt>
<dd>Two feature items have been added for a total of four feature items.</dd>
<dd>Implementation of the randomized functionality on each feature items so different images along with their links and descriptions appear on each page load.</dd>
</dl>
<p>There are four feature items in this section presented as four tiles in 2 columns.</p>
<pre><code>&lt;h2&gt;&lt;a id="gi"&gt;&lt;/a&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 brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-1-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-2-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;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 brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-3-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#" data-gc-analytics="promo:promotionalfeature"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-4-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;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 brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-5-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#" data-gc-analytics="promo:promotionalfeature"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-6-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;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 brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-7-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt position-relative"&gt;
&lt;img class="img-responsive full-width" src="../assets/home-feature-8-520x200.jpg" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
</code></pre>
<h4>Previous version</h4>
<details>
<summary>Deprecated - Version 1.0</summary>
<p>There were two non-randomized feature items with links and descriptions.</p>
<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"&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt"&gt;
&lt;img class="img-responsive full-width" src="../../components/gc-features/img/initiative-520x200.png" alt=""/&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-6"&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt"&gt;
&lt;img class="img-responsive full-width" src="../../components/gc-features/img/initiative-520x200.png" alt=""/&gt;
&lt;h3 class="h5"&gt;&lt;a class="stretched-link" href="#"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre>
</details>

<h2>Evaluation and report</h2>
<p>There is no evaluation and report available for this component.</p>

Expand Down
53 changes: 45 additions & 8 deletions templates/home/home-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Home - Canada.ca
language: en
altLangPage: home-fr.html
dateModified: 2021-07-07
dateModified: 2022-09-16
layout: home
breadcrumbs: false
---
Expand Down Expand Up @@ -167,19 +167,56 @@ <h2>Your government</h2>
</div>
</div>
</section>

<section class="container gc-features">
<h2>Government initiatives</h2>
<h2><a id="gi"></a>Government initiatives</h2>
<div class="row wb-eqht">
<div class="col-sm-6">
<div class="well well-sm brdr-rds-0 eqht-trgt">
<img class="img-responsive full-width" src="../../components/gc-features/img/initiative-520x200.png" alt=""/>
<div class="col-sm-6" data-wb-randomize='{ "shuffle": true, "selector": "div", "toggle": "hide" }'>
<div class="well well-sm brdr-rds-0 eqht-trgt position-relative">
<img class="img-responsive full-width" src="../assets/home-feature-1-520x200.jpg" alt="">
<h3 class="h5"><a class="stretched-link" href="#">[Feature hyperlink text]</a></h3>
<p>Brief description of the feature being promoted.</p>
</div>
<div class="well well-sm brdr-rds-0 eqht-trgt position-relative">
<img class="img-responsive full-width" src="../assets/home-feature-2-520x200.jpg" alt="">
<h3 class="h5"><a class="stretched-link" href="#">[Feature hyperlink text]</a></h3>
<p>Brief description of the feature being promoted.</p>
</div>
</div>
<div class="col-sm-6">
<div class="well well-sm brdr-rds-0 eqht-trgt">
<img class="img-responsive full-width" src="../../components/gc-features/img/initiative-520x200.png" alt=""/>
<div class="col-sm-6" data-wb-randomize='{ "shuffle": true, "selector": "div", "toggle": "hide" }'>
<div class="well well-sm brdr-rds-0 eqht-trgt position-relative">
<img class="img-responsive full-width" src="../assets/home-feature-3-520x200.jpg" alt="">
<h3 class="h5"><a class="stretched-link" href="#" data-gc-analytics="promo:promotionalfeature">[Feature hyperlink text]</a></h3>
<p>Brief description of the feature being promoted.</p>
</div>
<div class="well well-sm brdr-rds-0 eqht-trgt position-relative">
<img class="img-responsive full-width" src="../assets/home-feature-4-520x200.jpg" alt="">
<h3 class="h5"><a class="stretched-link" href="#">[Feature hyperlink text]</a></h3>
<p>Brief description of the feature being promoted.</p>
</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 brdr-rds-0 eqht-trgt position-relative">
<img class="img-responsive full-width" src="../assets/home-feature-5-520x200.jpg" alt="">
<h3 class="h5"><a class="stretched-link" href="#" data-gc-analytics="promo:promotionalfeature">[Feature hyperlink text]</a></h3>
<p>Brief description of the feature being promoted.</p>
</div>
<div class="well well-sm brdr-rds-0 eqht-trgt position-relative">
<img class="img-responsive full-width" src="../assets/home-feature-6-520x200.jpg" alt="">
<h3 class="h5"><a class="stretched-link" href="#">[Feature hyperlink text]</a></h3>
<p>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 brdr-rds-0 eqht-trgt position-relative">
<img class="img-responsive full-width" src="../assets/home-feature-7-520x200.jpg" alt="">
<h3 class="h5"><a class="stretched-link" href="#">[Feature hyperlink text]</a></h3>
<p>Brief description of the feature being promoted.</p>
</div>
<div class="well well-sm brdr-rds-0 eqht-trgt position-relative">
<img class="img-responsive full-width" src="../assets/home-feature-8-520x200.jpg" alt="">
<h3 class="h5"><a class="stretched-link" href="#">[Feature hyperlink text]</a></h3>
<p>Brief description of the feature being promoted.</p>
</div>
Expand Down
Loading

0 comments on commit 4f5d53a

Please sign in to comment.