callage des élément dans la page de ressources

web/themes/custom/popsu/css/styles.css

@@ -1344,10 +1344,18 @@ footer {
     text-align: center; }
   .path-centre-de-ressources form {
     display: grid;
-    grid-template-columns: 10% repeat(4, 20%); }
+    column-gap: 1rem;
+    grid-template-columns: calc(10% - 3em) repeat(4, 20%); }
     .path-centre-de-ressources form > div:first-child {
       grid-column-start: 2; }
-    .path-centre-de-ressources form select {
+    .path-centre-de-ressources form .form-item-combine {
+      grid-row: 1 / span 1;
+      grid-column-start: 2; }
+    .path-centre-de-ressources form .form-item-programme {
+      grid-column-start: 2; }
+    .path-centre-de-ressources form .form-item-items-per-page {
+      grid-column-start: 2; }
+    .path-centre-de-ressources form select, .path-centre-de-ressources form input {
       display: inline-block;
       width: auto;
       width: 100%;
@@ -1356,41 +1364,72 @@ footer {
       height: auto; }
     .path-centre-de-ressources form div {
       display: inline-block;
-      width: auto;
-      padding: .5rem 1rem; }
-  .path-centre-de-ressources .views-view-grid .views-row {
-    display: grid;
-    grid-template-columns: 10% 20% 20% 20% 20% 10%; }
-    .path-centre-de-ressources .views-view-grid .views-row .views-col:first-child {
-      grid-column-start: 2; }
-  .path-centre-de-ressources .views-view-grid .views-col {
-    background-color: white;
-    background-clip: content-box;
-    width: 100% !important;
-    padding: .3rem; }
-    .path-centre-de-ressources .views-view-grid .views-col a {
-      text-decoration: none; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field:not(:first-child) {
-      padding: 0 0 0 .4rem; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-programme {
-      font-weight: 600;
-      display: inline-block;
-      width: auto;
-      color: white;
-      background: red;
-      padding: .15rem .3rem;
-      margin-bottom: 1rem; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-type-de-ressource {
-      text-transform: uppercase;
-      font-size: 600;
-      margin-bottom: .5rem;
-      font-size: 0.45rem; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field-title {
-      font-style: italic; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-sous-titre {
-      margin-bottom: 1rem; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-theme {
-      font-size: 0.45rem; }
+      width: auto; }
+    .path-centre-de-ressources form .form-actions {
+      grid-column: 4 / span 2;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+      column-gap: 1rem; }
+      .path-centre-de-ressources form .form-actions input {
+        background-color: white;
+        border: solid 1px black;
+        box-shadow: none; }
+  .path-centre-de-ressources .views-view-grid {
+    margin-top: 3rem; }
+    .path-centre-de-ressources .views-view-grid .views-row {
+      display: grid;
+      column-gap: 1rem;
+      row-gap: 1rem;
+      grid-template-columns: calc(10% - 3em) repeat(4, 20%); }
+      .path-centre-de-ressources .views-view-grid .views-row .views-col:first-child {
+        grid-column-start: 2; }
+    .path-centre-de-ressources .views-view-grid .views-col {
+      display: grid;
+      grid-template-columns: 20%  80%;
+      align-items: stretch;
+      background-color: white;
+      background-clip: content-box;
+      width: 100% !important;
+      padding: .3rem; }
+      .path-centre-de-ressources .views-view-grid .views-col a {
+        text-decoration: none; }
+        .path-centre-de-ressources .views-view-grid .views-col a:hover {
+          text-decoration: underline; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field:not(:first-child) {
+        padding: 0 0 0 .4rem; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-field-image {
+        grid-row: 2 / span 2; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-field-programme {
+        grid-row: 1 / span 1;
+        grid-column: 1 / span 2; }
+        .path-centre-de-ressources .views-view-grid .views-col .views-field-field-programme .field-content {
+          font-weight: 600;
+          display: inline-block;
+          width: auto;
+          color: white;
+          background: red;
+          padding: .15rem .3rem;
+          margin-bottom: 1rem; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-field-type-de-ressource {
+        text-transform: uppercase;
+        font-size: 600;
+        margin-bottom: .5rem;
+        font-size: 0.45rem;
+        grid-row: 2 / span 1;
+        grid-column: 2 / span 1; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-title {
+        font-style: italic;
+        grid-row: 3 / span 1;
+        grid-column: 2 / span 1; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-field-sous-titre {
+        margin-bottom: 1rem;
+        grid-row: 4 / span 1;
+        grid-column: 2 / span 1; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-field-theme {
+        grid-row: 5 / span 1;
+        grid-column: 1 / span 2;
+        font-size: 0.45rem; }
 
 article h2 {
   font-family: "trueno";

web/themes/custom/popsu/popsu.theme

@@ -25,20 +25,9 @@ function popsu_preprocess_views_view_unformatted(&$variables) {
             $variables['rows'][$id]['attributes'] = new Attribute();
             $c = $variables['rows'][$id]['content']["#row"]->nid;
             $variables['rows'][$id]['attributes']->addClass("popsu-node-".$c);
-            //kint($variables['rows'][$id]['content']["#row"]->nid);
         }
   }
-  // else{
-  //   if ($view->current_display == "block_1") {
-  //       $rows = $variables['rows'];
-  //       foreach ($rows as $id => $row) {
-  //           $variables['rows'][$id]['attributes'] = new Attribute();
-  //           $c = $variables['rows'][$id]['content']["#row"]->nid;
-  //           $variables['rows'][$id]['attributes']->addClass("popsu-node-".$c);
-  //       }
-  //   }
 
-  }
 };
 
 /* implements template_preprocess_region() */
@@ -48,23 +37,9 @@ function popsu_preprocess_region(&$variables) {
   if (isset($variables['region'])) {
     $variables['attributes']['class'][] = $variables['region'].'_container'; 
   }
-  // if ($variables['region'] == 'footer_bottom_right') {
-  //   if ($node = \Drupal::routeMatch()->getParameter('node')) {
-  //     $t = $node->getType();
-  //   }
-  // }
-}
-
-// function popsu_preprocess_field(&$variables){
-//   $v = $variables;
-// }
-
 
+}
 
-// function popsu_theme_suggestions_views_view_alter(array &$suggestions, array $variables) {
-//   $v = $variables;
-//   $suggestions[] = 'views_view__headerView';
-// }
 
 /**
  * Implements hook_preprocess_block().
@@ -75,7 +50,7 @@ function popsu_preprocess_views_view_fields(&$variables){
   $entity = $variables['row']->_entity;
   if($entity->hasField('field_programme')){
       $target_id = $entity->get('field_programme')->getString();
-      // kint($variables);die();
+      //kint($variables['row']);die();
       // $variables['row']['attributes'] = new Attribute();
       // $variables['row']['attributes']->addClass("pouet-node-".$target_id);     
   }

web/themes/custom/popsu/sass/pages/_ressources.scss

@@ -8,11 +8,23 @@
 	
 	form{
 		display: grid;
-		grid-template-columns: 10% repeat(4, 20%);
+		column-gap: 1rem;
+		grid-template-columns: calc(10% - 3em) repeat(4, 20%);
 		&>div:first-child{
 			grid-column-start: 2;
 		}
-		select{
+		.form-item-combine{
+			grid-row: 1 / span 1 ;
+			grid-column-start: 2;
+		}
+		.form-item-programme{
+			
+			grid-column-start: 2;
+		}
+		.form-item-items-per-page{
+			grid-column-start: 2;
+		}
+		select, input{
 			display: inline-block;
 			width: auto;
 			width: 100%;
@@ -23,20 +35,48 @@
 		div{
 			display: inline-block;
 			width: auto;
-			padding: .5rem 1rem;
+			// padding: .5rem 1rem;
+		}
+		.form-actions{
+			grid-column: 4 / span 2;
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			align-items: center;
+			column-gap: 1rem;
+			input{
+				background-color: white;
+				border: solid 1px black;
+				box-shadow: none;
+				
+				&:first-child{
+					// margin-right: .5rem;
+				}
+				&:last-child{
+					// margin-left: .5rem;
+				}
+			}
 		}
 	}
 	.views-view-grid{
+		margin-top: 3rem;
 		.views-row{
 			display: grid;
-			grid-template-columns: 10% 20% 20% 20% 20% 10%;
+			column-gap: 1rem;
+			row-gap: 1rem;
+			grid-template-columns: calc(10% - 3em) repeat(4, 20%);
 			.views-col:first-child{
 				grid-column-start: 2;
 			}
 		}
 		.views-col{
+			display: grid;
+			grid-template-columns: 20%  80%;
+			align-items: stretch;
 			a{
 				text-decoration: none;	
+				&:hover{
+					text-decoration: underline;
+				}
 			}
 			background-color: rgb(255, 255, 255);
 			background-clip: content-box;
@@ -45,34 +85,54 @@
 			.views-field:not(:first-child){
 				padding: 0 0 0 .4rem;
 			}
+			.views-field-field-image{
+				grid-row: 2 / span 2;				
+			}
+
+			
 			.views-field-field-programme{
-				font-weight: 600;
-				display: inline-block;
-				width: auto;
-				color: white;
-				background: red;
-				padding: .15rem .3rem;
-				margin-bottom: 1rem;
+				grid-row: 1 / span 1;
+				grid-column: 1 / span 2;
+				.field-content{
+					font-weight: 600;
+					display: inline-block;
+					width: auto;
+					color: white;
+					background: red;
+					padding: .15rem .3rem;
+					margin-bottom: 1rem;
+				}
+				
 			}
 			.views-field-field-type-de-ressource{
 				text-transform: uppercase;
 				font-size: 600;
 				margin-bottom: .5rem;
 				font-size: $font-small;
+
+				grid-row: 2 / span 1;
+				grid-column: 2 / span 1;
 			}
 			.views-field-title{
 				font-style: italic;
+				grid-row: 3 / span 1;
+				grid-column: 2 / span 1;
 				
 			}
 			.views-field-field-sous-titre{
 				margin-bottom: 1rem;
+				grid-row: 4 / span 1;
+				grid-column: 2 / span 1;
 			}
 			.views-field-field-theme{
+				grid-row: 5 / span 1;
+				grid-column: 1 / span 2;
 				font-size: $font-small;
 			}
 		}
 
 	}
 	
+	
 }