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 9, 2024
1 parent 36615c9 commit e4b7bac
Show file tree
Hide file tree
Showing 25 changed files with 8,146 additions and 4,305 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.
509 changes: 247 additions & 262 deletions templates/home/api-en.html
View file

Large diffs are not rendered by default.

123 changes: 54 additions & 69 deletions templates/home/api-fr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ <h3>Component list and latest version</h3>
<li>Service and information - Version 1.0</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 1.1</a></li>
<li><a href="#government-initiatives">Government initiatives - Version 2.0</a></li>
</ul>

<h3 id="home-page-menu">Home page menu</h3>
Expand Down Expand Up @@ -128,7 +128,7 @@ <h3 id="promotional-banner">Promotional banner</h3>
<dt>Notes</dt>
<dd>Provisional color was removed.</dd>
</dl>
<pre><code>&lt;div class="provisional bg-cover" data-bgimg="https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg"&gt;
<pre><code>&lt;div class="bg-cover" data-bgimg="https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg"&gt;
&lt;div class="container p-0 p-sm-3"&gt;
&lt;div class="well header-rwd brdr-0 brdr-rds-0 text-white bg-gctheme"&gt;
&lt;h1 property="name" id="wb-cont"&gt;Canada.ca&lt;/h1&gt;
Expand All @@ -147,40 +147,6 @@ <h3 id="promotional-banner">Promotional banner</h3>
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h4>Previous version</h4>
<details>
<summary>Version 1.0 - 2018-12-27</summary>
<pre><code>&lt;div class="home-banner"&gt;
&lt;div class="container"&gt;
&lt;div class="innerbox"&gt;
&lt;h1 property="name" id="wb-cont"&gt;Canada.ca&lt;/h1&gt;
&lt;p&gt;The official website of the Government of Canada&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="promo"&gt;
&lt;div class="container"&gt;
&lt;a class="figcaption" href="#"&gt;
&lt;figure class="clearfix"&gt;
&lt;div&gt;&lt;p class="pull-left mrgn-tp-md mrgn-bttm-md"&gt;Featured:&lt;/p&gt;&lt;/div&gt;
&lt;figcaption class="pull-left mrgn-tp-md mrgn-bttm-md"&gt;[Promotion title]&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h5>Provisional</h5>
<p>Support for a set of predefined color to match the season. The intend is to set the color of the inner box with the site title to match the promotional banner background color.</p>
<p>The promotional color theme are set on the <code>div.home-banner</code>. Here the supported theme with their corresponding CSS class name</p>
<ul>
<li>(default) Sky - <code>sky</code></li>
<li>Earth - <code>earth</code></li>
<li>Vegetation - <code>vegetation</code></li>
<li>Night - <code>night</code></li>
<li>Forest - <code>forest</code></li>
<li>Autumn - <code>autumn</code></li>
</ul>
</details>

<h3 id="your-government">Your government</h3>
<dl>
Expand Down Expand Up @@ -261,10 +227,10 @@ <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>
<dd>2.0</dd>
<dt>Updated</dt>
<dd>2024-09-16</dd>
<dt>Notes</dt>
Expand All @@ -274,64 +240,83 @@ <h3 id="government-initiatives">Government initiatives</h3>
<p>There are four feature items in this section presented as four tiles in 2 columns.</p>
<pre><code>&lt;section class="container gc-features"&gt;
&lt;h2&gt;Government initiatives&lt;/h2&gt;
&lt;ul class="nojs-show">
&lt;li>&lt;a href="#">[1. Feature hyperlink text]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[2. Feature hyperlink text]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[3. Feature hyperlink text]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[4. Feature hyperlink text]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[5. Feature hyperlink text]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[6. Feature hyperlink text]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[7. Feature hyperlink text]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[8. Feature hyperlink text]&lt;/a>&lt;/li>
&lt;/ul>
&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;section class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[image URL]" 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;/section&gt;
&lt;section class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[image URL]" 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;/section&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;section class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[image URL]" 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;/section&gt;
&lt;section class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[image URL]" 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;/section&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;section class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[image URL]" 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;/section&gt;
&lt;section class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[image URL]" 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;/section&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;section class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[image URL]" 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;/section&gt;
&lt;section class="well well-sm eqht-trgt hide"&gt;
&lt;img src="[image URL]" 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;/section&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
</code></pre>
&lt;/section&gt;</code></pre>

<h5>Transition from version 1.0 to 2.0</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>
<p>There were two non-randomized feature items with links and descriptions.</p>
<p>There were two static 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;
Expand Down
Loading

0 comments on commit e4b7bac

Please sign in to comment.