瀏覽代碼

button media css

ouidade 2 天之前
父節點
當前提交
cb567f0601

+ 49 - 14
web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5370,7 +5370,7 @@ svg.ext {
 }
 .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 {
   display: grid;
-  grid-template-columns: 20% 75%;
+  grid-template-columns: 30% 75%;
   gap: 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 {
@@ -5396,23 +5396,21 @@ svg.ext {
     margin-left: 0;
   }
 }
-.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 {
-  content: "Filtrer par : ";
+.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::before {
+  content: "Afficher : ";
   padding-right: 1rem;
   font-weight: 800;
   margin-bottom: 1rem;
+  display: block;
+  width: 100%;
 }
 @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 {
+  .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::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;
@@ -5420,6 +5418,14 @@ svg.ext {
 }
 .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;
+  background-color: rgb(9, 57, 139);
+  color: white;
+}
+.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 a:hover {
+  color: white;
+}
+.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 {
+  margin-top: 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 button.button-videos a {
   display: inline-flex;
@@ -5427,54 +5433,83 @@ svg.ext {
   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");
+  content: url("../images/pictos/videos.svg");
   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-videos a:hover::before {
+  content: url("../images/pictos/videos-blanc.svg");
+}
 .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");
+  content: url("../images/pictos/podcasts.svg");
   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:hover::before {
+  content: url("../images/pictos/podcasts-blanc.svg");
+}
 .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");
+  content: url("../images/pictos/en-images.svg");
   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:hover::before {
+  content: url("../images/pictos/en-images-blanc.svg");
+}
 .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");
+  content: url("../images/pictos/ecrits.svg");
   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:hover::before {
+  content: url("../images/pictos/ecrits-blanc.svg");
+}
 .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");
+  content: url("../images/pictos/ecrits.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:hover::before {
+  content: url("../images/pictos/ecrits-blanc.svg");
+}
 .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");
+  content: url("../images/pictos/ecrits.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:hover::before {
+  content: url("../images/pictos/ecrits-blanc.svg");
+}
+.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 form::before {
+  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 form::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-ressources-hidden {
   visibility: hidden;
   height: 0;

File diff suppressed because it is too large
+ 131 - 0
web/themes/custom/eql/dist/assets/images/pictos/ecrits-blanc.svg


二進制
web/themes/custom/eql/dist/assets/images/pictos/ecrits.png


File diff suppressed because it is too large
+ 131 - 0
web/themes/custom/eql/dist/assets/images/pictos/ecrits.svg


File diff suppressed because it is too large
+ 227 - 0
web/themes/custom/eql/dist/assets/images/pictos/en-images-blanc.svg


二進制
web/themes/custom/eql/dist/assets/images/pictos/en-images.png


File diff suppressed because it is too large
+ 227 - 0
web/themes/custom/eql/dist/assets/images/pictos/en-images.svg


File diff suppressed because it is too large
+ 84 - 0
web/themes/custom/eql/dist/assets/images/pictos/podcasts-blanc.svg


二進制
web/themes/custom/eql/dist/assets/images/pictos/podcasts.png


File diff suppressed because it is too large
+ 84 - 0
web/themes/custom/eql/dist/assets/images/pictos/podcasts.svg


+ 74 - 0
web/themes/custom/eql/dist/assets/images/pictos/videos-blanc.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="20.350399"
+   height="20.393066"
+   viewBox="0 0 20.350399 20.393066"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath5830">
+      <path
+         d="M 0,-31.9523 H 1260 V 31.9523 H 0 Z"
+         transform="translate(0,-15.294795)"
+         id="path5830" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath5831">
+      <path
+         d="M 0,-31.9523 H 1260 V 31.9523 H 0 Z"
+         transform="translate(-11.442769,-6.1136876)"
+         id="path5831" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath5832">
+      <path
+         d="M 0,-31.9523 H 1260 V 31.9523 H 0 Z"
+         transform="translate(0,-15.294795)"
+         id="path5832" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath5836">
+      <path
+         d="M 0,0 H 15.2628 V -15.2948 H 0 Z"
+         transform="matrix(1.3333333,0,0,-1.3333333,24.14796,455.92257)"
+         clip-rule="evenodd"
+         id="path5836" />
+    </clipPath>
+  </defs>
+  <g
+     id="layer-oc0"
+     transform="translate(-24.148428,-455.92258)">
+    <g
+       id="g5835"
+       clip-path="url(#clipPath5836)">
+      <path
+         d="m 15.9762,-0.9985 c 8.2719,0 14.9776,-6.70571 14.9776,-14.9776 0,-8.2719 -6.7057,-14.9776 -14.9776,-14.9777 -8.27192,0 -14.97765,6.7057 -14.97769,14.9776 0.01097,8.26739 6.71026,14.9667 14.97769,14.9777 z m 0,0.9985 C 7.15278,1e-5 2e-5,-7.15274 0,-15.9761 c -2e-5,-8.8234 7.15273,-15.9762 15.9761,-15.9762 8.8234,0 15.9762,7.1527 15.9762,15.9761 C 31.9523,-7.1528 24.7996,-1e-5 15.9762,0 Z"
+         style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(0.63690667,0,0,-0.63824,24.14796,455.92249)"
+         clip-path="url(#clipPath5830)"
+         id="path5833" />
+      <path
+         d="M 1.05698,-1.8233 10.0942,-7.1082 1.05698,-12.3931 Z M 0,0 V -14.1108 L 12.2346,-7.1082 0,-0.0528 Z"
+         style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(0.63690667,0,0,-0.63824,31.435936,461.78224)"
+         clip-path="url(#clipPath5831)"
+         id="path5834" />
+      <path
+         d="m 15.9762,-0.9985 c 8.2719,0 14.9776,-6.70571 14.9776,-14.9776 0,-8.2719 -6.7057,-14.9776 -14.9776,-14.9777 -8.27192,0 -14.97765,6.7057 -14.97769,14.9776 0.01097,8.26739 6.71026,14.9667 14.97769,14.9777 z m 0,0.9985 C 7.15278,1e-5 2e-5,-7.15274 0,-15.9761 c -2e-5,-8.8234 7.15273,-15.9762 15.9761,-15.9762 8.8234,0 15.9762,7.1527 15.9762,15.9761 C 31.9523,-7.1528 24.7996,-1e-5 15.9762,0 Z"
+         style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(0.63690667,0,0,-0.63824,24.14796,455.92249)"
+         clip-path="url(#clipPath5832)"
+         id="path5835" />
+    </g>
+  </g>
+</svg>

二進制
web/themes/custom/eql/dist/assets/images/pictos/videos.png


+ 74 - 0
web/themes/custom/eql/dist/assets/images/pictos/videos.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="20.350399"
+   height="20.393066"
+   viewBox="0 0 20.350399 20.393066"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath5830">
+      <path
+         d="M 0,-31.9523 H 1260 V 31.9523 H 0 Z"
+         transform="translate(0,-15.294795)"
+         id="path5830" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath5831">
+      <path
+         d="M 0,-31.9523 H 1260 V 31.9523 H 0 Z"
+         transform="translate(-11.442769,-6.1136876)"
+         id="path5831" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath5832">
+      <path
+         d="M 0,-31.9523 H 1260 V 31.9523 H 0 Z"
+         transform="translate(0,-15.294795)"
+         id="path5832" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath5836">
+      <path
+         d="M 0,0 H 15.2628 V -15.2948 H 0 Z"
+         transform="matrix(1.3333333,0,0,-1.3333333,24.14796,455.92257)"
+         clip-rule="evenodd"
+         id="path5836" />
+    </clipPath>
+  </defs>
+  <g
+     id="layer-oc0"
+     transform="translate(-24.148428,-455.92258)">
+    <g
+       id="g5835"
+       clip-path="url(#clipPath5836)">
+      <path
+         d="m 15.9762,-0.9985 c 8.2719,0 14.9776,-6.70571 14.9776,-14.9776 0,-8.2719 -6.7057,-14.9776 -14.9776,-14.9777 -8.27192,0 -14.97765,6.7057 -14.97769,14.9776 0.01097,8.26739 6.71026,14.9667 14.97769,14.9777 z m 0,0.9985 C 7.15278,1e-5 2e-5,-7.15274 0,-15.9761 c -2e-5,-8.8234 7.15273,-15.9762 15.9761,-15.9762 8.8234,0 15.9762,7.1527 15.9762,15.9761 C 31.9523,-7.1528 24.7996,-1e-5 15.9762,0 Z"
+         style="fill:#09398b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(0.63690667,0,0,-0.63824,24.14796,455.92249)"
+         clip-path="url(#clipPath5830)"
+         id="path5833" />
+      <path
+         d="M 1.05698,-1.8233 10.0942,-7.1082 1.05698,-12.3931 Z M 0,0 V -14.1108 L 12.2346,-7.1082 0,-0.0528 Z"
+         style="fill:#09398b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(0.63690667,0,0,-0.63824,31.435936,461.78224)"
+         clip-path="url(#clipPath5831)"
+         id="path5834" />
+      <path
+         d="m 15.9762,-0.9985 c 8.2719,0 14.9776,-6.70571 14.9776,-14.9776 0,-8.2719 -6.7057,-14.9776 -14.9776,-14.9777 -8.27192,0 -14.97765,6.7057 -14.97769,14.9776 0.01097,8.26739 6.71026,14.9667 14.97769,14.9777 z m 0,0.9985 C 7.15278,1e-5 2e-5,-7.15274 0,-15.9761 c -2e-5,-8.8234 7.15273,-15.9762 15.9761,-15.9762 8.8234,0 15.9762,7.1527 15.9762,15.9761 C 31.9523,-7.1528 24.7996,-1e-5 15.9762,0 Z"
+         style="fill:#09398b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(0.63690667,0,0,-0.63824,24.14796,455.92249)"
+         clip-path="url(#clipPath5832)"
+         id="path5835" />
+    </g>
+  </g>
+</svg>

+ 58 - 18
web/themes/custom/eql/scss/pages/ressources.scss

@@ -120,7 +120,7 @@
                                 }
                                 .view-base-de-donnees{
                                     display: grid;
-                                    grid-template-columns: 20% 75%;
+                                    grid-template-columns: 30% 75%;
                                     gap: 2rem;
                                     .view-filters{
                                         position: sticky;
@@ -141,36 +141,50 @@
                                         @media (max-width: 479px) {
                                             margin-left: 0;                                                
                                         }
-                                        &::before{
-                                            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;
+                                            &::before{
+                                                content: "Afficher : ";
+                                                padding-right: 1rem;
+                                                font-weight: 800;
+                                                margin-bottom: 1rem;
+                                                display: block;
+                                                width: 100%;
+                                                @media (max-width: 479px){
+                                                    padding-bottom: 1rem;
+                                                }
+                                            }
                                             button{
                                                 background-color: transparent;
-                                                border-radius: 30px;
+                                                // 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;
+                                                    background-color: $blue-dark;
+                                                    color: white;
+                                                }
+                                                a {
+                                                    &:hover{
+                                                        color: white;
+                                                    }
                                                 }
 
                                                 &.button-videos{
+                                                    margin-top: 1rem;
                                                     a {
                                                     display: inline-flex;
                                                     flex-direction: row;
                                                     align-items: center;
                                                         &::before{
-                                                        content:url("../images/pictos/podcasts.png");
+                                                        content:url("../images/pictos/videos.svg");
                                                         padding-right: 0.5rem;
+                                                           
+                                                        }
+                                                        &:hover::before{
+                                                            content:url("../images/pictos/videos-blanc.svg");
                                                         }
                                                     }
                                                 }
@@ -180,9 +194,12 @@
                                                         flex-direction: row;
                                                         align-items: center;
                                                             &::before{
-                                                            content:url("../images/pictos/podcasts.png");
+                                                            content:url("../images/pictos/podcasts.svg");
                                                             padding-right: 0.5rem;
                                                             }
+                                                            &:hover::before{
+                                                                content:url("../images/pictos/podcasts-blanc.svg");
+                                                            }
                                                         }
                                                 }
                                                 &.button-reportages-photos{
@@ -191,9 +208,12 @@
                                                         flex-direction: row;
                                                         align-items: center;
                                                             &::before{
-                                                            content:url("../images/pictos/podcasts.png");
+                                                            content:url("../images/pictos/en-images.svg");
                                                             padding-right: 0.5rem;
                                                             }
+                                                            &:hover::before{
+                                                                content:url("../images/pictos/en-images-blanc.svg");
+                                                            }
                                                         }
                                                 }
                                                 &.button-livres{
@@ -202,9 +222,12 @@
                                                         flex-direction: row;
                                                         align-items: center;
                                                             &::before{
-                                                            content:url("../images/pictos/podcasts.png");
+                                                            content:url("../images/pictos/ecrits.svg");
                                                             padding-right: 0.5rem;
                                                             }
+                                                            &:hover::before{
+                                                                content:url("../images/pictos/ecrits-blanc.svg");
+                                                            }
                                                         }
                                                 }
                                                 &.button-articles{
@@ -213,9 +236,12 @@
                                                         flex-direction: row;
                                                         align-items: center;
                                                             &::before{
-                                                            content:url("../images/pictos/podcasts.png");
+                                                            content:url("../images/pictos/ecrits.png");
                                                             padding-right: 0.5rem;
                                                             }
+                                                            &:hover::before{
+                                                                content:url("../images/pictos/ecrits-blanc.svg");
+                                                            }
                                                         }
                                                 }
                                                 &.button-publications-rapports{
@@ -224,14 +250,28 @@
                                                         flex-direction: row;
                                                         align-items: center;
                                                             &::before{
-                                                            content:url("../images/pictos/podcasts.png");
+                                                            content:url("../images/pictos/ecrits.png");
                                                             padding-right: 0.5rem;
                                                             }
+                                                            &:hover::before{
+                                                                content:url("../images/pictos/ecrits-blanc.svg");
+                                                            }
                                                         }
                                                 }
                                             }
 
                                         }
+                                        form{
+                                            &::before{
+                                                content: "Filtrer par : ";
+                                                padding-right: 1rem;
+                                                font-weight: 800;
+                                                margin-bottom: 1rem;
+                                                @media (max-width: 479px){
+                                                    padding-bottom: 1rem;
+                                                }
+                                            }
+                                        }
                                         
 
                                     }

