fix: description cuted button on top of the description container and smarter cut

assets/development/scripts/organization.js

@@ -25,22 +25,27 @@ document.querySelectorAll('.schedule-category').forEach(node => {
  */
 let description = document.querySelector('.description-cutted')
 let descriptionActions = document.querySelector('.description-actions-container')
+
 let descriptionOpened = false
 let defaultMaxHeight = ""
 if (description !== null) {
   let btn = document.querySelector('.description-btn')
+  let btnIcon = document.getElementById('description-btn-icon')
+  let btnText = document.getElementById('description-btn-text')
   btn.onclick = () => {
     if (!descriptionOpened) {
       // open the full description
       descriptionActions.className = descriptionActions.className.replace(' closed', '')
       defaultMaxHeight = description.style.maxHeight
       description.style.maxHeight = description.scrollHeight + "px"
-      btn.textContent = "Fermer la description"
+      btnText.textContent = "Fermer la description"
+      btnIcon.style.transform = 'rotate(180deg)'
     } else {
       // initial max Height
       descriptionActions.className += ' closed'
       description.style.maxHeight = defaultMaxHeight
-      btn.textContent = "Ouvrir la description"
+      btnText.textContent = "Ouvrir la description"
+      btnIcon.style.transform = 'rotate(0deg)'
     }
     descriptionOpened = !descriptionOpened
   }

assets/development/styles/main.css

@@ -57,14 +57,13 @@ body {
   padding: .5em 1em;
   color: white;
   border-radius: 7px;
-  background: #2c3e50;
+  background: #95a5a6;
   border: 0;
   cursor: pointer;
 }
 
 .btn:focus {
-  outline: 0;
+  box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
-  opacity: 0.8;
 }
 
 @media (max-width: 1600px) {

assets/development/styles/organization.css

@@ -422,6 +422,33 @@ section {
   margin-bottom: -62px;
 }
 
+.description-btn-container {
+  display: flex;
+  justify-content: center;
+}
+
+.description-btn {
+  width: 13em;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#description-btn-icon {
+  width: 1em;
+  height: 1em;
+  overflow: hidden;
+}
+
+#description-btn-text {
+  margin-left: .5em;
+}
+
+#description-btn-icon {
+  transition: all 0.1s ease-out;
+  transform: none;
+}
+
 /* *****************************************************************************
 
 *                                   SCHEDULE                                    

src/controllers/PublicController.ts

@@ -229,7 +229,7 @@ export default class PublicController {
           })
         }
 
-        version.cutDescription = Utils.isStrUsable(version, 'descriptionLong') && version.descriptionLong.length > 200
+        version.cutDescription = Utils.isStrUsable(version, 'descriptionLong') && version.descriptionLong.length > 800
         
         // if (version.cutDescription) {
         //   version.descriptionFirstHalf = version.descriptionLong.substr(0, 200) // not gonna lie

views/organization.twig

@@ -104,13 +104,16 @@
       {% if data.descriptionLong is not null and data.descriptionLong|length > 7 and not data.cutDescription %}
         {{ data.descriptionLong|raw }}
       {% elseif data.cutDescription %}
+      <div class="description-btn-container">
+        <button class="btn with-icon description-btn">
+          <svg id="description-btn-icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-down" class="btn-icon svg-inline--fa fa-angle-double-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M143 256.3L7 120.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0L313 86.3c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.4 9.5-24.6 9.5-34 .1zm34 192l136-136c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.4-9.4-24.6-9.4-33.9 0L160 352.1l-96.4-96.4c-9.4-9.4-24.6-9.4-33.9 0L7 278.3c-9.4 9.4-9.4 24.6 0 33.9l136 136c9.4 9.5 24.6 9.5 34 .1z"></path></svg>
+          <span id="description-btn-text">Ouvrir la description</span>
+        </button>
+      </div>
       <div class="description-cutted">
         {{ data.descriptionLong|raw }}
       </div>
       <div class="description-actions-container closed">
-        <button class="btn description-btn">
-          Ouvrir la description
-        </button>
       </div>
       {% else %}
         {{ data.descriptionShort|e }}