Skip to content

Commit

Permalink
Fonctionnalités expérimentales: French translation + English corrections
Browse files Browse the repository at this point in the history
  • Loading branch information
@GormFrank
GormFrank committed Sep 3, 2019
1 parent 888d80b commit 82ccc8f
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 75 deletions.
22 changes: 11 additions & 11 deletions site/pages/experimental-en.hbs
View file
Expand Up @@ -14,14 +14,14 @@

<div class="alert alert-warning">
<h2>Unstable feature</h2>
<p>To be used at <strong>your own risk</strong>. All functionality described bellow can be removed in any subsequent minor/major release and are excluded from the gcweb public API.</p>
<p>To be used at <strong>your own risk</strong>. All functionalities described below can be removed in any subsequent minor/major release and are excluded from the GCWeb public API.</p>
<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/7.html">Learn more about the design decision around experimental features.</a></small></p>
<p>The documentation and/or a working example for those feature could be incomplete or not available.</p>
<p>The documentation and/or working examples for those features could be incomplete or not available.</p>
</div>

<h2>Feature availability</h2>

<p>The following table describe until which version of GCWeb each experimental feature are going to be available. The feature availability are going to be re-evaluated at every release. A widthdraw experimental feature would be notify one version in advance.</p>
<p>The following table describes until which version of GCWeb each experimental feature will be available. The features' availability will be re-evaluated at every release. A withdrawn experimental feature would be notified one version in advance.</p>

<details>
<summary>Status description</summary>
Expand Down Expand Up @@ -91,13 +91,13 @@
</tr>
<tr>
<th>CSS <code>.pnkDy-theme</code> set global</th>
<td>Apply template color global changed for the pink day color. Globally as that property is defined on the <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code> element</td>
<td>Apply global template color change for the pink day color, as that property is defined on the <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code> element</td>
<td>v5.1</td>
<td></td>
</tr>
<tr>
<th>CSS <code>.dark-theme</code> set global</th>
<td>Apply template color global changed for full black. Globally as that property is defined on the <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code> element</td>
<td>Apply global template color change for full black, as that property is defined on the <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code> element</td>
<td>v5.1</td>
<td></td>
</tr>
Expand Down Expand Up @@ -130,12 +130,12 @@

<h2>Experimental feature documentation</h2>

<p>CSS experimental feature must be accompagnied with the class <code>.experimental</code> within his context of use.</p>
<p>CSS experimental features must be accompanied by the class <code>.experimental</code> within his context of use.</p>


<h2>Experimental working example</h2>
<h2>Experimental working examples</h2>

<h3 id="well-header-rwd-bgimg">Well header responsive with a background image</h3>
<h3 id="well-header-rwd-bgimg">Responsive well header with a background image</h3>

<div class="experimental bg-cover well" data-bgimg="demos/tabs/img/investinourfuture.jpg">
<div class="well header-rwd mrgn-tp-md mrgn-bttm-md">
Expand All @@ -145,8 +145,8 @@
</div>


<h3 id="well-header-rwd-dark">Well header responsive with background image and padding controls</h3>
<p>Mostly for campaing page with content-fluid width.</p>
<h3 id="well-header-rwd-dark">Responsive well header with background image and padding controls</h3>
<p>Mostly for campaing pages with content-fluid width.</p>

<div class="experimental bg-cover" data-bgimg="demos/tabs/img/investinourfuture.jpg">
<div class="container p-0 p-sm-3">
Expand Down Expand Up @@ -190,7 +190,7 @@

<details>
<summary>Javascript code sample to schedule the CSS addition for pink day</summary>
<p>The following script add the CSS class only for April 10, 2019 based on local time.</p>
<p>The following script adds the CSS class only on April 10, 2019 based on local time.</p>
<pre><code>( function( d ) {
"use strict";

Expand Down
124 changes: 60 additions & 64 deletions site/pages/experimental-fr.hbs
View file
Expand Up @@ -7,21 +7,21 @@
{ "title": "Accueil GCWeb", "link": "http://wet-boew.github.io/themes-dist/GCWeb/index-fr.html" }
],
"secondlevel": false,
"dateModified": "2019-06-10",
"dateModified": "2019-09-03",
"share": "true"
}
---

