slider ressources v0

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

@@ -1252,10 +1252,10 @@ iframe {
 
 /*pages*/
 #header-top {
-  height: 3rem;
+  height: 5rem;
   background: white;
-  margin-bottom: 2rem;
-  margin-top: 1rem; }
+  padding-bottom: 1rem;
+  padding-top: 1rem; }
 
 .header_top_left_container {
   height: 100%; }
@@ -1428,7 +1428,7 @@ footer {
   cursor: pointer;
   z-index: 100;
   background-color: white;
-  opacity: 0;
+  opacity: 0.2;
   transition: opacity 250ms;
   width: 10%; }
   .last-news .slick-arrow:hover, .last-ressources .slick-arrow:hover {
@@ -1612,13 +1612,16 @@ footer {
     #home_prog_container .programme-7:hover {
       background: #28429f; }
 
+#home_theme_container .slick-slide {
+  margin: 0 1rem; }
+
 #home_theme_container .slick-arrow {
   position: absolute;
   height: 100%;
   cursor: pointer;
   z-index: 100;
   background-color: white;
-  opacity: 0;
+  opacity: 0.2;
   transition: opacity 250ms;
   width: 10%; }
   #home_theme_container .slick-arrow:hover {
@@ -1658,7 +1661,9 @@ footer {
   left: 0;
   width: 100%;
   height: 100%;
-  position: absolute; }
+  position: absolute;
+  display: grid;
+  align-items: center; }
   #home_theme_container .views-field-field-image img {
     width: 100%;
     height: auto; }
