css filters

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5442,11 +5442,16 @@ svg.ext {
     order: 3;
   }
 }
+.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%;
+  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 {
   position: sticky;
+  align-self: start;
   top: 13rem;
   left: 0;
-  width: 15%;
   background-color: rgb(255, 255, 255);
   margin-top: 2rem;
   margin-bottom: 5rem;
@@ -5454,6 +5459,12 @@ svg.ext {
   padding-left: 2rem;
   padding-right: 3rem;
 }
+@media (max-width: 810px) {
+  .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 {
+    position: static;
+    margin-bottom: 2rem;
+  }
+}
 @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 {
     margin-left: 0;
@@ -5484,6 +5495,68 @@ svg.ext {
   display: flex;
   flex-direction: column;
   max-width: 100%;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  align-items: baseline;
+  border: solid black 0.5px;
+}
+@media (max-width: 810px) {
+  .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 #views-exposed-form-base-de-donnees-block-1 .js-form-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+.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 #views-exposed-form-base-de-donnees-block-1 .js-form-item label {
+  flex: 2 1 auto;
+}
+.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 #views-exposed-form-base-de-donnees-block-1 .js-form-item input {
+  flex: 2 1 auto;
+  max-width: 55%;
+}
+@media (max-width: 810px) {
+  .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 #views-exposed-form-base-de-donnees-block-1 .js-form-item input {
+    max-width: 100%;
+  }
+}
+.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 #views-exposed-form-base-de-donnees-block-1 .js-form-type-select {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  padding-top: 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 #views-exposed-form-base-de-donnees-block-1 .js-form-type-select label {
+  width: 60%;
+  text-transform: lowercase;
+}
+.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 #views-exposed-form-base-de-donnees-block-1 .js-form-type-select select {
+  background-color: white;
+  border: none;
+  width: 50%;
+  padding-bottom: 0.2rem;
+}
+@media (max-width: 810px) {
+  .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 #views-exposed-form-base-de-donnees-block-1 .js-form-type-select select {
+    width: 100%;
+  }
+}
+.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 #views-exposed-form-base-de-donnees-block-1 .js-form-type-textfield {
+  flex-direction: column;
+  padding-top: 0.8rem;
+}
+.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 #views-exposed-form-base-de-donnees-block-1 .js-form-type-textfield label {
+  text-transform: lowercase;
+  padding-bottom: 0.2rem;
+  flex: 2 1 auto;
+}
+.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 #views-exposed-form-base-de-donnees-block-1 .js-form-type-textfield input {
+  flex: 2 1 auto;
+  max-width: 55%;
+}
+@media (max-width: 810px) {
+  .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 #views-exposed-form-base-de-donnees-block-1.js-form-item {
+    flex-direction: column;
+  }
 }
 .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 #views-exposed-form-base-de-donnees-block-1 #edit-actions {
   display: flex;
@@ -5527,21 +5600,17 @@ svg.ext {
     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 .form-item {
-  margin-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-content {
-  width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  width: 100%;
 }
 .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-ressource-slide:not(footer) {
   width: 100%;
   padding-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-content .view-type-ressource-slide:not(footer) h3 {
-  margin-left: 25%;
   text-transform: uppercase;
 }
 .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-ressource-slide:not(footer) h3 a {
@@ -5569,7 +5638,6 @@ svg.ext {
   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-ressource-slide:not(footer) .views-row-wrapper {
-  margin-left: 25%;
   display: flex;
   flex-direction: row;
 }

web/themes/custom/eql/scss/pages/ressources.scss

@@ -113,20 +113,25 @@
                                     order: 3;
                                 }
                                 .view-base-de-donnees{
-                                    // display: flex;
-                                    // flex-direction: row;
+                                    display: grid;
+                                    grid-template-columns: 20% 75%;
+                                    gap: 2rem;
                                     .view-filters{
                                         position: sticky;
+                                        align-self: start;
                                         top: 13rem;
                                         left: 0;
-                                        width: 15%;
                                         background-color: $white;
                                         margin-top: 2rem;
-                                        // margin-left: 1rem;
                                         margin-bottom: 5rem;
                                         padding: 1rem;
                                         padding-left: 2rem;
                                         padding-right: 3rem;
+
+                                        @media (max-width: 810px) {
+                                            position: static;
+                                            margin-bottom: 2rem;
+                                        }
                                         @media (max-width: 479px) {
                                             margin-left: 0;                                                
                                         }
@@ -148,13 +153,75 @@
                                             @media (max-width: 479px){
                                                 justify-content: center;
                                             }
+
                                             .js-form-item{
                                                 display: flex;
                                                 flex-direction: column;
                                                 max-width: 100%;
-                                            }
+                                                margin-bottom: 1rem;
+                                                padding: 0.5rem;
+                                                align-items: baseline;
+                                                                                                border: solid black 0.5px ;
 
+                                
+                                                @media(max-width: 810px){
+                                                    display: flex;
+                                                    flex-direction: row;
+                                                    justify-content: space-between;
+                                                }
+                                                label{
+                                                    flex: 2 1 auto;
+                                                }
+                                                input{
+                                                    flex: 2 1 auto;
+                                                    max-width: 55%;
+                                                    @media(max-width: 810px){
+                                                        max-width: 100%;
+                                                    }
+                                                }
+                                            }
+                                            .js-form-type-select{
+                                                display: flex;
+                                                flex-direction: row;
+                                                justify-content: space-evenly;
+                                                padding-top: 0.5rem;
+                                                label{
+                                                    width: 60%;
+                                                    text-transform: lowercase;
+                                                }
+                                                select{
+                                                    background-color: white;
+                                                    border: none;
+                                                    width: 50%;
+                                                    padding-bottom: 0.2rem;
+                                                    @media(max-width: 810px){
+                                                        width: 100%;
+                                                    }
+                                                }
+                                                
+                                            }
+                                            .js-form-type-textfield{
+                                                flex-direction: column;
+                                                padding-top: 0.8rem;
+                                               
+                                                label{
+                                                    text-transform: lowercase;
+                                                    padding-bottom: 0.2rem;
+                                                    flex: 2 1 auto;
+                                                    
+                                                }  
+                                               
+                                                input{
+                                                    flex: 2 1 auto;
+                                                    max-width: 55%;
+                                                }
+                                            }
 
+                                            &.js-form-item{
+                                                @media(max-width: 810px){
+                                                flex-direction: column;
+                                                }
+                                            }
                                             #edit-actions{
                                                 display: flex;
                                                 flex-direction: column;
@@ -194,20 +261,18 @@
                                             }
                                             
                                         }
-                                        .form-item{
-                                            margin-bottom: 1rem;
-                                        }
+
+
                                     }
                                     .view-content{
-                                        width: 100%;
                                         display: flex;
                                         flex-direction: row;
                                         flex-wrap: wrap;
+                                        width: 100%;
                                         .view-type-ressource-slide:not(footer){
                                             width: 100%;
                                             padding-top: 1rem;
                                             h3{
-                                                margin-left: 25%;
                                                 text-transform: uppercase;
                                                 a{color: rgb(9, 57, 139) !important;}
                                             }
@@ -241,7 +306,6 @@
                                                 }
                                             }
                                             .views-row-wrapper{
-                                                margin-left: 25%;
                                                 display: flex;
                                                 flex-direction: row;