Merge branch 'master' of gogs-figureslibres.io:bachir/popsu-d9

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

@@ -1274,6 +1274,15 @@ iframe {
 .layout__region--bottom {
   grid-column: 1 /span 3; }
 
+@media print, screen and (max-width: 39.99875em) {
+  #leaflet-map-view-projets-block-2 {
+    max-height: 400px !important; }
+  .layout__region--second {
+    grid-column: 1 /span 3;
+    padding: 0 5%; }
+  .layout__region--third {
+    grid-column: 1 /span 3; } }
+
 /*pages*/
 .header_top_middle_container .programme-1 .views-field-field-programme .field-content {
   background: #61ab32; }
@@ -1394,6 +1403,11 @@ iframe {
         align-items: center; }
         .header_top_middle_container .views-element-container > div:first-child > div:first-child > div:first-child {
           grid-column-start: 2; }
+        @media print, screen and (max-width: 39.99875em) {
+          .header_top_middle_container .views-element-container > div:first-child > div:first-child {
+            grid-template-columns: repeat(3, 1fr); }
+            .header_top_middle_container .views-element-container > div:first-child > div:first-child > div:first-child {
+              grid-column-start: 1; } }
   .header_top_middle_container .views-row {
     display: inline-block;
     width: auto; }
@@ -1430,6 +1444,11 @@ iframe {
     transform: translateY(57%) rotate(45deg); }
   .close-block > div > span:nth-child(2) {
     transform: rotate(-45deg); }
+  @media print, screen and (max-width: 39.99875em) {
+    .close-block {
+      position: absolute;
+      top: 1rem;
+      right: 1rem; } }
 
 .open-block {
   height: 100%;
@@ -1450,8 +1469,18 @@ iframe {
   padding: 1rem 0;
   z-index: 140;
   line-height: 2; }
+  @media print, screen and (max-width: 39.99875em) {
+    #header-top-right .header_top_right_container {
+      grid-template-columns: 1fr;
+      align-content: center;
+      text-align: center;
+      height: 100vh;
+      font-size: 0.8rem; } }
   #header-top-right .header_top_right_container nav {
     grid-column-start: 2; }
+    @media print, screen and (max-width: 39.99875em) {
+      #header-top-right .header_top_right_container nav {
+        grid-column-start: 1; } }
   #header-top-right .header_top_right_container a {
     text-decoration: none;
     font-weight: 400; }
@@ -1533,6 +1562,10 @@ footer {
       font-size: 0;
       color: transparent;
       background: left/contain no-repeat url(../images/yt.svg); }
+  @media print, screen and (max-width: 39.99875em) {
+    #footer-bottom .footer_bottom_right_container {
+      text-align: center;
+      margin-top: 1rem; } }
 
 .path-frontpage .header_top_left_container div:nth-child(2) img {
   width: 77%; }
@@ -1727,6 +1760,9 @@ footer {
     color: black; }
   .about .views-row div {
     margin: 0 5%; }
+    @media print, screen and (max-width: 39.99875em) {
+      .about .views-row div {
+        margin: 0 3%; } }
   .about .views-row .views-field-view-node {
     display: inline-block;
     margin: 0 auto;
@@ -1770,6 +1806,11 @@ footer {
     .header_container header.active {
       opacity: 1;
       font-size: 4rem; }
+  @media print, screen and (max-width: 39.99875em) {
+    .header_container {
+      grid-template-columns: repeat(2, 1fr); }
+      .header_container header[data-dom="programmes-block_4"] {
+        display: none; } }
 
 #home_themes-block_1 {
   display: none; }
@@ -2659,6 +2700,7 @@ article p, .paragraph p {
   background: #28429f !important; }
 
 .page-node-type-programme #programme_toc-block_5 .views-row .views-field-field-image {
+  background: transparent !important;
   height: 20rem; }
   .page-node-type-programme #programme_toc-block_5 .views-row .views-field-field-image img {
     width: 100%; }
