ajout du dropdown dans la page collectif

user/themes/figureslibres-v2/css/theme.css

@@ -160,6 +160,63 @@ h1, h2 {
   line-height: 1.1em;
 }
 
+h4 {
+  display: block;
+  padding-top: 0.8rem;
+  width: 100%;
+  font-family: Syne, Sans-serif;
+  font-size: 1.25em;
+  cursor: pointer;
+}
+h4 a {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+}
+
+h4:first-of-type {
+  padding-top: 0;
+}
+
+h4 + p {
+  margin-bottom: 0.5rem !important;
+}
+h4 + p em {
+  display: block;
+  font-size: 0.75em;
+  cursor: pointer;
+}
+h4 + p em > img {
+  display: inline-block;
+  height: 0.75em;
+  width: 0.75em !important;
+  margin-bottom: unset !important;
+  margin-left: 0.3rem;
+  transform: rotate(0deg);
+  transition: transform 0.4s ease-out;
+}
+h4 + p em > img.open {
+  transform: rotate(180deg);
+}
+
+h4 + p + p {
+  margin-bottom: 0 !important;
+  padding-bottom: 0rem;
+  font-size: 0.75em;
+  max-height: 0px;
+  height: auto;
+  overflow: hidden;
+  transition: max-height 0.4s ease-out, padding-bottom 0.4s ease-out;
+}
+
+h4 + p + p.open {
+  max-height: 50vh;
+  padding-bottom: 1rem;
+}
+
+h4 + p + p + h2 {
+  margin-top: 1.5rem;
+}
+
 p, ul, figcaption {
   font-family: Lato, Sans-serif;
   font-size: 1.2em;
@@ -1124,10 +1181,10 @@ body footer p a {
     width: 70%;
   }
   body main #text-content .text-item:first-of-type {
-    position: fixed;
-    top: calc(7vh + 2vh + 30px);
-    width: 20%;
-    left: 70%;
+    position: absolute;
+    top: 0;
+    width: 20vw;
+    left: 82%;
   }
   body main #text-content .text-item:first-of-type img {
     width: 70%;

user/themes/figureslibres-v2/js/script.js

@@ -13,6 +13,8 @@ $(document).ready( () => {
   } else if ($('main').children(":first").attr('id') == 'reader') {
     hideFooter()
     displayReader()
+  } else if ($('main').children(":first").attr('id') == 'text-content') {
+    addToggleBiography()
   }
   initBarba()
 })
@@ -69,7 +71,10 @@ function initBarba() {
       loadProjetIndex()
       filterWhenEntering()
     } else if ($(data.next.container).attr('id') == 'text-content')
-    { if (isDesktopDevice) { displayFooter() } }
+    { 
+      if (isDesktopDevice) displayFooter()
+      addToggleBiography()
+    }
   })
   barba.hooks.after((data) => {
     let pageTitleComparator, navIndex
@@ -813,3 +818,19 @@ function hideFooterOnResize() {
     $('footer').css('display', 'none')
   }
 }
+
+// dropdown collectif
+function addToggleBiography() {
+  $('h4 + p > em, h4').on('click', toggleBiographie);
+  $('h4 + p > em').append('<img src="/user/themes/figureslibres-v2/images/pictos/chevron-down.svg" aria-hidden="true">');
+}
+
+function toggleBiographie(el) {
+  if (el.target.tagName === "H4") {
+    el.target.nextElementSibling.nextElementSibling.classList.toggle('open');
+    el.target.nextElementSibling.firstElementChild.firstElementChild.classList.toggle('open');
+  } else {
+    el.target.firstElementChild.classList.toggle('open');
+    el.target.parentElement.nextElementSibling.classList.toggle('open');
+  }
+}

user/themes/figureslibres-v2/scss/style.scss

@@ -14,6 +14,57 @@
     font-size: $titleFontSizeMobile;
     line-height: $titleLineHeight;
   }
+  h4 {
+    display: block;
+    padding-top: 0.8rem;
+    width: 100%;
+    font-family: $titleFont;
+    font-size: $currentLineHeight;
+    cursor: pointer;
+    a {
+      text-decoration: underline;
+      text-decoration-thickness: 1px;
+    }
+  }
+  h4:first-of-type {
+    padding-top: 0;
+  }
+  h4 + p {
+    margin-bottom: 0.5rem !important;
+    em {
+      display: block;
+      font-size: $tinySize;
+      cursor: pointer;
+      > img {
+        display: inline-block;
+        height: $tinySize;
+        width: $tinySize !important;
+        margin-bottom: unset !important;
+        margin-left: 0.3rem;
+        transform: rotate(0deg);
+        @include transition-ease-out(transform);
+      }
+      > img.open {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  h4 + p + p {
+    margin-bottom: 0 !important;
+    padding-bottom: 0rem;
+    font-size: $tinySize;
+    max-height: 0px;
+    height: auto;
+    overflow: hidden;
+    @include transition-ease-out(max-height, padding-bottom);
+  }
+  h4 + p + p.open {
+    max-height: 50vh;
+    padding-bottom: 1rem;
+  }
+  h4 + p + p + h2 {
+    margin-top: 1.5rem;
+  }
   p, ul, figcaption {
     font-family: $mainFont;
     font-size: $currentSize;
@@ -989,10 +1040,10 @@
             width: 70%;
           }
           .text-item:first-of-type {
-            position: fixed;
-            top: calc(#{$navHeight} + #{$navGradientHeightDesktop} + #{$sectionSpacing});
-            width: 20%;
-            left: 70%;
+            position: absolute;
+            top: 0;
+            width: 20vw;
+            left: 82%;
             img {
               width: 70%;
               margin-bottom: 5vh;