From bf741e9e7ba1b8b81442b2ba55c51ff1b8f0b023 Mon Sep 17 00:00:00 2001
From: JP Simonnet <jean-philippe.simonnet@developpement-durable.gouv.fr>
Date: Sat, 28 Oct 2023 23:46:10 +0200
Subject: [PATCH] =?UTF-8?q?Gros=20changements=20sur=20liens=20et=20encadr?=
=?UTF-8?q?=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
design_system_admin/modeles/dsfr_encadre.html | 46 ++-
design_system_admin/modeles/dsfr_lien.html | 314 +++++++++++++-----
2 files changed, 260 insertions(+), 100 deletions(-)
diff --git a/design_system_admin/modeles/dsfr_encadre.html b/design_system_admin/modeles/dsfr_encadre.html
index c127b5e..51013b8 100644
--- a/design_system_admin/modeles/dsfr_encadre.html
+++ b/design_system_admin/modeles/dsfr_encadre.html
@@ -141,6 +141,27 @@
[(#ENV{icone}|=={zoom-out2}|oui) #SET{mon-icone, ' fr-icon-zoom-out-line'} ]
[(#ENV{icone}|=={zoom2}|oui) #SET{mon-icone, ' fr-icon-zoom-in-line'} ]
+[(#ENV{couleur}|=={jaune}|oui) #SET{ma_couleur, 'fr-callout--yellow-moutarde'} ]
+[(#ENV{couleur}|=={jaune-clair}|oui) #SET{ma_couleur, 'fr-callout--yellow-tournesol'} ]
+[(#ENV{couleur}|=={bleu}|oui) #SET{ma_couleur, 'fr-callout--blue-cumulus'} ]
+[(#ENV{couleur}|=={bleu-clair}|oui) #SET{ma_couleur, 'fr-callout--blue-ecume'} ]
+[(#ENV{couleur}|=={bleu-canard}|oui) #SET{ma_couleur, 'fr-callout--green-archipel'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
+[(#ENV{couleur}|=={violet}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
+[(#ENV{couleur}|=={beige}|oui) #SET{ma_couleur, 'fr-callout--pink-macaron'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
+[(#ENV{couleur}|=={rose}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
+[(#ENV{couleur}|=={vert}|oui) #SET{ma_couleur, 'fr-callout--green-emeraude'} ]
+[(#ENV{couleur}|=={vert-clair}|oui) #SET{ma_couleur, 'fr-callout--green-menthe'} ]
+[(#ENV{couleur}|=={vert-tilleul}|oui) #SET{ma_couleur, 'fr-callout--green-tilleul-verveine'} ]
+[(#ENV{couleur}|=={vert-fluo}|oui) #SET{ma_couleur, 'fr-callout--green-bourgeon'} ]
+[(#ENV{couleur}|=={orange}|oui) #SET{ma_couleur, 'fr-callout--orange-terre-battue'} ]
+[(#ENV{couleur}|=={cafe}|oui) #SET{ma_couleur, 'fr-callout--brown-cafe-creme'} ]
+[(#ENV{couleur}|=={marron-clair}|oui) #SET{ma_couleur, 'fr-callout--brown-caramel'} ]
+[(#ENV{couleur}|=={marron}|oui) #SET{ma_couleur, 'fr-callout--brown-opera'} ]
+[(#ENV{couleur}|=={gris-clair}|oui) #SET{ma_couleur, 'fr-callout--beige-gris-galet'} ]
+[(#ENV{couleur}|=={gris}|oui) #SET{ma_couleur, 'fr-card--grey'} ]
+
[(#ENV{fin}|non)
<div class="fr-callout
@@ -152,30 +173,7 @@
#GET{mon-icone}
[(#REM) couleurs pour la compatibilité avec les anciens contenus ]
-
-[(#ENV{couleur}|=={jaune}|oui) fr-callout--yellow-moutarde]
-[(#ENV{couleur}|=={jaune-clair}|oui) fr-callout--yellow-tournesol]
-[(#ENV{couleur}|=={bleu}|oui) fr-callout--blue-cumulus]
-[(#ENV{couleur}|=={bleu-clair}|oui) fr-callout--blue-ecume]
-[(#ENV{couleur}|=={bleu-canard}|oui) fr-callout--green-archipel]
-[(#ENV{couleur}|=={rouge}|oui) fr-callout--purple-glycine]
-[(#ENV{couleur}|=={violet}|oui) fr-callout--purple-glycine]
-[(#ENV{couleur}|=={beige}|oui) fr-callout--pink-macaron]
-[(#ENV{couleur}|=={rouge}|oui) fr-callout--pink-tuile]
-[(#ENV{couleur}|=={rose}|oui) fr-callout--pink-tuile]
-[(#ENV{couleur}|=={vert}|oui) fr-callout--green-emeraude]
-[(#ENV{couleur}|=={vert-clair}|oui) fr-callout--green-menthe]
-[(#ENV{couleur}|=={vert-tilleul}|oui) fr-callout--green-tilleul-verveine]
-[(#ENV{couleur}|=={vert-fluo}|oui) fr-callout--green-bourgeon]
-[(#ENV{couleur}|=={orange}|oui) fr-callout--orange-terre-battue]
-[(#ENV{couleur}|=={cafe}|oui) fr-callout--brown-cafe-creme]
-[(#ENV{couleur}|=={marron-clair}|oui) fr-callout--brown-caramel]
-[(#ENV{couleur}|=={marron}|oui) fr-callout--brown-opera]
-[(#ENV{couleur}|=={gris-clair}|oui) fr-callout--beige-gris-galet]
-[(#ENV{couleur}|=={gris}|oui) background-contrast-grey]
-
-[(#REM) nouvelles couleur ]
-[(#ENV{couleur-dsfr}|oui) fr-callout--#ENV{couleur-dsfr}]
+[(#GET{ma_couleur})]
">
[<p class="fr-alert__title">(#ENV*{titre}|propre|paragrapher)</p>]
diff --git a/design_system_admin/modeles/dsfr_lien.html b/design_system_admin/modeles/dsfr_lien.html
index d006be0..4dfdf86 100644
--- a/design_system_admin/modeles/dsfr_lien.html
+++ b/design_system_admin/modeles/dsfr_lien.html
@@ -2,31 +2,11 @@
Gestion des liens d'article, de rubriques d'url et de doc avec les modeles correspondants
]
-[(#REM) renommage des variables de liens
+[(#REM) gestion d'une div de debut et de fin ]
-|id=5186
-|rub=319 (rubrique)
-|doc=156 (document)
-
-|petit ou |grand
-
-|icone=fr-fi-arrow-right-line
-|icone-droite
-|icone-gauche
-
-
-|url=http:// .... (avec verification si l'url contient pdf ou pas)
-
-|nouvelle-fenetre
-
-|forme=carte ou |forme=tuile ou |forme=tag ou |forme=bouton ou |forme=bloc ?
-
-Verification dans l'ordre : rubrique, document, url, pdf ou article (par defaut)
-
-ajout des taille sm (petit) et LG (grande)
-
-]
+[(#ENV{debut}|oui)<div class="fr-grid-row [(#ENV{marge}|oui) fr-grid-row--gutters ] fr-mb-3w">]
+[(#ENV{fin}|oui)</div>]
[(#REM) gestion des icones ]
@@ -175,61 +155,154 @@ ajout des taille sm (petit) et LG (grande)
[(#ENV{icone-dsfr}|oui) #SET{mon-icone, #ENV{icone-dsfr}}]
+[(#REM) gestion des couleurs ]
+
+[(#ENV{couleur}|=={jaune}|oui) #SET{ma_couleur, 'fr-callout--yellow-moutarde'} ]
+[(#ENV{couleur}|=={jaune-clair}|oui) #SET{ma_couleur, 'fr-callout--yellow-tournesol'} ]
+[(#ENV{couleur}|=={bleu}|oui) #SET{ma_couleur, 'fr-callout--blue-cumulus'} ]
+[(#ENV{couleur}|=={bleu-clair}|oui) #SET{ma_couleur, 'fr-callout--blue-ecume'} ]
+[(#ENV{couleur}|=={bleu-canard}|oui) #SET{ma_couleur, 'fr-callout--green-archipel'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
+[(#ENV{couleur}|=={violet}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
+[(#ENV{couleur}|=={beige}|oui) #SET{ma_couleur, 'fr-callout--pink-macaron'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
+[(#ENV{couleur}|=={rose}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
+[(#ENV{couleur}|=={vert}|oui) #SET{ma_couleur, 'fr-callout--green-emeraude'} ]
+[(#ENV{couleur}|=={vert-clair}|oui) #SET{ma_couleur, 'fr-callout--green-menthe'} ]
+[(#ENV{couleur}|=={vert-tilleul}|oui) #SET{ma_couleur, 'fr-callout--green-tilleul-verveine'} ]
+[(#ENV{couleur}|=={vert-fluo}|oui) #SET{ma_couleur, 'fr-callout--green-bourgeon'} ]
+[(#ENV{couleur}|=={orange}|oui) #SET{ma_couleur, 'fr-callout--orange-terre-battue'} ]
+[(#ENV{couleur}|=={cafe}|oui) #SET{ma_couleur, 'fr-callout--brown-cafe-creme'} ]
+[(#ENV{couleur}|=={marron-clair}|oui) #SET{ma_couleur, 'fr-callout--brown-caramel'} ]
+[(#ENV{couleur}|=={marron}|oui) #SET{ma_couleur, 'fr-callout--brown-opera'} ]
+[(#ENV{couleur}|=={gris-clair}|oui) #SET{ma_couleur, 'fr-callout--beige-gris-galet'} ]
+[(#ENV{couleur}|=={gris}|oui) #SET{ma_couleur, 'fr-card--grey'} ]
+
+[(#REM) correction du style pour les couleurs ]
+<style>
+.fr-card__content {
+ box-shadow: none !important;
+}
+</style>
+
+[(#REM) gestion des couleurs de badge ]
+[(#ENV{couleur_badge}|=={jaune}|oui) #SET{moncouleurbadge, 'fr-badge--new'} ]
+[(#ENV{couleur_badge}|=={marron}|oui) #SET{moncouleurbadge, 'fr-badge--warning'} ]
+[(#ENV{couleur_badge}|=={bleu}|oui) #SET{moncouleurbadge, 'fr-badge--info'} ]
+[(#ENV{couleur_badge}|=={rouge}|oui) #SET{moncouleurbadge, 'fr-badge--error'} ]
+[(#ENV{couleur_badge}|=={vert}|oui) #SET{moncouleurbadge, 'fr-badge--success'} ]
+
+
+
<BOUCLE_condition_rubrique(CONDITION){si #ENV{rub}|oui}>
[(#REM) c'est une rubrique ]
[(#REM) c'est une rubrique avec un format card ]
+
<BOUCLE_rubrique-carte(RUBRIQUES){SI #ENV{carte}|oui}{id_rubrique=#ENV{rub}} >
- <div class="fr-card fr-enlarge-link fr-card--horizontal fr-card--sm hauteur-limitee fr-mb-5v ">
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-card fr-enlarge-link
+ [(#ENV{vertical}|non) fr-card--horizontal]
+ [(#ENV{ratio50}|oui) fr-card--horizontal-half]
+ [(#ENV{ratio30}|oui) fr-card--horizontal-tier]
+ fr-card--sm [(#ENV{hauteur}|oui) hauteur-limitee ] fr-mb-2w ">
<div class="fr-card__body">
- <div class="fr-card__content fr-background-alt--orange-terre-battue">
+ <div class="fr-card__content [(#GET{ma_couleur})]">
<p class="fr-card__title">
<a href="#URL_RUBRIQUE">#TITRE</a>
</p>
<div class="fr-card__desc">[(#INTRODUCTION{150})]</div>
- <div class="fr-card__start">
+ [<div class="fr-card__start">
+ <ul class="fr-badges-group">
+ <li><p class="fr-badge [(#GET{moncouleurbadge})]">(#ENV{badge})</p></li>
+ </ul>
+ </div>]
+ [(#ENV{sans-date}|non)<div class="fr-card__start">
<p class="fr-card__detail fr-icon-calendar-line">[(#DATE|affdate)]</p>
- </div>
+ </div>]
</div>
</div>
+ <BOUCLE_conditionsimage0(CONDITION){SI #ENV{sans-image}|non}>
<div class="fr-card__header">
<div class="fr-card__img">
+ <BOUCLE_conditionsimage(CONDITION){SI #ENV{logo}|oui}>
+ [(#LOGO_ARTICLE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ [(#LOGO_RUBRIQUE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_conditionsimage>
+
+ <BOUCLE_conditionsimage2(CONDITION){SI #ENV{image}|oui}>
<BOUCLE_image_bignews3(DOCUMENTS){id_rubrique}{0,1}>
- [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
- </BOUCLE_image_bignews3>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_bignews3>
+ </BOUCLE_conditionsimage2>
+
+ <BOUCLE_conditionsimagerub_id(CONDITION){SI #ENV{image_id}|oui}>
+ <BOUCLE_image_docrub_id(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_docrub_id>
+ </BOUCLE_conditionsimagerub_id>
+
+ <BOUCLE_conditionsimage3(CONDITION){SI #ENV{image}|non}{SI #ENV{logo}|non}{SI #ENV{image_id}|non}>
<BOUCLE_theme23(MOTS){id_rubrique}{id_groupe=14}>
#SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
<img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
</BOUCLE_theme23>
- <//B_image_bignews3>
+ [(#LOGO_RUBRIQUE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ <//B_theme23>
+ </BOUCLE_conditionsimage3>
+
</div>
</div>
+ </BOUCLE_conditionsimage0>
+
</div>
+
+ [(#ENV{vertical}|oui)</div>]
</BOUCLE_rubrique-carte>
[(#REM) c'est une rubrique avec un format tuile ]
<BOUCLE_rubrique-tuile(RUBRIQUES){SI #ENV{tuile}|oui} {id_rubrique=#ENV{rub}}>
- <div class="fr-tile fr-enlarge-link fr-tile--horizontal">
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-tile fr-enlarge-link [(#ENV{vertical}|non)fr-tile--horizontal] fr-mb-2w">
<div class="fr-tile__body">
+ <div class="fr-tile__content">
<h4 class="fr-tile__title">
- <a class="fr-tile__link" href="#URL_RUBRIQUE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ <a class="" href="#URL_RUBRIQUE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</h4>
<div class="fr-tile__desc">[(#INTRODUCTION{150})]</div>
</div>
- <div class="fr-tile__img">
- <BOUCLE_image_rub_tuile(DOCUMENTS){id_rubrique}{0,1}>
- [(#FICHIER |image_reduire{200,350} |image_recadre{200,200,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </div>
+ <BOUCLE_conditionstuileimage(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-tile__img">
+
+
+ <BOUCLE_image_rub_tuile(DOCUMENTS){id_rubrique}{0,1}>
+ [(#FICHIER |image_reduire{80,80} |image_recadre{80,80,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
</BOUCLE_image_rub_tuile>
+
<BOUCLE_theme25(MOTS){id_rubrique}{id_groupe=14}>
#SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
<img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
</BOUCLE_theme25>
- <//B_image_tuile>
- </div>
+
+
+ </div>
+ </BOUCLE_conditionstuileimage>
</div>
+ [(#ENV{vertical}|oui)</div>]
</BOUCLE_rubrique-tuile>
[(#REM) c'est un article avec un format bouton ]
@@ -312,31 +385,78 @@ ajout des taille sm (petit) et LG (grande)
<BOUCLE_url_carte(CONDITION){si #ENV{url}|oui}{si #ENV{url}|contient_pdf|non}{si #ENV{carte}|oui}>
- <div class="fr-card fr-enlarge-link fr-card--horizontal fr-mb-2w ">
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+
+ <div class="fr-card fr-enlarge-link
+ [(#ENV{vertical}|non) fr-card--horizontal]
+ [(#ENV{ratio50}|oui) fr-card--horizontal-half]
+ [(#ENV{ratio30}|oui) fr-card--horizontal-tier]
+ fr-mb-2w ">
<div class="fr-card__body">
- <div class="fr-card__content">
+ <div class="fr-card__content [(#GET{ma_couleur})]">
<p class="fr-card__title">
- <a href="#ENV{url}">#ENV{titre}</a>
+ <a href="#ENV{url}">[(#ENV{titre}|non) #ENV{url}][(#ENV{titre}|oui) #ENV{titre}]</a>
</p>
- <div class="fr-card__desc fr-mb-2w">#ENV{texte}</div>
+ [<div class="fr-card__desc fr-mb-2w">(#ENV{texte})</div>]
+ [<div class="fr-card__start">
+ <ul class="fr-badges-group">
+ <li><p class="fr-badge [(#GET{moncouleurbadge})]">(#ENV{badge})</p></li>
+ </ul>
+ </div>]
</div>
</div>
+
+ <BOUCLE_conditionsimage00(CONDITION){SI #ENV{image_id}|oui}>
+ <div class="fr-card__header">
+ <div class="fr-card__img">
+ <BOUCLE_image_id(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_id>
+ </div>
+ </div>
+ </BOUCLE_conditionsimage00>
+
</div>
+ [(#ENV{vertical}|oui)</div>]
</BOUCLE_url_carte>
[(#REM) c'est une url avec un format tuile ]
<BOUCLE_url_tuile(CONDITION){si #ENV{url}|oui}{si #ENV{url}|contient_pdf|non}{SI #ENV{tuile}|oui}>
-
- <div class="fr-tile fr-enlarge-link fr-tile--horizontal fr-mb-2w">
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-tile fr-enlarge-link [(#ENV{vertical}|non)fr-tile--horizontal] fr-mb-2w">
<div class="fr-tile__body">
+ <div class="fr-tile__content">
[<h4 class="fr-tile__title">
- <a class="fr-tile__link" href="#ENV{url}">(#ENV{titre})</a>
+ <a class="" href="#ENV{url}">(#ENV{titre})</a>
</h4>]
[<div class="fr-tile__desc">(#ENV{texte})</div>]
</div>
+ </div>
+
+ <BOUCLE_conditionsimagetuile(CONDITION){SI #ENV{image_id}|oui}>
+ <div class="fr-tile__img">
+
+ <BOUCLE_image_id_tuile(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_id_tuile>
+
+ </div>
+ </BOUCLE_conditionsimagetuile>
+
</div>
+ [(#ENV{vertical}|oui)</div>]
</BOUCLE_url_tuile>
[(#REM) c'est une url avec un format bouton ]
@@ -369,18 +489,6 @@ ajout des taille sm (petit) et LG (grande)
</a>
</BOUCLE_url-simple>
-
-
-
-
-
-
-
-
-
-
-
-
<BOUCLE_condition_pdf(CONDITION){si #ENV{url}|contient_pdf|oui}>
<BOUCLE_condition_document-pdf(CONDITION){si #ENV{doc}|non}>
@@ -422,7 +530,7 @@ ajout des taille sm (petit) et LG (grande)
</BOUCLE_condition_document-pdf>
- </BOUCLE_condition_pdf>
+ </BOUCLE_condition_pdf>
<BOUCLE_condition_article(CONDITION){si #ENV{id}|oui}>
[(#REM) c'est un article ]
@@ -430,43 +538,97 @@ ajout des taille sm (petit) et LG (grande)
[(#REM) c'est un article avec un format card ]
<BOUCLE_article-carte(ARTICLES){SI #ENV{carte}|oui}{id_article=#ENV{id}} >
- <div class="fr-card fr-enlarge-link fr-card--horizontal fr-card--sm hauteur-limitee fr-mb-5v ">
+
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+
+ <div class="fr-card fr-enlarge-link
+ [(#ENV{vertical}|non) fr-card--horizontal]
+ [(#ENV{ratio50}|oui) fr-card--horizontal-half]
+ [(#ENV{ratio30}|oui) fr-card--horizontal-tier]
+ fr-card--sm [(#ENV{hauteur}|oui) hauteur-limitee ] fr-mb-2w ">
<div class="fr-card__body">
- <div class="fr-card__content fr-background-alt--orange-terre-battue">
+ <div class="fr-card__content [(#GET{ma_couleur})]">
<p class="fr-card__title">
<a href="#URL_ARTICLE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</p>
<div class="fr-card__desc">[(#INTRODUCTION{150})]</div>
- <div class="fr-card__start">
+ [<div class="fr-card__start">
+ <ul class="fr-badges-group">
+ <li><p class="fr-badge [(#GET{moncouleurbadge})]">(#ENV{badge})</p></li>
+ </ul>
+ </div>]
+ [(#ENV{sans-date}|non)<div class="fr-card__start">
<p class="fr-card__detail fr-icon-calendar-line">[(#DATE|affdate)]</p>
- </div>
+ </div>]
</div>
</div>
- <div class="fr-card__header">
- <div class="fr-card__img">
- <BOUCLE_image_bignews4(DOCUMENTS){id_article}{0,1}>
+
+ <BOUCLE_conditionsimage_a0(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-card__header">
+ <div class="fr-card__img">
+ <BOUCLE_conditionsimage_a(CONDITION){SI #ENV{logo}|oui}>
+ [(#LOGO_ARTICLE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ [(#LOGO_RUBRIQUE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_conditionsimage_a>
+
+ <BOUCLE_conditionsimage_a2(CONDITION){SI #ENV{image}|oui}>
+ <BOUCLE_image_bignews_a3(DOCUMENTS){id_article}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_bignews_a3>
+ </BOUCLE_conditionsimage_a2>
+
+ <BOUCLE_conditionsimage_id(CONDITION){SI #ENV{image_id}|oui}>
+ <BOUCLE_image_doc_id(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
[(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
- </BOUCLE_image_bignews4>
- <BOUCLE_theme24(MOTS){id_article}{id_groupe=14}>
- #SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
- <img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
- </BOUCLE_theme24>
- <//B_image_bignews4>
- </div>
- </div>
+ </BOUCLE_image_doc_id>
+ </BOUCLE_conditionsimage_id>
+
+ <BOUCLE_conditionsimage_a3(CONDITION){SI #ENV{image}|non}{SI #ENV{logo}|non}{SI #ENV{image_id}|non}>
+ <BOUCLE_theme23_a(MOTS){id_article}{id_groupe=14}>
+ #SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
+ <img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
+ </BOUCLE_theme23_a>
+
+ <BOUCLE_image_par_defaut(ARTICLES){id_article}{0,1}>
+ [(#LOGO_ARTICLE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ [(#LOGO_RUBRIQUE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_par_defaut>
+
+ <//B_theme23_a>
+ </BOUCLE_conditionsimage_a3>
+
+ </div>
+ </div>
+ </BOUCLE_conditionsimage_a0>
+
</div>
+ [(#ENV{vertical}|oui)</div>]
</BOUCLE_article-carte>
[(#REM) c'est un article avec un format tuile ]
<BOUCLE_article-tuile(ARTICLES){SI #ENV{tuile}|oui} {id_article=#ENV{id}}>
- <div class="fr-tile fr-enlarge-link fr-tile--horizontal">
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-tile fr-enlarge-link [(#ENV{vertical}|non)fr-tile--horizontal] fr-mb-2w">
<div class="fr-tile__body">
+ <div class="fr-tile__content">
<h4 class="fr-tile__title">
<a class="fr-tile__link" href="#URL_ARTICLE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</h4>
<div class="fr-tile__desc">[(#INTRODUCTION{150})]</div>
</div>
+ </div>
+ <BOUCLE_conditionstuileimage2(CONDITION){SI #ENV{sans-image}|non}>
<div class="fr-tile__img">
<BOUCLE_image_tuile(DOCUMENTS){id_article}{0,1}>
[(#FICHIER |image_reduire{200,350} |image_recadre{200,200,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
@@ -474,7 +636,9 @@ ajout des taille sm (petit) et LG (grande)
<img src="#CHEMIN{../dse_theme/images/ODD-banniere-agenda.jpg}" width="250" height="140" class="fr-responsive-img" alt="" />
<//B_image_tuile>
</div>
+ </BOUCLE_conditionstuileimage2>
</div>
+ [(#ENV{vertical}|oui)</div>]
</BOUCLE_article-tuile>
[(#REM) c'est un article avec un format bouton ]
@@ -513,9 +677,7 @@ ajout des taille sm (petit) et LG (grande)
</BOUCLE_condition_article>
- <//BOUCLE_condition_pdf>
-
- <//B_condition_url>
+ <//B_condition_pdf>
<//B_condition_document>
--
GitLab