Skip to content

Commit

Permalink
Merge pull request #300 from canada-ca/ILP-linkupdate
Browse files Browse the repository at this point in the history 
add alert
  • Loading branch information
@donohuech
donohuech authored Feb 22, 2024
2 parents 1206256 + a2d4cdf commit 4032007
Showing 1 changed file with 3 additions and 357 deletions.
360 changes: 3 additions & 357 deletions modeles-obligatoire/pages-profil-institutionnel.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,11 @@ title: "Pages d'accueil institutionnelle - Modèle obligatoire de Canada.ca"
<section>
<h2 id="comment">Comment mettre en œuvre</h2>
</section>
<section>
<p>Vous pouvez utiliser la version <strong>bêta</strong>ou la version <strong>stable</strong>de ce modèle.</p>
<h3>Version bêta de la page d'accueil institutionnelle</h3>
<div id="code" class="alert alert-warning">
<p>Nous travaillons à la stabilisation de la page d’accueil institutionnelle. Cet exemple codé de la version beta disparaîtra prochainement. Un lien vers le code stabilisé sera fourni dès que ce code sera disponible sur GCWeb.</p>
</div>
<p>La version bêta est une amélioration par rapport à la version stable. Le code est toujours en révision. Il se peut que des modifications y soient apportées.</p>
<p>La version bêta remplacera éventuellement la version stable.</p>
<p>Vous devrez utiliser un CSS distinct pour mettre en œuvre la version bêta de ce modèle.</p>
Expand All @@ -69,365 +71,9 @@ title: "Pages d'accueil institutionnelle - Modèle obligatoire de Canada.ca"
</div>
</div>
</div>
<details>
<summary>Code</summary>
<span id="code"></span>
<div class="wb-tabs">
<div class="tabpanels">
<details id="details-panel1">
<summary>HTML</summary>
<pre><code>&lt;div class="provisional bg-cover bg-right bg-hide-sm bg-hide-xs mrgn-tp-md pb-3" data-bgimg="put your image link here"&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="col-md-7"&gt;
&lt;h1 property="name" id="wb-cont"&gt;[Nom de l'institution]&lt;/h1&gt;
&lt;p&gt;Brève description du mandat de l'institution&lt;/p&gt;
&lt;a class="provisional btn btn-call-to-action" href="#"&gt;Bouton vers une super-tâche [facultatif]&lt;/a&gt;
&lt;/div&gt;
&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;section class="provisional gc-featured-lnk"&gt;
&lt;div class="container"&gt;
&lt;h2 class="wb-inv"&gt;Lien en vedette&lt;/h2&gt;
&lt;a class="h5" href="#"&gt;Lien en vedette [facultatif]&lt;/a&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class="provisional most-requested-bullets well well-sm brdr-0"&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="pddng-r-0 col-md-2"&gt;
&lt;h2 class="mrgn-tp-md"&gt;En demande&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="col-md-10"&gt;
&lt;ul class="wb-eqht mrgn-tp-md mrgn-bttm-md colcount-md-2"&gt;
&lt;li&gt;&lt;a href="#"&gt;[Lien vers une tâche principale]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Lien vers une tâche principale]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Lien vers une tâche principale]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Lien vers une tâche principale]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Lien vers une tâche principale]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Lien vers une tâche principale]&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class="gc-srvinfo col-md-12 mrgn-bttm-lg"&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;h2 class="wb-inv"&gt;Services et renseignements&lt;/h2&gt;
&lt;div class="wb-eqht"&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Texte de l'hyperlien]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Texte de l'hyperlien]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Texte de l'hyperlien]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Texte de l'hyperlien]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Texte de l'hyperlien]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Texte de l'hyperlien]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Texte de l'hyperlien]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Texte de l'hyperlien]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Texte de l'hyperlien]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;section class="well well-sm brdr-0 mrgn-bttm-0"&gt;
&lt;div class="container"&gt;
&lt;div class="wb-eqht"&gt;
&lt;h2 class="h3 mrgn-tp-md"&gt;Coordonnées&lt;/h2&gt;
&lt;ul class="provisional list-bld list-unstyled mrgn-tp-lg lst-spcd-2 colcount-md-3"&gt;
&lt;li&gt;&lt;a href="#"&gt;Communiquer avec [institution]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Tâche de contact 2]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Tâche de contact 3]&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
&lt;section class="col-md-8 pull-left mrgn-bttm-lg"&gt;
&lt;h2 class="h3 mrgn-tp-md"&gt;À propos de [Institution]&lt;/h2&gt;
&lt;ul class="provisional list-bld list-unstyled mrgn-tp-lg lst-spcd-2 colcount-md-2"&gt;
&lt;li&gt;&lt;a href="#"&gt;Mandat&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Structure organisationnelle&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Transparence&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Possibilités d'emploi&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Rapports&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Observation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Avis de mesure d'exécution&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Lien institutionnel]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Lien institutionnel]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;More: &lt;a href="#"&gt;Au sujet de [institution]&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/section&gt;
&lt;div class="provisional col-md-4 col-sm-5 pull-right xs-left"&gt;
&lt;section class="lnkbx"&gt;
&lt;h2 class="h3"&gt;Ministre&lt;/h2&gt;
&lt;p&gt;
&lt;a href="#"&gt;[(L'honorable) prénom et nom de famille]&lt;/a&gt;&lt;br&gt;
&lt;small&gt;Titre officiel du ministre&lt;/small&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;a href="#"&gt;[(L'honorable) prénom et nom de famille]&lt;/a&gt;&lt;br&gt;
&lt;small&gt;Titre officiel du ministre&lt;/small&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;a href="#"&gt;[(L'honorable) prénom et nom de famille]&lt;/a&gt;&lt;br&gt;
&lt;small&gt;Titre officiel du ministre&lt;/small&gt;
&lt;/p&gt;
&lt;/section&gt;
&lt;section class="provisional followus"&gt;
&lt;h2 class="mrgn-tp-lg h3"&gt;Suivezs&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#" class="facebook" rel="external"&gt;&lt;span class="wb-inv"&gt;Facebook&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="twitter" rel="external"&gt;&lt;span class="wb-inv"&gt;Twitter&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="youtube" rel="external"&gt;&lt;span class="wb-inv"&gt;YouTube&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="linkedin" rel="external"&gt;&lt;span class="wb-inv"&gt;LinkedIn&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;section class="col-md-4 wb-feeds limit-3 gc-nws"&gt;
&lt;h2 class="h3"&gt;Nouvelles&lt;/h2&gt;
&lt;!-- démonstration de l'apparence - utiliser le flux json le cas échéant --&gt;
&lt;ul class="feeds-cont list-unstyled lst-spcd feed-active"&gt;
&lt;li&gt;&lt;a href="#"&gt;[Titre de nouvelle]&lt;/a&gt;&lt;br&gt; &lt;small class="feeds-date"&gt;AAAA-MM-JJ HH:MM&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Titre de nouvelle]&lt;/a&gt;&lt;br&gt; &lt;small class="feeds-date"&gt;AAAA-MM-JJ HH:MM&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Titre de nouvelle]&lt;/a&gt;&lt;br&gt; &lt;small class="feeds-date"&gt;AAAA-MM-JJ HH:MM&lt;/small&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- exemple de flux json pour les nouvelles
&lt;ul class="feeds-cont list-unstyled lst-spcd"&gt;
&lt;li&gt; &lt;a data-ajax="https://www.canada.ca/content/canadasite/api/nws/fds/en/web-feeds/revenue-agency.json" href="https://www.canada.ca/en/revenue-agency.atom.xml" rel="external"&gt;Canada Revenue Agency news items&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;--&gt;
&lt;p&gt;En savoir plus :&lt;a href="#" class="admin"&gt;Nouvelles de [Institution]&lt;/a&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;section class="col-md-8 gc-prtts"&gt;
&lt;h2 class="h3"&gt;En vedette&lt;/h2&gt;
&lt;div class="row wb-eqht gc-srvinfo"&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="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a href="#" class="stretched-link"&gt;[Hyperlien de l'élément]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brève description de l'élément en vedette.&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="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a href="#" class="stretched-link"&gt;[Hyperlien de l'élément]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brève description de l'élément en vedette.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<details id="details-panel2">
<summary>CSS</summary>
<pre><code>.provisional.bg-cover {
background-size: cover;
}

.provisional.bg-right {
background-position: right;
}

.provisional.pb-3 {
padding-bottom: 15px;
}

.provisional.btn-call-to-action {
font-size: 1em;
}

.provisional.gc-featured-lnk {
background: #31708f;
margin-bottom: 0em;
padding-top:20px;
padding-bottom:20px;
}

.provisional.gc-featured-lnk a {
color:#fff
}

ul.feeds-cont li a {
font-weight: bold;
}

.provisional.most-requested-bullets li {
font-family: 'Lato', sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 26px;
margin-top: 0
}

.provisional.most-requested-bullets .pddng-r-0 {
padding-right: 0px;
}

.provisional.most-requested-bullets h2 {
font-size: 1.2em;
}

.provisional.list-bld {
font-weight: 600;
}

.provisional.followus h2 {
font-size: 1.1em;
margin-top: 10px;
}

.provisional.followus {
padding: 0;
}

.provisional.followus h2 {
display: block;
}

.provisional.followus h2,
.provisional.followus ul {
margin-left: 0;
}

.provisional.followus-vertical {
line-height: 0em;
}

.provisional.followus-vertical,
.provisional.followus {
background-color: transparent;
}

.provisional.followus-vertical a {
text-decoration: none;
}

.provisional.followus-vertical ul {
display: block;
list-style-type: none;
margin-block-start: 1em;
padding-inline-start: 1em;
font-size: 16px;
margin-block-end: 0em;
}

.provisional.followus-vertical ul li {
margin-bottom: 15px;
}

.provisional.followus-vertical ul li:last-child {
margin-bottom: 0px;
}

.provisional.followus-vertical ul li a {
border: none;
padding: 0px 5px;
}

.provisional.followus ul li a {
border: none;
}

.provisional .social-lnk {
position: relative;
bottom:-18px;
left:45px;
}

.provisional.followus-vertical li {
display: block;
background-position: left;
}

.provisional.followus .facebook,
.provisional.followus .twitter,
.provisional.followus .youtube,
.provisional.followus .instagram,
.provisional.followus .linkedin {
display: block;
height: 38px;
width: 38px;
}
/* supprimez cette section si vous ne voulez pas les nouvelles icônes */

.provisional.followus .facebook {
background: url("https://design.canada.ca/images/social-media/facebook.png") 0 0 / cover no-repeat;
}
.provisional.followus .twitter {
background: url("https://design.canada.ca/images/social-media/twitter.png") 0 0 / cover no-repeat;
}
.provisional.followus .youtube {
background: url("https://design.canada.ca/images/social-media/youtube.png") 0 0 / cover no-repeat;
}
.provisional.followus .instagram {
background: url("https://design.canada.ca/images/social-media/instagram.png") 0 0 / cover no-repeat;
}
.provisional.followus .linkedin {
background: url("https://design.canada.ca/images/social-media/linkedin.png") 0 0 / cover no-repeat;
}
/* fin des nouvelles icônes de réseaux sociaux */

@media screen and (max-width: 767px) {
.provisional.bg-hide-xs {
background-image: url("none") !important;
}

.provisional.btn-call-to-action {
font-size: .9em;
}

.provisional.xs-left {
float: left !important;
}
}

@media (min-width:768px) and (max-width:991px) {
.provisional.bg-hide-sm {
background-image: url("none") !important;
}
}</code></pre>
</details>
</div>
</div>
</details>
<div class="clearfix"></div>
</section>
<section>
<h3>Version stable de la page d'accueil institutionnelle</h3>
<p>La version stable sera éventuellement remplacée par la version bêta.</p>
Expand Down

0 comments on commit 4032007

Please sign in to comment.