<div class="alert alert-warning">
<h2>Fonctionalité instable</h2>
<p>À être utilisé <strong>à vos propre risque</strong>. Toutes les fonctionalités décrites ci-dessous pourraient être retirées lors de n'importe quelle version mineure/majeure et l'ensemble de ces fonctionalité sont exclus de l'API publique.</p>
<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/7.html" lang="en">En apprendre plus à propos de la décision sur les fonctionnalités expérimentales (en anglais seulement).</a></small></p>
<p>La documentation et/ou les exemples pratique pouraient être incomplets ou être non disponible.</p>
<p>À être utilisée <strong>à vos propre risque</strong>. Toutes les fonctionnalités décrites ci-dessous pourraient être retirées lors du lancement d'une version mineure ou majeure et sont exclues de l'API publique GCWeb.</p>
<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/7.html" lang="en">Renseignez-vous davantage sur la décision sur la conception en matière des fonctionnalités expérimentales.</a></small></p>
<p>Les documents et les exemples pratiques de ces fonctionnalités pourraient être incomplets ou non disponibles.</p>
</div>

<h2>Disponibilité des fonctionalités</h2>

<p>Le tableau suivant décris jusqu'à quelle version de GCWeb chaque fonctionalité expérimental sera disponible. La disponibilité des fonctionalité sera ré-évalué a chaque publication de GCWeb. Les fonctionalités expérimental retirées sera identifié une version au préalable de son retrait définitif.</p>
<p>Le tableau suivant décrit jusqu’à quelle version de GCWeb chaque fonctionnalité sera disponible. La disponibilité des fonctionnalités sera réévaluée chaque fois qu’une version est publiée. Une fonctionnalité expérimentale retirée sera communiquée une version à l’avance.</p>

<details>
<summary>Description des états</summary>
Expand All @@ -47,151 +47,149 @@
</tr>
</thead>
<tbody>
<tr lang="en">
<tr>
<th>CSS <code>.p-0</code></th>
<td>Set a padding of 0px</td>
<td>Fixer un remplissage (<span lang="en">padding</span>) de 0px</td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<tr>
<th>CSS <code>.mb-sm-5</code></th>
<td>Set a margin bottom of 50px for view port from small screen and up</td>
<td>Fixer la marge du bas à 50px pour la vue à partir d'un petit écran et plus</td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<tr>
<th>CSS <code>.p-sm-3</code></th>
<td>Set a padding of 15px for view port from small screen and up</td>
<td>Fixer les marges à 15px pour la vue à partir d'un petit écran et plus</td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<tr>
<th>CSS <code>.px-sm-3</code></th>
<td>Set a left and right padding of 15px for view port from small screen and up</td>
<td>Fixer le <span lang="en">padding</span> de gauche et de droite à 15px pour la vue à partir d'un petit écran et plus</td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<tr>
<th>CSS <code>.bg-darker</code></th>
<td>Full black background color</td>
<td>Couleur de fond noir complet</td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<th>CSS <code>.bg-gctheme</code> and <code>.bg-gctheme.well.header-rwd</code></th>
<td>GCWeb theme default background color</td>
<tr>
<th>CSS <code>.bg-gctheme</code> et <code>.bg-gctheme.well.header-rwd</code></th>
<td>Couleur de fond de base du thème de GCWeb</td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<th>CSS <code>.bg-pnkDy</code> and <code>.bg-pnkDy.well.header-rwd</code></th>
<td>Pink day background color</td>
<tr>
<th>CSS <code>.bg-pnkDy</code> et <code>.bg-pnkDy.well.header-rwd</code></th>
<td>Couleur de fond de la Journée rose</td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<th>CSS <code>.pnkDy-theme</code> set global</th>
<td>Apply template color global changed for the pink day color. Globally as that property is defined on the <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code> element</td>
<tr>
<th>CSS <code>.pnkDy-theme</code> fixé globalement</th>
<td>Appliquer la couleur de gabarit « global » pour la couleur de la Journée rose de façon globale, comme cette propriété est définie sur l’élément <code>&lt;html&gt;</code> ou <code>&lt;body&gt;</code></td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<tr>
<th>CSS <code>.dark-theme</code> set global</th>
<td>Apply template color global changed for full black. Globally as that property is defined on the <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code> element</td>
<td>Appliquer la couleur de gabarit « global » modifiée à noir complet de façon globale, comme cette propriété est définie sur l’élément <code>&lt;html&gt;</code> ou <code>&lt;body&gt;</code></td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<tr>
<th>CSS <code>.bg-cover</code></th>
<td>Background size cover</td>
<td>Image de fond de taille "couvrir"</td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<tr>
<th>Plugin <code>[data-bgimg]</code></th>
<td>Take the URL value and set it as the background image. To be replaced by CSS4 selector.</td>
<td>Prendre la valeur URL et la fixer en tant qu’image de fond. Il faut le remplacer par le sélecteur CSS4</td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<tr>
<th>CSS <code>.bg-img-hdng</code></th>
<td>Add a background image to a heading.</td>
<td>Ajouter une image de fond à un en-tête</td>
<td>v5.1</td>
<td></td>
</tr>
<tr lang="en">
<tr>
<th>CSS <code>.stretched-link</code></th>
<td>Répand la zone cliquable d'une balise hyperlien jusqu'au premier élément parent qui est de position relative.</td>
<td>Propage la zone cliquable d'une balise hyperlien jusqu'au premier élément parent qui est de position relative.</td>
<td>v5.1</td>
<td></td>
</tr>
</tbody>
</table>