@@ -2791,9 +2833,11 @@ article p, .paragraph p {
         text-decoration: underline; }
 
 .page-node-type-programme .block-region-third {
-  margin-top: -7rem;
   z-index: 20;
   position: relative; }
+  @media print, screen and (max-width: 39.99875em) {
+    .page-node-type-programme .block-region-third {
+      margin-top: 1rem; } }
   .page-node-type-programme .block-region-third #evenements-block_1 {
     background-color: black;
     margin-bottom: 3rem; }
@@ -2945,7 +2989,7 @@ article p, .paragraph p {
   .page-node-type-programme .block-region-bottom h2 {
     text-align: center; }
   .page-node-type-programme .block-region-bottom #centre_de_ressources-block_2 .slick-slide {
-    margin: 0 1rem; }
+    margin: 0 0; }
   .page-node-type-programme .block-region-bottom #centre_de_ressources-block_2 .slick-arrow {
     position: absolute;
     height: 100%;

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

@@ -1,8 +1,11 @@
 import 'slick-carousel';
 
+var mobile = false;
 $(function(){
 	console.log("$ ready !!");
-	
+	if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i)){
+		mobile = true;
+   }
 
 	if($(".path-frontpage").length > 0){
 		$('.last-news').slick({
@@ -10,6 +13,13 @@ $(function(){
 			slidesToScroll: 1,
 			centerMode: true,
 			centerPadding: '300px',
+			responsive: [
+			{
+				breakpoint: 800,
+				settings: {
+					centerPadding: '0',
+				}
+			  }]
 		});
 		$('.last-ressources').slick({
 			slidesToShow: 3,
@@ -17,6 +27,21 @@ $(function(){
 			centerMode: true,
 			centerPadding: '60px',
 			infinite: true,
+			responsive: [
+				{
+					breakpoint: 800,
+					settings: {
+						slidesToShow: 2,
+						centerPadding: '0',
+					}	
+				},
+				{
+					breakpoint: 400,
+					settings: {
+						slidesToShow: 1,
+						centerPadding: '0',
+					}
+				}]
 		});
 	}
 
@@ -26,6 +51,14 @@ $(function(){
 			slidesToScroll: 1,
 			centerMode: true,
 			centerPadding: '200px',
+			responsive: [
+				{
+					breakpoint: 800,
+					settings: {
+						centerPadding: '0',
+						adaptiveHeight: true
+					}
+				  }]
 		});
 	}
 	
@@ -35,6 +68,15 @@ $(function(){
 		centerMode: false,
   		centerPadding: '60px',
 		infinite: false,
+		responsive: [
+			{
+				breakpoint: 800,
+				settings: {
+					slidesToShow: 2,
+  					slidesToScroll: 1,
+					centerPadding: '0',
+				}
+			  }]
 	});
 
 	if($(".path-actus").length > 0){
@@ -55,6 +97,7 @@ $(function(){
 			centerMode: false,
 			centerPadding: '60px',
 			infinite: false,
+			
 		});	
 		
 		$('#home_blocks-block_3>div>div').slick({
@@ -82,9 +125,15 @@ $(function(){
 
 	$('.close-block').click(function(){
 		$(this).parent().fadeOut();
+		if(mobile == true){
+			$("body").css("overflow","auto");
+		}
 	});
 	$('.open-block').click(function(){
 		$(this).prev().css("display","grid");
+		if(mobile == true){
+			$("body").css("overflow","hidden");
+		}
 	});
 	
 	$("body").on("click", ".header_container header", function(){
@@ -177,6 +226,15 @@ $(function(){
 			centerMode: false,
 			// centerPadding: '10%',
 			infinite: false,
+			responsive: [
+				{
+					breakpoint: 800,
+					settings: {
+						slidesToShow: 2,
+						slidesToScroll: 1,
+						centerPadding: '10px',
+					}
+				  }]
 		});
 		
 		// $('#programmes-block_4').after('<div id="home_map_container" class="home_info_container"></div><div id="home_theme_container" class="home_info_container"></div><div id="home_prog_container" class="home_info_container"></div>');

web/themes/custom/popsu/partials/footer.html.twig

@@ -3,13 +3,13 @@
       {{ page.footer_top }}
     </section>
     <section id="footer-bottom" class="row">
-      <div id="footer-left" class="columns small-3 small-offset-1">
+      <div id="footer-left" class="columns small-5 small-offset-1 medium-3 medium-offset-1">
         {{ page.footer_bottom_left }}
       </div>
-      <div id="footer-middle" class="columns small-2 small-offset-0">
+      <div id="footer-middle" class="columns small-5 small-offset-1 medium-2 medium-offset-0">
         {{ page.footer_bottom_middle }}
       </div>
-      <div id="footer-right" class="columns small-4 small-offset-1">
+      <div id="footer-right" class="columns small-12 medium-4 medium-offset-1">
         {{ page.footer_bottom_right }}
       </div>
     </section>

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

@@ -302,6 +302,9 @@
 		}
 		div{
 			margin: 0 5%;
+			@include breakpoint(small down) {
+				margin: 0 3%;
+			}
 		}
 		.views-field-view-node{
 			display: inline-block;
@@ -357,6 +360,14 @@
 			font-size: 4rem;
 		}
 	}
+	@include breakpoint(small down) {
+		grid-template-columns: repeat(2, 1fr);
+		header[data-dom="programmes-block_4"]{
+			display:none;
+		}
+		
+
+	}
 
 }
 #home_themes-block_1{

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

@@ -76,6 +76,7 @@
         .views-row{
             // margin-top: 2rem;
             .views-field-field-image{
+                background: transparent !important;
                 height: 20rem;
                 img{
                     width: 100%;
@@ -279,10 +280,12 @@
 
     }
     .block-region-third{
-        margin-top: -7rem;
+       
         z-index: 20;
         position: relative;
-       
+        @include breakpoint(small down) {
+            margin-top: 1rem;
+        }
         #evenements-block_1{
             background-color: black;
             margin-bottom: 3rem;
@@ -495,7 +498,7 @@
         }
         #centre_de_ressources-block_2{
             .slick-slide{
-                margin: 0 1rem;
+                margin: 0 0;
             }
             .slick-arrow{
                 position: absolute;

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

@@ -173,6 +173,13 @@
                 &>div:first-child{
                     grid-column-start: 2;
                 }
+				@include breakpoint(small down) {
+					grid-template-columns: repeat(3, 1fr);
+					&>div:first-child{
+						grid-column-start: 1;
+					}
+			
+				}
 			}
 			
 		}
@@ -231,6 +238,12 @@
     &>div>span:nth-child(2){
         transform: rotate(-45deg);
     }
+	@include breakpoint(small down) {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+	}
+
 }
 .open-block{
     height: 100%;
@@ -254,8 +267,19 @@
 		padding: 1rem 0;
 		z-index: 140;
 		line-height: 2;
+		@include breakpoint(small down) {
+			grid-template-columns: 1fr;
+			align-content: center;
+			text-align: center;
+			height: 100vh;
+			font-size: $font-medium;
+			
+		}
 		nav{
 			grid-column-start: 2;
+			@include breakpoint(small down) {
+				grid-column-start: 1;
+			}
 		}
 		// padding: 1rem .5rem 1rem .5rem;
 		a{
@@ -382,5 +406,9 @@ footer{
                 }
             }
         }
+		@include breakpoint(small down) {
+			text-align:center;
+			margin-top: 1rem;
+		}
     }
 }

web/themes/custom/popsu/sass/setup/_layouts.scss

@@ -4,8 +4,22 @@
     column-gap: 3rem;
     row-gap: 1rem;
     position: relative;
+  
 }
 
 .layout__region--bottom{
     grid-column: 1 /span 3;
+}
+@include breakpoint(small down) {
+    #leaflet-map-view-projets-block-2{
+        max-height: 400px !important;
+    }
+    .layout__region--second{
+        grid-column: 1 /span 3;
+        padding: 0 5%;
+    }
+    .layout__region--third{
+        grid-column: 1 /span 3;
+        // padding: 0 3%;
+    }
 }