mobile moment

web/themes/custom/popsu_colloque/css/pages/moments.scss

@@ -21,5 +21,20 @@
         }
       }
     }
+    .__content{
+      max-height: calc(1.5rem * 12 );
+      // 1.5rem = line-height
+      overflow: hidden;
+      &.is_active{
+        max-height: 100%!important;
+      }
+  
+      @media screen and (min-width: 576px) {
+        max-height: 100%;
+      }
+    }
+    .more_link.is_active{
+      display: none!important;
+    }
   }
 }

web/themes/custom/popsu_colloque/css/pages/ressources.scss

@@ -7,3 +7,11 @@
     }
   }
 }
+
+
+#block-popsu-colloque-submenu{
+  .is-active{
+    color:white;
+    background:#1d378eff;
+  }
+}

web/themes/custom/popsu_colloque/js/script.js

@@ -322,6 +322,17 @@
     });
   }
 
+  function hidden_morelinkMoment(){
+    $morelink = $('#moments .more_link');
+    
+    $morelink.click(function(e) {
+      e.preventDefault();
+      $('#moments .__content').addClass('is_active');
+      $morelink.addClass('is_active');
+    })
+
+  }
+
   $( document ).ready(function() {
     // currenturl();
     notes();
@@ -330,6 +341,7 @@
     replaceAny();
     select_custom();
     remove_isactive();
+    hidden_morelinkMoment();
   });
 
 })(jQuery);

web/themes/custom/popsu_colloque/template/node/node--moments.html.twig

@@ -100,20 +100,31 @@
         <div class="__content">
           {{content.body}}
         </div>
+
+        <div class="mt-3 more_link mx-auto d-inline-block d-sm-none w-auto">
+          <a class="blue text-uppercase" href="#">Lire la suite</a>
+        </div>
+
       </div>
     </div>
-
+      
-
+      <section class="mt-4 col-12 px-0 d-block d-md-none">
+        {{content.field_role_de_l_intervenant}}
+      </section>
+      
     <div class="__ressources">
       <section class="__publications">
         {{content.field_publications}}
       </section>
+
       <section class="__bibliographie">
         {{content.field_bibliographie}}
       </section>
     </div>
+
   </div>
-  <div class="__wrap_side col-sm-12 col-md-3">
+  
-  {{content.field_role_de_l_intervenant}}
+  <div class="__wrap_side col-sm-12 col-md-3 d-none d-md-block">
+    {{content.field_role_de_l_intervenant}}
   </div>
 </article>