@@ -1684,8 +1689,57 @@ footer {
 
 .path-centre-de-ressources {
   background-color: #eff2f9; }
+  .path-centre-de-ressources main {
+    flex: 0 0 100%;
+    max-width: 100%; }
   .path-centre-de-ressources header {
     margin-bottom: 0; }
+    .path-centre-de-ressources header .slick-slide {
+      margin: 0 1rem; }
+      .path-centre-de-ressources header .slick-slide .views-row {
+        display: grid !important;
+        grid-template-columns: 1fr;
+        position: relative;
+        height: auto; }
+        .path-centre-de-ressources header .slick-slide .views-row .views-field-field-image {
+          grid-column: 1;
+          grid-row: 1 / span 4;
+          z-index: -1;
+          padding-top: 1rem; }
+        .path-centre-de-ressources header .slick-slide .views-row .views-field:not(.views-field-field-image) {
+          background: blue;
+          width: 50%;
+          margin-left: 1rem;
+          padding-left: 1rem; }
+        .path-centre-de-ressources header .slick-slide .views-row .views-field-title {
+          padding-bottom: 1rem;
+          grid-column: 1;
+          grid-row: 3;
+          font-weight: 600; }
+        .path-centre-de-ressources header .slick-slide .views-row .views-field-view-node {
+          padding-top: 1rem;
+          grid-column: 1;
+          grid-row: 1; }
+        .path-centre-de-ressources header .slick-slide .views-row .views-field-field-programme {
+          text-transform: uppercase;
+          grid-column: 1;
+          grid-row: 2; }
+        .path-centre-de-ressources header .slick-slide .views-row a {
+          text-decoration: none; }
+    .path-centre-de-ressources header .slick-arrow {
+      position: absolute;
+      height: 100%;
+      cursor: pointer;
+      z-index: 100;
+      background-color: white;
+      opacity: 0.2;
+      transition: opacity 250ms;
+      width: 10%; }
+      .path-centre-de-ressources header .slick-arrow:hover {
+        opacity: .5; }
+    .path-centre-de-ressources header .slick-next {
+      right: 0;
+      top: 0; }
   .path-centre-de-ressources .content_container > div > h2:first-child {
     text-align: center;
     background-color: #98d0d9;
@@ -1693,7 +1747,8 @@ footer {
   .path-centre-de-ressources form {
     background-color: #98d0d9;
     display: grid;
-    padding: 0 0 5rem 0;
+    padding: 5rem 0 1rem 0;
+    margin-top: -3rem;
     column-gap: 1rem;
     grid-template-columns: calc(10% - 3em) repeat(4, 20%); }
     .path-centre-de-ressources form > div:first-child {
@@ -1868,7 +1923,7 @@ article p, .paragraph p {
   .path-actus .content_container .layout__region--content .views-element-container footer {
     text-align: center;
     margin: 1.8rem 0;
-    grid-column: 2; }
+    grid-column: 1 / span 2; }
     .path-actus .content_container .layout__region--content .views-element-container footer a {
       display: inline-block;
       margin: 0 auto;
@@ -1912,7 +1967,7 @@ article p, .paragraph p {
   cursor: pointer;
   z-index: 100;
   background-color: white;
-  opacity: 0;
+  opacity: 0.2;
   transition: opacity 250ms;
   width: 10%; }
   .path-actus .content_container .slick-arrow:hover {
@@ -1990,7 +2045,7 @@ article p, .paragraph p {
     cursor: pointer;
     z-index: 100;
     background-color: white;
-    opacity: 0;
+    opacity: 0.2;
     transition: opacity 250ms;
     width: 10%; }
     .page-node-type-programme .block-region-bottom .item-list .slick-arrow:hover {

web/themes/custom/popsu/lib/script.js

@@ -58,12 +58,12 @@ $(function(){
 	if($('.path-centre-de-ressources').length > 0){
 
 		let elem = $(".content_container").find(".views-element-container header>div");
-		// elem.slick({
-		// 	slidesToShow: 1,
-		// 	slidesToScroll: 1,
-		// 	centerMode: true,
-		// 	centerPadding: '60px',
-		// });
+		$(elem[0]).slick({
+			slidesToShow: 1,
+			slidesToScroll: 1,
+			centerMode: true,
+			// centerPadding: '60px'
+		});
 	}
 	
 
@@ -142,7 +142,7 @@ $(function(){
 			slidesToShow: 5,
 			slidesToScroll: 4,
 			centerMode: true,
-			centerPadding: '10%',
+			// centerPadding: '10%',
 			infinite: false,
 		});
 		 inner_rows = $('#programmes-block_4').find(".views-row").clone();

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

@@ -34,7 +34,7 @@
 				footer{
 					text-align: center;
 					margin: 1.8rem 0;
-					grid-column: 2 ;
+					grid-column: 1 / span 2 ;
 					a{
 						display: inline-block;
 						margin: 0 auto;
@@ -95,7 +95,7 @@
 			cursor: pointer;
 			z-index: 100;
 			background-color: white;
-			opacity: 0;
+			opacity: 0.2;
 			transition: opacity 250ms;
 			width: 10%;
 			&:hover{

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

@@ -22,7 +22,7 @@
 		cursor: pointer;
 		z-index: 100;
 		background-color: white;
-		opacity: 0;
+		opacity: 0.2;
 		transition: opacity 250ms;
 		width: 10%;
 		&:hover{
@@ -278,17 +278,16 @@
 	}
 }
 #home_theme_container{
-	// .slick-slide{
-	// 	// margin: 0 1rem;
-		
-	// }
+	.slick-slide{
+		margin: 0 1rem;
+	}
 	.slick-arrow{
 		position: absolute;
 		height: 100%;
 		cursor: pointer;
 		z-index: 100;
 		background-color: white;
-		opacity: 0;
+		opacity: 0.2;
 		transition: opacity 250ms;
 		width: 10%;
 		&:hover{
@@ -335,6 +334,8 @@
 		width: 100%;
 		height: 100%;
 		position: absolute;
+		display: grid;
+		align-items: center;
 		img{
 			width: 100%;
 			height: auto;

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

@@ -94,7 +94,7 @@
                 cursor: pointer;
                 z-index: 100;
                 background-color: white;
-                opacity: 0;
+                opacity: 0.2;
                 transition: opacity 250ms;
                 width: 10%;
                 &:hover{

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

@@ -1,7 +1,72 @@
 .path-centre-de-ressources{
+	main{
+		flex: 0 0 100%;
+		max-width: 100%;
+	}
 	background-color: $bck-col;
 	header{
 		margin-bottom: 0;
+		.slick-slide{
+			margin: 0 1rem;
+			.views-row{
+				display: grid !important;
+				grid-template-columns: 1fr;
+				// flex-direction: column;
+				// flex-direction: column-reverse;
+				position: relative;
+				height: auto;
+				.views-field-field-image{
+					grid-column: 1;
+					grid-row: 1 / span 4;
+					z-index: -1;
+					padding-top: 1rem;
+				}
+				.views-field:not(.views-field-field-image){
+					background: blue;
+					width: 50%;
+					margin-left: 1rem;
+					padding-left: 1rem;
+					
+				}
+				.views-field-title{
+					padding-bottom: 1rem;
+					grid-column: 1;
+					grid-row: 3;
+					font-weight: 600;
+				}
+				.views-field-view-node{
+					padding-top: 1rem;
+					grid-column: 1;
+					grid-row: 1;
+				}
+				.views-field-field-programme{
+					text-transform: uppercase;
+					grid-column: 1;
+					grid-row: 2;
+				}
+				a{
+					text-decoration: none;
+				}
+			}
+		}
+		.slick-arrow{
+			position: absolute;
+			height: 100%;
+			cursor: pointer;
+			z-index: 100;
+			background-color: white;
+			opacity: 0.2;
+			transition: opacity 250ms;
+			width: 10%;
+			&:hover{
+				opacity: .5;
+			}
+		}
+		.slick-next{
+			right: 0;
+			top: 0;
+		}
+		
 		
 	}
 	.content_container{
@@ -15,7 +80,8 @@
 	form{
 		background-color: $lightblue;
 		display: grid;
-		padding: 0 0 5rem 0;
+		padding: 5rem 0 1rem 0;
+		margin-top: -3rem;
 		column-gap: 1rem;
 		grid-template-columns: calc(10% - 3em) repeat(4, 20%);
 		&>div:first-child{
@@ -55,12 +121,12 @@
 				background-color: transparent;
 				border: solid 1px black;
 				box-shadow: none;
-				&:first-child{
-					// margin-right: .5rem;
-				}
-				&:last-child{
-					// margin-left: .5rem;
-				}
+				// &:first-child{
+				// 	// margin-right: .5rem;
+				// }
+				// &:last-child{
+				// 	// margin-left: .5rem;
+				// }
 			}
 		}
 	}

web/themes/custom/popsu/sass/pages/partials/_header_footer.scss

@@ -1,10 +1,10 @@
 //header
 
 #header-top{
-	height: 3rem;
+	height: 5rem;
     background: white;
-    margin-bottom: 2rem;
-    margin-top: 1rem;
+    padding-bottom: 1rem;
+    padding-top: 1rem;
 }
 .header_top_left_container{
 	height: 100%;