+ 0 - 28
web/themes/custom/eql/templates/form.html.twig

@@ -1,28 +0,0 @@
-{#
-/**
- * @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=""><span>Vidéos</span></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>

+ 28 - 0
web/themes/custom/eql/templates/partials/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=""><a href="/ressources?field_type_de_media_target_id=686&field_type_de_ressource_target_id=All&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine=#filtres"> Podcasts</a></button>
+
+   <button class="button-reportages-photos" type="button" style=""><a href="/ressources?field_type_de_media_target_id=683&field_type_de_ressource_target_id=All&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine=#filtres"> Reportages photos</a></button>
+   <button class="button-livres" type="button" style=""><a href="/ressources?field_type_de_media_target_id=684&field_type_de_ressource_target_id=All&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine=#filtres"> Livres</a></button>
+   <button class="button-articles" type="button" style=""><a href="/ressources?field_type_de_media_target_id=682&field_type_de_ressource_target_id=All&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine=#filtres"> Articles</a></button>
+   <button class="button-publications-rapports" type="button" style=""><a href="/ressources?field_type_de_media_target_id=685&field_type_de_ressource_target_id=All&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine=#filtres"> Publications/rapports</a></button>
+</div>
+
+<form{{ attributes }}>
+  {{ children }}
+</form>

Some files were not shown because too many files changed in this diff