modification - mail 23/08

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

@@ -1322,8 +1322,8 @@ iframe {
   .header_top_left_container > div[id=''] {
     height: 100%; }
   .header_top_left_container a[rel~='home'] {
+    display: none;
     height: 100%;
-    display: block;
     font-size: 0;
     color: transparent;
     background: left/contain no-repeat url(../images/POPSU_logo.svg); }
@@ -1590,7 +1590,8 @@ footer {
 .last-ressources .views-field-view-node {
   grid-row: 4 / span 1;
   grid-column: 2 / span 1;
-  margin-bottom: 1rem; }
+  margin-bottom: 1rem;
+  display: none; }
 
 .last-ressources .views-field-field-programme {
   text-transform: uppercase;
@@ -1654,7 +1655,7 @@ footer {
   font-size: 0.8rem;
   text-align: center;
   padding: 18rem 0 3rem 0;
-  margin-top: -20rem; }
+  margin-top: -16rem; }
   .about .views-row .views-field-title {
     font-family: "duke" !important;
     font-size: 1.6rem;
@@ -1762,20 +1763,23 @@ footer {
     background-clip: content-box;
     min-height: 11rem;
     width: 100%;
-    display: grid;
-    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    align-content: center;
     padding: 1rem; }
     #home_prog_container .views-row .views-field:not(.views-field-field-logo) {
       font-size: 0.8rem;
       font-weight: 600;
       display: none; }
     #home_prog_container .views-row .views-field-title {
-      margin-bottom: 1rem; }
+      margin-bottom: .7rem; }
     #home_prog_container .views-row:hover .views-field:not(.views-field-field-logo) {
       font-weight: 600;
       display: block;
       color: white;
-      text-align: center; }
+      text-align: center;
+      flex-basis: 100%; }
       #home_prog_container .views-row:hover .views-field:not(.views-field-field-logo) a {
         text-decoration: none; }
     #home_prog_container .views-row .views-field-field-logo {
@@ -1801,7 +1805,7 @@ footer {
     #home_prog_container .programme-3:hover img {
       display: none; }
   #home_prog_container .programme-5 img {
-    width: 45%; }
+    width: 50%; }
   #home_prog_container .programme-5:hover {
     background: #ab9569; }
     #home_prog_container .programme-5:hover img {
@@ -2493,6 +2497,9 @@ article p, .paragraph p {
   right: 0;
   top: 0; }
 
+.page-node-type-programme #programme_toc-block_7 {
+  display: none; }
+
 .page-node-type-programme #programme_toc-block_5 .slick-slide {
   margin: 0 1rem; }
 
