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;
-  opacity: 0.8;
+  box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
 }
 
 @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