<h2>Documentation des fonctionalités expérimentaux</h2>

<p>Les fonctionalités CSS experimentaux doivent être accompagné avec la classe <code>.experimental</code> dans le context d'utilisation.</p>
<h2>Documentation des fonctionalités expérimentales</h2>

<h2>Example pratique expérimentaux</h2>
<p>Les fonctionalités CSS experimentaux doivent être accompagné avec la classe <code>.experimental</code> au sein de leur contexte d'utilisation.</p>

<div class="en">
<h2>Examples pratiques expérimentaux</h2>

<h3 id="well-header-rwd-bgimg">Well header responsive with a background image</h3>
<h3 id="well-header-rwd-bgimg">En-tête adaptable de la boîte grise avec une image de fond</h3>

<div class="experimental bg-cover well" data-bgimg="demos/tabs/img/investinourfuture.jpg">
<div class="well header-rwd mrgn-tp-md mrgn-bttm-md">
<h4 class="mrgn-tp-md">Heading</h4>
<p>Secondary title</p>
<h4 class="mrgn-tp-md">En-tête</h4>
<p>En-tête secondaire</p>
</div>
</div>


<h3 id="well-header-rwd-dark">Well header responsive with background image and padding controls</h3>
<p>Mostly for campaing page with content-fluid width.</p>
<h3 id="well-header-rwd-dark">En-tête adaptable de la boîte grise avec une image de fond et des contrôles de remplissage</h3>
<p>Principalement pour des pages de campagne ayant une largeur adaptable au contenu.</p>

<div class="experimental bg-cover" data-bgimg="demos/tabs/img/investinourfuture.jpg">
<div class="container p-0 p-sm-3">
<div class="well header-rwd mrgn-tp-md mrgn-bttm-md bg-dark text-white brdr-0">
<h4 class="mrgn-tp-md">Heading</h4>
<p>Secondary title</p>
<h4 class="mrgn-tp-md">En-tête</h4>
<p>En-tête secondaire</p>
</div>
</div>
</div>

