update

static/assets/js/home.js

@@ -15,12 +15,12 @@ navEnabler.onclick = async () => {
     // open the menu
     oldNavText = navEnablerText.textContent
     navEnablerText.textContent = "Minimiser le menu"
-    navEnablerIcon.style.transform = "rotate(0deg)"
+    navEnablerIcon.style.transform = "rotate(90eg)"
     navContent.style.maxHeight = navContent.scrollHeight + "px"
   } else {
     // close the menu
     navEnablerText.textContent = oldNavText
-    navEnablerIcon.style.transform = "rotate(-90deg)"
+    navEnablerIcon.style.transform = "rotate(0deg)"
     navContent.style.maxHeight = null
   }
   navOpened = !navOpened
@@ -82,12 +82,12 @@ function setAttributes(node, attrs) {
 }
 
 function renderCard(organization) {
-  let card = createEl('card')
+  let card = createEl('card', 'a')
 
   // image
-  let image = createEl('card-image')
-  let imageTag = createEl(0, 'img')
-  imageTag.src = organization.thumbnail
+  let image = createEl('card-image-container')
+  let imageTag = createEl('card-image')
+  imageTag.style = `background-image: url('${organization.thumbnail}')`
   image.appendChild(imageTag)
   card.appendChild(image)
   
@@ -117,14 +117,15 @@ function renderCard(organization) {
   let description = createEl('card-description')
   description.textContent = organization.description
 
-  //let link = createEl('card-link')
-  let aTag = createEl('card-link', 'a')
-  aTag.href = "/association/" + organization.slugs[organization.slugs.length - 1]
+  let goTo = "/association/" + organization.slugs[organization.slugs.length - 1]
   if (organization.isProposed) {
-    aTag.href += "?version=proposed"
+    goTo += "?version=proposed"
   }
-  aTag.textContent = "En savoir plus"
-  description.appendChild(aTag)
+  // let link = createEl('card-link')
+  // let aTag = createEl('card-link', 'a')
+  // aTag.href = 
+  // aTag.textContent = "En savoir plus"
+  // description.appendChild(aTag)
 
   upperContent.appendChild(description)
   //link.appendChild(aTag)
@@ -132,9 +133,11 @@ function renderCard(organization) {
   //content.appendChild(link)
   card.appendChild(content)
 
-  card.onclick = () => {
-    window.location = aTag.href 
-  }
+  card.href = goTo
+
+  // card.onclick = () => {
+  //   window.location = goTo
+  // }
   return card
 }
 

static/assets/js/organization.js

@@ -9,17 +9,43 @@ document.querySelectorAll('.schedule-category').forEach(node => {
   header.onclick = () => {
     if (!opened) {
       // open the table
-      icon.style.transform = "rotate(180deg)"
+      icon.style.transform = "rotate(0deg)"
       content.style.maxHeight = content.scrollHeight + "px"
     } else {
       // close the table
-      icon.style.transform = "rotate(0deg)"
+      icon.style.transform = "rotate(180deg)"
       content.style.maxHeight = null
     }
     opened = !opened
   }
 })
 
+/**
+ * Description
+ */
+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')
+  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"
+    } else {
+      // initial max Height
+      descriptionActions.className += ' closed'
+      description.style.maxHeight = defaultMaxHeight
+      btn.textContent = "Ouvrir la description"
+    }
+    descriptionOpened = !descriptionOpened
+  }
+}
+
 /**
  * Gallery modal to view media in large
  */
@@ -70,8 +96,22 @@ let openModal = (url, isVideo) =>  {
   //document.body.style.height = '100vh'
   document.body.style.overflow = 'hidden'
   document.body.style.touchAction = 'none'
+
+  setTimeout(() => {
+
+    const outsideClickListener = event => {
+      if (!mediaModalContent.contains(event.target) && isVisible(mediaModalContent)) {
+        closeModal()
+        document.removeEventListener('click', outsideClickListener)
+      }
+    }
+    document.addEventListener('click', outsideClickListener)
+  
+  }, 100)
 }
 
+const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length )
+
 let closeModal = () =>  {
   mediaModal.style.visibility = 'hidden'
   mediaModal.style.opacity = 0