From 159bbeece22fc29398ef3958bb772340b5278edb Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Thu, 22 May 2025 14:54:37 +0200
Subject: [PATCH] =?UTF-8?q?button=20media=20=C3=A0=20finir?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom/eql/dist/assets/css/bundle.css     | 81 ++++++++++++++--
 .../custom/eql/scss/pages/ressources.scss     | 96 +++++++++++++++++--
 .../custom/eql/templates/form.html.twig       | 28 ++++++
 3 files changed, 190 insertions(+), 15 deletions(-)
 create mode 100644 web/themes/custom/eql/templates/form.html.twig

diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css
index 00059bb..659f322 100644
--- a/web/themes/custom/eql/dist/assets/css/bundle.css
+++ b/web/themes/custom/eql/dist/assets/css/bundle.css
@@ -5400,12 +5400,81 @@ svg.ext {
   content: "Filtrer par : ";
   padding-right: 1rem;
   font-weight: 800;
+  margin-bottom: 1rem;
 }
 @media (max-width: 479px) {
   .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters::before {
     padding-bottom: 1rem;
   }
 }
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources {
+  margin-top: 2rem;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button {
+  background-color: transparent;
+  border-radius: 30px;
+  border: 1px solid black;
+  padding: 0.5rem 0.8rem 0.2rem 0.6rem;
+  margin-bottom: 1rem;
+  margin-right: 0.5rem;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button:hover {
+  cursor: grab;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-videos a {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-videos a::before {
+  content: url("../images/pictos/podcasts.png");
+  padding-right: 0.5rem;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-podcasts a {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-podcasts a::before {
+  content: url("../images/pictos/podcasts.png");
+  padding-right: 0.5rem;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-reportages-photos a {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-reportages-photos a::before {
+  content: url("../images/pictos/podcasts.png");
+  padding-right: 0.5rem;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-livres a {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-livres a::before {
+  content: url("../images/pictos/podcasts.png");
+  padding-right: 0.5rem;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-articles a {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-articles a::before {
+  content: url("../images/pictos/podcasts.png");
+  padding-right: 0.5rem;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-publications-rapports a {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-publications-rapports a::before {
+  content: url("../images/pictos/podcasts.png");
+  padding-right: 0.5rem;
+}
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-ressources-hidden {
   visibility: hidden;
   height: 0;
@@ -5440,28 +5509,24 @@ svg.ext {
   margin-top: 3rem;
   text-transform: uppercase;
   font-family: "Source Code Pro";
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3 a {
   color: rgb(9, 57, 139) !important;
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3 a {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3.type-publication-issue-du-programme-eqld a:before {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3.type-publication-issue-du-programme-eqld:before {
   content: url("../images/pictos/picto-ressource-eqld.svg");
   padding-right: 1rem;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3.type-paroles-de-laureats a:before {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3.type-paroles-de-laureats:before {
   content: url("../images/pictos/picto-ressource-paroleslaureats.svg");
   padding-right: 1rem;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3.type-les-projets-en-images a:before {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3.type-les-projets-en-images:before {
   content: url("../images/pictos/picto-ressource-projetsimages.svg");
   padding-right: 1rem;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3.type-presse a:before {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3.type-presse:before {
   content: url("../images/pictos/picto-ressource-presse.svg");
   padding-right: 1rem;
 }
diff --git a/web/themes/custom/eql/scss/pages/ressources.scss b/web/themes/custom/eql/scss/pages/ressources.scss
index 381d7f5..d66ef91 100644
--- a/web/themes/custom/eql/scss/pages/ressources.scss
+++ b/web/themes/custom/eql/scss/pages/ressources.scss
@@ -145,10 +145,94 @@
                                             content: "Filtrer par : ";
                                             padding-right: 1rem;
                                             font-weight: 800;
+                                            margin-bottom: 1rem;
                                             @media (max-width: 479px){
                                                 padding-bottom: 1rem;
                                             }
                                         }
+                                        .buttons-filtres-ressources{
+                                            margin-top: 2rem;
+                                            button{
+                                                background-color: transparent;
+                                                border-radius: 30px;
+                                                border: 1px solid black;
+                                                padding: 0.5rem 0.8rem 0.2rem 0.6rem;
+                                                margin-bottom: 1rem;
+                                                margin-right: 0.5rem;
+                                                &:hover{
+                                                    cursor: grab;
+                                                }
+
+                                                &.button-videos{
+                                                    a {
+                                                    display: inline-flex;
+                                                    flex-direction: row;
+                                                    align-items: center;
+                                                        &::before{
+                                                        content:url("../images/pictos/podcasts.png");
+                                                        padding-right: 0.5rem;
+                                                        }
+                                                    }
+                                                }
+                                                &.button-podcasts{
+                                                    a {
+                                                        display: inline-flex;
+                                                        flex-direction: row;
+                                                        align-items: center;
+                                                            &::before{
+                                                            content:url("../images/pictos/podcasts.png");
+                                                            padding-right: 0.5rem;
+                                                            }
+                                                        }
+                                                }
+                                                &.button-reportages-photos{
+                                                    a {
+                                                        display: inline-flex;
+                                                        flex-direction: row;
+                                                        align-items: center;
+                                                            &::before{
+                                                            content:url("../images/pictos/podcasts.png");
+                                                            padding-right: 0.5rem;
+                                                            }
+                                                        }
+                                                }
+                                                &.button-livres{
+                                                    a {
+                                                        display: inline-flex;
+                                                        flex-direction: row;
+                                                        align-items: center;
+                                                            &::before{
+                                                            content:url("../images/pictos/podcasts.png");
+                                                            padding-right: 0.5rem;
+                                                            }
+                                                        }
+                                                }
+                                                &.button-articles{
+                                                    a {
+                                                        display: inline-flex;
+                                                        flex-direction: row;
+                                                        align-items: center;
+                                                            &::before{
+                                                            content:url("../images/pictos/podcasts.png");
+                                                            padding-right: 0.5rem;
+                                                            }
+                                                        }
+                                                }
+                                                &.button-publications-rapports{
+                                                    a {
+                                                        display: inline-flex;
+                                                        flex-direction: row;
+                                                        align-items: center;
+                                                            &::before{
+                                                            content:url("../images/pictos/podcasts.png");
+                                                            padding-right: 0.5rem;
+                                                            }
+                                                        }
+                                                }
+                                            }
+
+                                        }
+                                        
 
                                     }
                                     .view-ressources-hidden {
@@ -188,32 +272,30 @@
                                                 margin-top: 3rem;
                                                 text-transform: uppercase;
                                                 font-family: 'Source Code Pro';
-                                                a{color: rgb(9, 57, 139) !important;}
-                                            }
-                                            h3 a{
+                                                color: rgb(9, 57, 139) !important;
                                                 display: flex;
                                                 flex-direction: row;
                                                 align-items: center;
                                             }
-                                            h3.type-publication-issue-du-programme-eqld a{
+                                            h3.type-publication-issue-du-programme-eqld {
                                                 &:before{
                                                     content:url("../images/pictos/picto-ressource-eqld.svg");
                                                     padding-right: 1rem;
                                                 }
                                             }
-                                            h3.type-paroles-de-laureats a{
+                                            h3.type-paroles-de-laureats {
                                                 &:before{
                                                     content:url("../images/pictos/picto-ressource-paroleslaureats.svg");
                                                     padding-right: 1rem;
                                                 }
                                             }
-                                            h3.type-les-projets-en-images a{
+                                            h3.type-les-projets-en-images {
                                                 &:before{
                                                     content:url("../images/pictos/picto-ressource-projetsimages.svg");
                                                     padding-right: 1rem;
                                                 }
                                             }
-                                            h3.type-presse a{
+                                            h3.type-presse {
                                                 &:before{
                                                     content:url("../images/pictos/picto-ressource-presse.svg");
                                                     padding-right: 1rem;
diff --git a/web/themes/custom/eql/templates/form.html.twig b/web/themes/custom/eql/templates/form.html.twig
new file mode 100644
index 0000000..32e5c5a
--- /dev/null
+++ b/web/themes/custom/eql/templates/form.html.twig
@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a 'form' element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the wrapper element.
+ * - children: The child elements of the form.
+ *
+ * @see template_preprocess_form()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="buttons-filtres-ressources">
+   <button class="button-videos" type="button" style=""><a href="/ressources?field_type_de_media_target_id=681&field_type_de_ressource_target_id=All&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine=#filtres"> Vidéos</a></button>
+
+   <button class="button-podcasts" type="button" style=""><span>Podcasts</span></button>
+
+   <button class="button-reportages-photos" type="button" style=""><span>Reportages photos</span></button>
+   <button class="button-livres" type="button" style=""><span>Livres</span></button>
+   <button class="button-articles" type="button" style=""><span>Articles</span></button>
+   <button class="button-publications-rapports" type="button" style=""><span>Publications/rapports</span></button>
+</div>
+
+<form{{ attributes }}>
+  {{ children }}
+</form>