@@ -2659,6 +2666,7 @@ article p, .paragraph p {
   .page-node-type-programme .block-region-first .views-element-container header {
     font-family: "duke";
     font-size: 1.6rem;
+    text-transform: uppercase;
     cursor: pointer;
     transition: all 250ms; }
     .page-node-type-programme .block-region-first .views-element-container header:hover {
@@ -2715,28 +2723,47 @@ article p, .paragraph p {
       .page-node-type-programme .block-region-third .views-field a:hover {
         text-decoration: underline; }
 
-.page-node-type-programme article .computed_projets_references {
+.page-node-type-programme article .computed_projets_references, .page-node-type-programme article .computed_themes_references, .page-node-type-programme article .field_logo {
   display: none; }
 
 .page-node-type-programme article h2:first-child {
   display: none; }
 
 .page-node-type-programme article .body {
-  font-size: 0.8rem; }
-
-.page-node-type-programme article .field_textes .paragraph .field_titre {
-  font-size: 1rem;
-  font-weight: 600;
-  text-transform: initial;
-  cursor: pointer;
-  margin-top: 1rem; }
-
-.page-node-type-programme article .field_textes .paragraph .field_texte {
+  font-size: 0.8rem;
+  height: 20rem;
+  overflow: hidden;
   position: relative;
-  transition: all 250ms; }
+  -webkit-transition: all 250ms ease;
+  -moz-transition: all 250ms ease;
+  -o-transition: all 250ms ease;
+  transition: all 250ms ease; }
+  .page-node-type-programme article .body footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    text-align: center; }
+    .page-node-type-programme article .body footer a {
+      display: inline-block;
+      margin: 0 auto;
+      background: black;
+      color: white;
+      cursor: pointer;
+      font-family: "trueno";
+      font-weight: 500;
+      padding: .5rem 1rem;
+      font-size: 0.45rem;
+      text-decoration: none;
+      text-transform: uppercase; }
+      .page-node-type-programme article .body footer a:hover {
+        color: black;
+        background: white; }
 
-.page-node-type-programme article .field_textes .paragraph .crop:after {
+.page-node-type-programme article .body:after {
   content: "";
+  opacity: 1;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2744,10 +2771,57 @@ article p, .paragraph p {
   right: -15px;
   box-shadow: inset white 0 -4rem 2rem; }
 
-.page-node-type-programme article .field_textes .paragraph .crop {
-  max-height: 7rem;
-  overflow: hidden;
-  transition: all 250ms; }
+.page-node-type-programme article .body_open {
+  height: auto;
+  -webkit-transition: all 250ms ease;
+  -moz-transition: all 250ms ease;
+  -o-transition: all 250ms ease;
+  transition: all 250ms ease; }
+  .page-node-type-programme article .body_open:after {
+    opacity: 0;
+    -webkit-transition: all 250ms ease;
+    -moz-transition: all 250ms ease;
+    -o-transition: all 250ms ease;
+    transition: all 250ms ease; }
+
+.page-node-type-programme article .field_textes .paragraph {
+  border-bottom: 3px dotted gray;
+  padding: 1rem 0; }
+  .page-node-type-programme article .field_textes .paragraph .field_titre {
+    font-size: 1rem;
+    font-weight: 600;
+    text-transform: initial;
+    cursor: pointer; }
+  .page-node-type-programme article .field_textes .paragraph .field_titre:after {
+    content: '▼';
+    float: right;
+    -webkit-transition: all 250ms ease;
+    -moz-transition: all 250ms ease;
+    -o-transition: all 250ms ease;
+    transition: all 250ms ease; }
+  .page-node-type-programme article .field_textes .paragraph .rotate:after {
+    transform: rotate(180deg);
+    -webkit-transition: all 250ms ease;
+    -moz-transition: all 250ms ease;
+    -o-transition: all 250ms ease;
+    transition: all 250ms ease; }
+  .page-node-type-programme article .field_textes .paragraph .field_texte {
+    height: auto;
+    position: relative;
+    -webkit-transition: all 250ms ease;
+    -moz-transition: all 250ms ease;
+    -o-transition: all 250ms ease;
+    transition: all 250ms ease; }
+    .page-node-type-programme article .field_textes .paragraph .field_texte h2 {
+      text-transform: inherit; }
+  .page-node-type-programme article .field_textes .paragraph .crop {
+    height: 0;
+    overflow: hidden;
+    display: none;
+    -webkit-transition: all 250ms ease;
+    -moz-transition: all 250ms ease;
+    -o-transition: all 250ms ease;
+    transition: all 250ms ease; }
 
 .page-node-type-programme .block-region-bottom {
   background: url(../images/motif_croix.svg); }

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

@@ -14,7 +14,7 @@ $(function(){
 			slidesToScroll: 1,
 			centerMode: true,
 			centerPadding: '60px',
-			infinite: false,
+			infinite: true,
 		});
 	}
 
@@ -34,6 +34,7 @@ $(function(){
   		centerPadding: '60px',
 		infinite: false,
 	});
+
 	if($(".path-actus").length > 0){
 		let elem = $("#actus_blocks-block_2").find("footer").detach();
 		$("#actus_blocks-block_2").append(elem);
@@ -176,6 +177,7 @@ $(function(){
 //// PAGE POPSU ////
 // projets-block_2
 if($(".page-node-type-programme").length > 0){
+	$(".body").append('<footer><a class="more">Lire la suite</a></footer>');
 
 	let elem = "<div class='main_logo'></div>"
 	$('#projets-block_2').prepend(elem);
@@ -184,7 +186,18 @@ if($(".page-node-type-programme").length > 0){
 	$(".field_titre").on("click", function(){
 		let e = $(this).parent().find(".field_texte");
 		$(e).toggleClass("crop");
+		$(this).toggleClass("rotate");
+
+	});
 
+	$(".more").on("click", function(){
+		$(".body").toggleClass("body_open");
+		if($('.body_open').length > 0){
+			$(this).empty().html("Fermer")
+		}else{
+			$(this).empty().html("Lire la suite")
+		}
+		
 	});
 
 }

web/themes/custom/popsu/popsu.theme

@@ -7,16 +7,8 @@
 use Drupal\Core\Template\Attribute;
 
 
-// /* implements template_preprocess_html() */
-// function popsu_preprocess_page(&$variables) {
-//   //var_dump($variables);
-//   // $variables['attributes']['class'][] = 'pouette';
-//   //pour page popsu : 
-//   $nid = $variables['node']->nid->getString();
-//   //$variables['attributes']['class'][] = 'programme-'.$nid;
-//   //kint($nid);
-
-//   //pour popsu : - fetch nid
+// function popsu_preprocess_views_view_list(&$variables){
+//   kint($variables);die();
 // }
 
 function popsu_preprocess_html(&$variables) {
@@ -35,9 +27,8 @@ function popsu_preprocess_html(&$variables) {
 
 function popsu_preprocess_field(&$variables){
   $element = &$variables['element'];
-  // $items = &$variables['items'];
   if (isset($element['#field_name'])) {
-    // kint($element['#field_name']);
+
     $variables['attributes']['class'][] = $element['#field_name'];
     if ($element['#field_name'] == 'field_texte') {
       $variables['attributes']['class'][] = 'crop';
@@ -67,7 +58,6 @@ function popsu_preprocess_views_view_unformatted(&$variables) {
           $variables['rows'][$id]['attributes']->addClass("programme-".$c);
           if ($entity->hasField('field_type_de_ressource') && $entity->get('field_type_de_ressource')->getString() == "74" ) {
             $type = $entity->get('field_type_de_ressource')->getString();
-            // $variables['rows'][$id]['attributes'] = new Attribute();
             $variables['rows'][$id]['attributes']['class'][] = "type-".$type;
           }
         }
@@ -77,7 +67,7 @@ function popsu_preprocess_views_view_unformatted(&$variables) {
           $c = $r->get('field_programme')->getString();
           $variables['rows'][$id]['attributes'] = new Attribute();
           $variables['rows'][$id]['attributes']->addClass("programme-".$c);
-          // kint($c);die();
+
         }
        
       }
@@ -214,6 +204,4 @@ function popsu_preprocess_block__entity_field(&$variables){
 
 
   }
-  // if($items->isEmpty()){
-  // }
 }

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

@@ -175,6 +175,7 @@
 		grid-row: 4 / span 1;
 		grid-column: 2 / span 1;
 		margin-bottom: 1rem;
+		display: none;
 	}
 	.views-field-field-programme{
 		text-transform: uppercase;
@@ -279,7 +280,7 @@
 	font-size: $font-medium;
 	text-align: center;	
 	padding: 18rem 0 3rem 0;
-	margin-top: -20rem;
+	margin-top: -16rem;
 	.views-row{
 		.views-field-title{
 			font-family: "duke" !important;
@@ -422,8 +423,10 @@
 		background-clip: content-box;
 		min-height: 11rem;
 		width: 100%;
-		display: grid;
-		align-items: center;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		align-content: center;
 		padding: 1rem;
 		.views-field:not(.views-field-field-logo){
 			font-size: $font-medium;
@@ -432,7 +435,7 @@
 			
 		}
 		.views-field-title{
-			margin-bottom: 1rem;
+			margin-bottom: .7rem;
 		}
 		&:hover{
 			.views-field:not(.views-field-field-logo){
@@ -440,6 +443,7 @@
 				display: block;
 				color: white;
 				text-align: center;
+				flex-basis: 100%;
 
 				a{
 					text-decoration: none;
@@ -501,7 +505,7 @@
 	.programme-5{
 		// background: center / 45% no-repeat url(../images/POPSU_monde.svg) white;
 		img{
-			width: 45%;
+			width: 50%;
 		}
 		&:hover{
 			background: $col-mond;

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

@@ -1,5 +1,8 @@
 .page-node-type-programme{
-
+    //hide logo in header
+    #programme_toc-block_7{
+        display: none;
+    }
     //galerie de la page popsu - top (copy de home)
     #programme_toc-block_5{
         .slick-slide{
@@ -253,6 +256,7 @@
             header{
                 font-family: "duke";
                 font-size: $font-large;
+                text-transform: uppercase;
                 cursor: pointer;
                 transition: all 250ms;
                 &:hover{
@@ -353,42 +357,125 @@
     article{
         // font-size: $font-small;
         //temp hidden 
-        .computed_projets_references{
+        .computed_projets_references, .computed_themes_references, .field_logo{
             display: none;
         }
-        //
+        // temp ??
         h2:first-child{
             display: none;
         }
+        
         .body{
             font-size: $font-medium;
+            height: 20rem;
+            overflow: hidden;
+            position: relative;
+            -webkit-transition: all 250ms ease;
+            -moz-transition: all 250ms ease;
+            -o-transition: all 250ms ease;
+            transition: all 250ms ease;
+            footer{
+                position:absolute;
+                bottom:0;
+                left:0;
+                z-index: 1;
+
+                width: 100%;
+                text-align: center;
+
+                
+                a{
+                    display: inline-block;
+                    margin: 0 auto;
+                    background: black;
+                    color: white;
+                    cursor:pointer;
+
+                    font-family: "trueno";
+                    font-weight: 500;
+
+                    padding: .5rem 1rem;
+                    font-size: $font-small;
+                    text-decoration: none;
+                    text-transform: uppercase;
+                    
+
+                    &:hover{
+                        color:black;
+                        background: white;
+                    }
+                }
+            }
+        }
+        .body:after{
+            content: "";
+            opacity: 1;
+            position: absolute;
+            top: 0; bottom: 0; left: -15px; right: -15px;
+            box-shadow: inset white 0 -4rem 2rem;
+        }
+        .body_open{
+            height: auto;
+            &:after{
+                opacity: 0;
+                -webkit-transition: all 250ms ease;
+                -moz-transition: all 250ms ease;
+                -o-transition: all 250ms ease;
+                transition: all 250ms ease;
+            }
+            -webkit-transition: all 250ms ease;
+            -moz-transition: all 250ms ease;
+            -o-transition: all 250ms ease;
+            transition: all 250ms ease;
         }
         .field_textes{
+          
             .paragraph{
+                // border-top: 1px solid black;
+                border-bottom: 3px dotted gray;
+                padding: 1rem 0;
                 .field_titre{
                     font-size: $font-big;
                     font-weight: 600;
                     text-transform: initial;
-                    cursor:pointer;
-                    margin-top: 1rem;
+                    cursor: pointer;
+                    // margin-top: 1rem;
+                }
+                .field_titre:after{
+                    content: '▼';
+                    float: right;
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
+                }
+                .rotate:after{
+                    transform: rotate(180deg);
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
                 }
                 .field_texte{
-                    
+                    height: auto;
                     position: relative;
-                    // box-shadow: inset 0 -5rem 8rem $bck-col;
-                    transition: all 250ms;
-                }
-                .crop:after{
-                    content: "";
-                    position: absolute;
-                     top: 0; bottom: 0; left: -15px; right: -15px;
-                    box-shadow: inset white 0 -4rem 2rem;
-                    
+                    h2{
+                        text-transform: inherit;
+                    }
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
                 }
+                
                 .crop{
-                    max-height: 7rem;
+                    height: 0;
                     overflow: hidden;
-                    transition: all 250ms;
+                    display: none;
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
                 }
             }
         }

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

@@ -147,8 +147,9 @@
 		height: 100%;
 	}
 	a[rel~='home']{
+		display: none;
 		height: 100%;
-		display: block;
+		// display: block;
         font-size: 0;
 		color: transparent;
 		background: left / contain no-repeat url(../images/POPSU_logo.svg);