From 228c48680b4ce027365bfb677fb69d383dbb1d7c Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Thu, 27 Jun 2024 15:57:19 +0200
Subject: [PATCH] ressources filtre

---
 web/themes/custom/reha/dist/css/bundle.css    | 43 ++++++++++++++----
 .../reha/scss/pages/node-ressource.scss       |  3 +-
 .../custom/reha/scss/pages/ressources.scss    | 45 +++++++++++++++----
 .../reha/templates/views-mini-pager.html.twig |  2 +-
 4 files changed, 72 insertions(+), 21 deletions(-)

diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css
index 323d477..9916dc2 100644
--- a/web/themes/custom/reha/dist/css/bundle.css
+++ b/web/themes/custom/reha/dist/css/bundle.css
@@ -2798,6 +2798,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .page-ressources h1 {
   width: 80%;
   margin: auto;
+  font-weight: 1000;
 }
 .page-ressources .view-ressources {
   flex-direction: row;
@@ -2807,22 +2808,45 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 }
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 {
   width: 100%;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(3, 1fr);
   padding: 1rem;
 }
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1::before {
   content: "FILTRER :";
+  grid-column: 1;
+  grid-row: 1;
 }
-.page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-type-de-ressource-target-id {
-  order: 1;
+.page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item, .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-actions {
+  margin: 1rem;
+  align-self: end;
+}
+.page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-title {
+  grid-column: 1/span 8;
+  grid-row: 1;
 }
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .js-form-item-field-site-target-id {
-  order: 2;
+  grid-column: 1/span 2;
+  grid-row: 2;
+  width: 45%;
+}
+.page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-themes-target-id {
+  grid-column: 3/span 4;
+  grid-row: 2;
+  width: 45%;
+}
+.page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-type-de-ressource-target-id {
+  width: 45%;
+  grid-column: 5/span 6;
+  grid-row: 2;
 }
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 #edit-actions {
-  order: 3;
+  grid-column: 7/span 8;
+  grid-row: 2;
+}
+.page-ressources .view-ressources #views-exposed-form-ressources-page-1 #edit-actions .form-submit {
+  margin: 0;
 }
 .page-ressources .view-ressources .views-row .node-type-ressource {
   width: 80%;
@@ -2886,10 +2910,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   order: 6;
   display: none;
 }
+.page-ressources .view-ressources .pagination {
+  width: 100%;
+}
 
 .page-node-site .node-type-ressource {
-  width: 70%;
-  margin: auto;
   display: grid;
   grid-template-columns: repeat(4, auto);
   grid-template-rows: repeat(2, auto);
diff --git a/web/themes/custom/reha/scss/pages/node-ressource.scss b/web/themes/custom/reha/scss/pages/node-ressource.scss
index b9bfa1a..265812c 100644
--- a/web/themes/custom/reha/scss/pages/node-ressource.scss
+++ b/web/themes/custom/reha/scss/pages/node-ressource.scss
@@ -1,7 +1,6 @@
 .page-node-site{
     .node-type-ressource{
-        width: 70%;
-        margin: auto;
+
         display: grid;
         grid-template-columns: repeat(4, auto);
         grid-template-rows: repeat(2, auto);
diff --git a/web/themes/custom/reha/scss/pages/ressources.scss b/web/themes/custom/reha/scss/pages/ressources.scss
index 6815654..c4b6bb5 100644
--- a/web/themes/custom/reha/scss/pages/ressources.scss
+++ b/web/themes/custom/reha/scss/pages/ressources.scss
@@ -3,6 +3,8 @@
     h1{
         width: 80%;
         margin: auto;
+        font-weight: 1000;
+
     }
     .view-ressources{
         flex-direction: row;
@@ -11,22 +13,44 @@
         margin: auto;
         #views-exposed-form-ressources-page-1{
             width: 100%;
-            margin: auto;
-            display: flex;
-            flex-direction: column;
+            // margin: auto;
+            display: grid;
+            grid-template-columns: repeat(8, 1fr);
+            grid-template-rows: repeat(3, 1fr);
             padding: 1rem;
             &::before{
                 content: 'FILTRER :';
+                grid-column: 1;
+                grid-row: 1;
             }
-
-            .form-item-field-type-de-ressource-target-id{
-                order: 1;
+            .form-item, .form-actions{ margin: 1rem;align-self: end;}
+            .form-item-title{
+                grid-column: 1 /span 8;
+                grid-row: 1;
             }
             .js-form-item-field-site-target-id{
-                order: 2;
+                
+                grid-column: 1 /span 2;
+                grid-row: 2;
+                width: 45%;
             }
+            .form-item-field-themes-target-id{
+                grid-column: 3 /span 4;
+                grid-row: 2;
+                width: 45%;
+            }
+            .form-item-field-type-de-ressource-target-id{
+                width: 45%;
+                grid-column: 5 /span 6;
+                grid-row: 2;
+            }
+            
             #edit-actions{
-                order: 3;
+                grid-column: 7 /span 8;
+                grid-row: 2;
+                .form-submit{
+                    margin: 0;
+                }
             }
         }
         .views-row{
@@ -103,7 +127,10 @@
             }
     
         }
-
+        .pagination{
+            width: 100%;
+        }
     }
+    
 }
 
diff --git a/web/themes/custom/reha/templates/views-mini-pager.html.twig b/web/themes/custom/reha/templates/views-mini-pager.html.twig
index b18eaef..a45080c 100644
--- a/web/themes/custom/reha/templates/views-mini-pager.html.twig
+++ b/web/themes/custom/reha/templates/views-mini-pager.html.twig
@@ -13,7 +13,7 @@
  */
 #}
 {% if items.previous or items.next %}
-  <nav role="navigation" aria-labelledby="{{ heading_id }}">
+  <nav role="navigation" aria-labelledby="{{ heading_id }}" class="pagination">
     <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>
     <ul class="js-pager__items">
       {% if items.previous %}