<pre><code>&lt;div class="experimental bg-cover" data-bgimg="demos/tabs/img/investinourfuture.jpg"&gt;
&lt;div class="container p-0 p-sm-3"&gt;
&lt;div class="well header-rwd mrgn-tp-md mrgn-bttm-md bg-dark text-white brdr-0"&gt;
&lt;h4 class="mrgn-tp-md"&gt;Heading&lt;/h4&gt;
&lt;p&gt;Secondary title&lt;/p&gt;
&lt;h4 class="mrgn-tp-md"&gt;En-tête&lt;/h4&gt;
&lt;p&gt;En-tête secondaire&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>

<h3>Margin bottom small view port and up</h3>
<h3>Marge du bas pour la vue à partir d'un petit écran et plus</h3>
<div class="row">
<div class="col-xs-12 experimental">
<div>
<img class="img-responsive full-width" src="demos/tabs/img/investinourfuture.jpg" alt="">
<div class="well pstn-bttm-sm mrgn-bttm-0 mb-sm-5">
<h4 class="mrgn-tp-md">Heading</h4>
<p>Secondary title</p>
<h4 class="mrgn-tp-md">En-tête</h4>
<p>En-tête secondaire</p>
</div>
</div>
</div>
</div>
<div class="well">
<p>Second well</p>
<p>Boîte grise secondaire</p>
</div>

<h3>Theme template colors</h3>
<h3>Couleurs du gabarit de thème</h3>
<ul>
<li><a href="xprmntl/pink-day-en.html">Pink day</a></li>
<li><a href="xprmntl/dark-theme-en.html">Dark theme</a></li>
<li><a href="xprmntl/pink-day-en.html">Journée rose</a></li>
<li><a href="xprmntl/dark-theme-en.html">Thème sombre</a></li>
</ul>

<details>
<summary>Javascript code sample to schedule the CSS addition for pink day</summary>
<p>The following script add the CSS class only for April 10, 2019 based on local time.</p>
<summary>Échantillon du code JavaScript pour programmer l’ajout CSS pour la Journée rose</summary>
<p>Le script suivant ajoute la classe CSS seulement pour le 10 avril 2019 heure locale.</p>
<pre><code>( function( d ) {
"use strict";

Expand All @@ -207,9 +205,9 @@ if ( s.getTime() &lt; msT && msT &lt; e.getTime() ) {
} )( document );</code></pre>
</details>

<h3>Background image on heading</h3>
<p>Mostly for Services and information section.</p>
<div class="row experimental">
<h3>Image de fond sur l'en-tête</h3>
<p>Principalement pour la section Services et information.</p>
<div class="row experimental" lang="en">
<div class="col-md-6 col-xs-12">
<h2 class="h3 full-width bg-img-hdng mrgn-tp-0">Impact Assessment</h2>
<h3 class="h5 mrgn-tp-sm"><a href="https://www.canada.ca/en/environmental-assessment-agency/services/environmental-assessments/basics-environmental-assessment.html">Impact assessments process</a></h3>
Expand All @@ -226,9 +224,9 @@ if ( s.getTime() &lt; msT && msT &lt; e.getTime() ) {
</div>
</div>

<h3 id="stretched-link">Features section with stretched links</h3>
<h3 id="stretched-link">Section <span lang="en">Features</span> avec des liens élargis</h3>
<p>Dans l'exemple suivant, ajouter la classe <code>.stretched-link</code> à l'hyperlien situé à l'intérieur de la balise <code>&lt;h3&gt;</code> résulera en une propagation de la zone cliquable jusqu'au <code>&lt;div&gt;</code> parent qui contient la classe <code>.col-xy-z</code> parce que celui-ci est en position &laquo;&nbsp;relative&nbsp;&raquo;.</p>
<div class="row wb-eqht experimental">
<div class="row wb-eqht experimental" lang="en">
<div class="col-sm-6">
<div class="well well-sm brdr-rds-0 eqht-trgt">
<img class="img-responsive full-width" src="https://www.canada.ca/content/dam/canada/activities/20190603-1-520x200.jpg" alt="">
Expand All @@ -244,5 +242,3 @@ if ( s.getTime() &lt; msT && msT &lt; e.getTime() ) {
</div>
</div>
</div>

</div>

0 comments on commit 82ccc8f

Please sign in to comment.