add countdown and some bug fixes like csv

assets/development/scripts/countdown.js

@@ -0,0 +1,47 @@
+const countdown = document.getElementById('countdown')
+const counter = document.getElementById('counter')
+
+const daysContainer = document.getElementById('days')
+const hoursContainer = document.getElementById('hours')
+const minutesContainer = document.getElementById('minutes')
+const secondsContainer = document.getElementById('seconds')
+
+let target = new Date("2020-09-04 15:00:00")
+
+let shown = false
+
+function render() {
+  let current = new Date()
+  let difference = target - current
+
+  var _second = 1000,
+    _minute = _second * 60,
+    _hour = _minute * 60,
+    _day = _hour * 24;
+
+  var days = Math.floor(difference / _day),
+    hours = Math.floor((difference % _day) / _hour),
+    minutes = Math.floor((difference % _hour) / _minute),
+    seconds = Math.floor((difference % _minute) / _second);
+
+    days = (String(days).length >= 2) ? days : '0' + days;
+    hours = (String(hours).length >= 2) ? hours : '0' + hours;
+    minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
+    seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
+  
+  daysContainer.textContent = days
+  hoursContainer.textContent = hours
+  minutesContainer.textContent = minutes
+  secondsContainer.textContent = seconds
+  
+  if (!shown) {
+    setTimeout(() => {
+      countdown.style.opacity = 1
+      shown = true
+    }, 300)
+  }
+}
+
+
+render()
+setInterval(render, 1000)

assets/development/styles/countdown.css

@@ -0,0 +1,72 @@
+.countdown {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-direction: column;
+
+  opacity: 0;
+  transition: 0.2s all ease-in-out;
+}
+
+.counter {
+  display: flex;
+  align-items: center;
+}
+
+.counter-component {
+  border: 2px solid #e74c3c;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 6em;
+  height: 6em;
+  margin-right: 1em;
+  margin-left: 1em;
+}
+
+.counter-component:first-of-type {
+  margin-left: 0;
+}
+
+.counter-component:last-of-type {
+  margin-right: 0;
+}
+
+.counter-component span {
+  font-size: 1.5em;
+}
+
+.label {
+  font-size: .75em;
+  color: #34495e;
+  font-weight: lighter;
+  margin-top: .5em;
+}
+
+@media (max-width: 600px) {
+  .counter {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-column-gap: 1em;
+    grid-row-gap: 1em;
+    margin-bottom: 2em;
+  }
+
+  .counter-component {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .counter-component:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .separator {
+    display: none;
+  }
+}

assets/development/styles/main.css

@@ -43,7 +43,7 @@ body {
   position: fixed;
   z-index: 9999999;
   left: 1em;
-  bottom: 2em;
+  bottom: 1em;
   padding: 1em;
   font-weight: bold;
   border-radius: 3px;

assets/development/styles/organization.css

@@ -29,7 +29,7 @@
 .return-icon {
   display: flex;
   align-items: center;
-  margin-right: .5em;
+  margin-right: .75em;
 }
 
 .return-icon svg {
@@ -47,25 +47,34 @@
 
 ********************************************************************************/
 
-.cover-background {
+.cover-container {
-  background-position: center;
+  position: relative;
-  background-size: cover;
-  height: 13em;
-  width: 100%;
 }
 
-.cover {
+.cover-background {
-  height: 13em;
+  z-index: -1;
-  margin-top: -13em;
+  position: absolute;
-  background-color: rgba(230, 126, 34, 0.4);
+  top: 0;
+  left: 0;
+
+  background-position: center;
   background-size: cover;
+  width: 100%;
+  height: 100%;
 }
 
 .cover-content {
+  background-color: rgba(230, 126, 34, 0.75);
+  background-size: cover;
+  
   color: white;
+  padding-top: 1.5em;
+  padding-bottom: 1.5em;
+}
+
+.cover-content .container {
   display: flex;
   align-items: center;
-  height: 13em;
 }
 
 .cover-image {
@@ -76,16 +85,14 @@
   background-position: center;
   width: 10em;
   height: 10em;
+  min-width: 10em;
+  min-height: 10em;
   margin-right: 3em;
 }
 
-.cover-title-container {
-
-}
-
 .cover-title {
   font-family: 'Roboto Slab', serif;
-  font-size: 3.5em;
+  font-size: 3em;
   font-weight: normal;
   margin: 0;
 }
@@ -497,6 +504,14 @@ section {
   margin-bottom: 1em;
 }
 
+.contact-item.address .contact-content div {
+  margin-bottom: .25em;
+}
+
+.contact-item.address .contact-content div:last-child {
+  margin-bottom: 0;
+}
+
 .contact-icon {
   color: #B15808;
   background-color: #C4C4C4;
@@ -573,6 +588,7 @@ People cards
 
 .people-card {
   width: 100%;
+  max-width: 50%;
   margin-right: 1em;
   border-radius: 3px;
   padding: 1.2em 1.5em;
@@ -674,20 +690,8 @@ RESPONSIVE
 
 
 @media (max-width: 900px) {
-
-  .cover-background {
-    height: 23em;
-    width: 100%;
-  }
   
-  .cover {
+  .cover-content .container {
-    height: 23em;
-    margin-top: -23em;
-  }
-  
-  .cover-content {
-    height: 23em;
-
     flex-direction: column;
     justify-content: center;
     text-align: center;
@@ -699,6 +703,7 @@ RESPONSIVE
   }
 
   .cover-title {
+    font-size: 2.5em;
     margin-bottom: .25em;
   }
 
@@ -804,6 +809,7 @@ RESPONSIVE
   }
 
   .people-card {
+    max-width: 100%;
     width: auto;
     text-align: center;
     margin-bottom: 1em;

assets/production/scripts/countdown.js

@@ -0,0 +1 @@
+const countdown=document.getElementById("countdown"),counter=document.getElementById("counter"),daysContainer=document.getElementById("days"),hoursContainer=document.getElementById("hours"),minutesContainer=document.getElementById("minutes"),secondsContainer=document.getElementById("seconds");let target=new Date("2020-09-04 15:00:00"),shown=!1;function render(){let e=new Date,t=target-e;var n=Math.floor(t/864e5),o=Math.floor(t%864e5/36e5),r=Math.floor(t%36e5/6e4),d=Math.floor(t%6e4/1e3);n=String(n).length>=2?n:"0"+n,o=String(o).length>=2?o:"0"+o,r=String(r).length>=2?r:"0"+r,d=String(d).length>=2?d:"0"+d,daysContainer.textContent=n,hoursContainer.textContent=o,minutesContainer.textContent=r,secondsContainer.textContent=d,shown||setTimeout(()=>{countdown.style.opacity=1,shown=!0},300)}render(),setInterval(render,1e3);

assets/production/scripts/home.js

@@ -1 +1 @@
-let navOpened=!1,oldNavText="",oldNavIcon="",navEnabler=document.getElementById("nav-enabler"),navEnablerText=document.getElementById("nav-enabler-text"),navEnablerIcon=document.getElementById("nav-enabler-icon"),navContent=document.getElementById("nav-content"),mosaic=document.getElementById("mosaic"),mosaicHeader=document.getElementById("mosaic-header"),tags=[];function createEl(e=!1,n="div"){let t=document.createElement(n);return 0!=e&&(t.className=e),t}function renderNavItem(e){let n=createEl("nav-item"),t=createEl("nav-icon"),a=createEl(e.icon,"i");t.appendChild(a),n.appendChild(t);let r=createEl("nav-item-content"),l=createEl("nav-title");l.textContent=e.name,r.appendChild(l);let o=createEl("nav-access"),i=createEl("fas fa-chevron-right","i");return o.appendChild(i),r.appendChild(l),r.appendChild(o),n.appendChild(r),n}function setAttributes(e,n){for(var t in n)attr=document.createAttribute(t),attr.value=n[t],e.attributes.setNamedItem(attr)}function renderCard(e){let n=createEl("card","a"),t=createEl("card-image-container"),a=createEl("card-image");a.style=`background-image: url('${e.thumbnail}')`,t.appendChild(a),n.appendChild(t);let r=createEl("card-content"),l=createEl(),o=createEl("card-title-container"),i=createEl("card-title","h2");i.textContent=e.name,o.appendChild(i);let c=createEl("card-icon");if(Array.isArray(e.tags)&&e.tags.length>0){let n=tags.filter(n=>e.tags[0]===n._id)[0];c.innerHTML=n.iconHTML}o.appendChild(c),l.appendChild(o);let d=createEl("card-description");d.textContent=e.description;let s="/association/"+e.slug;return isProposed&&(s+="?version=proposed"),l.appendChild(d),r.appendChild(l),n.appendChild(r),n.href=s,n}navEnabler.onclick=async()=>{navOpened?(navEnablerText.textContent=oldNavText,navEnablerIcon.style.transform="rotate(0deg)",navContent.style.maxHeight=null):(oldNavText=navEnablerText.textContent,navEnablerText.textContent="Minimiser le menu",navEnablerIcon.style.transform="rotate(90eg)",navContent.style.maxHeight=navContent.scrollHeight+"px"),navOpened=!navOpened};let currentTag=null,currentCardContainer=null;function enableTag(e){let n="nav-all"===e.id,t="";n||(t=e.attributes["data-tag-id"].value);let a=organizations.filter(e=>e.tags.filter(e=>e===t).length>0||n);renderMosaic(a),e.className+=" enabled",null!==currentTag&&(currentTag.className=currentTag.className.replace("enabled","")),currentTag=e,null==a||a.length<=0?mosaicHeader.textContent="Aucune associations listées":1===a.length?mosaicHeader.textContent="Une association listée":mosaicHeader.textContent=a.length+" associations listées"}function posY(e){for(var n=e,t=0;n&&"body"!==n.tagName.toLowerCase();)t+=n.offsetTop,n=n.offsetParent;return t}function viewPortHeight(){var e=document.documentElement;return window.innerWidth?window.innerHeight:e&&!isNaN(e.clientHeight)?e.clientHeight:0}function scrollY(){return window.pageYOffset?window.pageYOffset:Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function isVisible(e){var n=viewPortHeight(),t=scrollY();return!(posY(e)>n+t)}let rendering=!0,page=0,elementsPerPage=5,focusPoint=null,focusElementPos=2,cardContainer=null,currentOrganizations=[],pageCount=0;function renderPage(){rendering=!0;let e=currentOrganizations.slice(page*elementsPerPage,(page+1)*elementsPerPage);e.forEach((n,t)=>{let a=renderCard(n);cardContainer.appendChild(a),t===e.length-focusElementPos&&(focusPoint=a)}),rendering=!1}function renderMosaic(e){cardContainer=createEl("card-container"),currentOrganizations=e,pageCount=Math.floor(e.length/elementsPerPage),renderPage(),null!==currentCardContainer&&mosaic.removeChild(currentCardContainer),currentCardContainer=cardContainer,mosaic.appendChild(cardContainer)}window.onscroll=()=>{null!=focusPoint&&isVisible(focusPoint)&&!rendering&&page+1<pageCount&&(page++,renderPage())},window.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("#nav-content .nav-item").forEach(e=>{e.onclick=()=>enableTag(e),"nav-all"!==e.id&&tags.push({_id:e.attributes["data-tag-id"].value,iconHTML:e.querySelector(".nav-icon").innerHTML})}),enableTag(document.getElementById("nav-all"))});
+let navOpened=!1,oldNavText="",oldNavIcon="",navEnabler=document.getElementById("nav-enabler"),navEnablerText=document.getElementById("nav-enabler-text"),navEnablerIcon=document.getElementById("nav-enabler-icon"),navContent=document.getElementById("nav-content"),mosaic=document.getElementById("mosaic"),mosaicHeader=document.getElementById("mosaic-header"),tags=[];function createEl(e=!1,n="div"){let t=document.createElement(n);return 0!=e&&(t.className=e),t}function renderNavItem(e){let n=createEl("nav-item"),t=createEl("nav-icon"),a=createEl(e.icon,"i");t.appendChild(a),n.appendChild(t);let r=createEl("nav-item-content"),l=createEl("nav-title");l.textContent=e.name,r.appendChild(l);let i=createEl("nav-access"),o=createEl("fas fa-chevron-right","i");return i.appendChild(o),r.appendChild(l),r.appendChild(i),n.appendChild(r),n}function setAttributes(e,n){for(var t in n)attr=document.createAttribute(t),attr.value=n[t],e.attributes.setNamedItem(attr)}function renderCard(e){let n=createEl("card","a"),t=createEl("card-image-container"),a=createEl("card-image");a.style=`background-image: url('${mediaBaseUrl+"/"+e.thumbnail}')`,t.appendChild(a),n.appendChild(t);let r=createEl("card-content"),l=createEl(),i=createEl("card-title-container"),o=createEl("card-title","h2");o.textContent=e.name,i.appendChild(o);let c=createEl("card-icon");if(Array.isArray(e.tags)&&e.tags.length>0){let n=tags.filter(n=>e.tags[0]===n._id)[0];c.innerHTML=n.iconHTML}i.appendChild(c),l.appendChild(i);let d=createEl("card-description");d.textContent=e.description;let s="/association/"+e.slug;return isProposed&&(s+="?version=proposed"),l.appendChild(d),r.appendChild(l),n.appendChild(r),n.href=s,n}navEnabler.onclick=async()=>{navOpened?(navEnablerText.textContent=oldNavText,navEnablerIcon.style.transform="rotate(0deg)",navContent.style.maxHeight=null):(oldNavText=navEnablerText.textContent,navEnablerText.textContent="Minimiser le menu",navEnablerIcon.style.transform="rotate(90eg)",navContent.style.maxHeight=navContent.scrollHeight+"px"),navOpened=!navOpened};let currentTag=null,currentCardContainer=null;function enableTag(e){let n="nav-all"===e.id,t="";n||(t=e.attributes["data-tag-id"].value);let a=organizations.filter(e=>e.tags.filter(e=>e===t).length>0||n);renderMosaic(a),e.className+=" enabled",null!==currentTag&&(currentTag.className=currentTag.className.replace("enabled","")),currentTag=e,null==a||a.length<=0?mosaicHeader.textContent="Aucune associations listées":1===a.length?mosaicHeader.textContent="Une association listée":mosaicHeader.textContent=a.length+" associations listées"}function posY(e){for(var n=e,t=0;n&&"body"!==n.tagName.toLowerCase();)t+=n.offsetTop,n=n.offsetParent;return t}function viewPortHeight(){var e=document.documentElement;return window.innerWidth?window.innerHeight:e&&!isNaN(e.clientHeight)?e.clientHeight:0}function scrollY(){return window.pageYOffset?window.pageYOffset:Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function isVisible(e){var n=viewPortHeight(),t=scrollY();return!(posY(e)>n+t)}let rendering=!0,page=0,elementsPerPage=5,focusPoint=null,focusElementPos=2,cardContainer=null,currentOrganizations=[],pageCount=0;function renderPage(){rendering=!0;let e=currentOrganizations.slice(page*elementsPerPage,(page+1)*elementsPerPage);e.forEach((n,t)=>{let a=renderCard(n);cardContainer.appendChild(a),t===e.length-focusElementPos&&(focusPoint=a)}),rendering=!1}function renderMosaic(e){cardContainer=createEl("card-container"),currentOrganizations=e,pageCount=Math.floor(e.length/elementsPerPage),renderPage(),null!==currentCardContainer&&mosaic.removeChild(currentCardContainer),currentCardContainer=cardContainer,mosaic.appendChild(cardContainer)}window.onscroll=()=>{null!=focusPoint&&isVisible(focusPoint)&&!rendering&&page+1<pageCount&&(page++,renderPage())},window.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("#nav-content .nav-item").forEach(e=>{e.onclick=()=>enableTag(e),"nav-all"!==e.id&&tags.push({_id:e.attributes["data-tag-id"].value,iconHTML:e.querySelector(".nav-icon").innerHTML})}),enableTag(document.getElementById("nav-all"))});

assets/production/scripts/organization.js

@@ -1,124 +1 @@
-/**
+document.querySelectorAll(".schedule-category").forEach(e=>{let t=!1,i=e.querySelector(".schedule-category-collapse-icon"),o=e.querySelector(".schedule-category-table");e.querySelector(".schedule-category-header").onclick=()=>{t?(i.style.transform="rotate(180deg)",o.style.maxHeight=null):(i.style.transform="rotate(0deg)",o.style.maxHeight=o.scrollHeight+"px"),t=!t}});let description=document.querySelector(".description-cutted"),descriptionActions=document.querySelector(".description-actions-container"),descriptionOpened=!1,defaultMaxHeight="";if(null!==description){let e=document.querySelector(".description-btn");e.onclick=()=>{descriptionOpened?(descriptionActions.className+=" closed",description.style.maxHeight=defaultMaxHeight,e.textContent="Ouvrir la description"):(descriptionActions.className=descriptionActions.className.replace(" closed",""),defaultMaxHeight=description.style.maxHeight,description.style.maxHeight=description.scrollHeight+"px",e.textContent="Fermer la description"),descriptionOpened=!descriptionOpened}}let mediaModal=document.querySelector("#media-modal"),mediaModalContent=document.querySelector("#media-modal-content"),openModal=(e,t)=>{mediaModal.style.visibility="visible",mediaModal.style.opacity=1,mediaModalContent.innerHTML="";let i=document.createAttribute("src");i.value=e;let o=null;if(t){o=document.createElement("video"),o.setAttribute("controls",""),o.setAttribute("autoplay",""),o.setAttribute("name","media");let t=document.createElement("source");t.setAttribute("src",e),t.setAttribute("type","video/mp4"),o.appendChild(t)}else o=document.createElement("img"),o.attributes.setNamedItem(i);mediaModalContent.appendChild(o),document.body.style.overflow="hidden",document.body.style.touchAction="none",setTimeout(()=>{const e=t=>{!mediaModalContent.contains(t.target)&&isVisible(mediaModalContent)&&(closeModal(),document.removeEventListener("click",e))};document.addEventListener("click",e)},100)};const isVisible=e=>!!e&&!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length);let closeModal=()=>{mediaModal.style.visibility="hidden",mediaModal.style.opacity=0,document.body.style.overflow="initial",document.body.style.height="initial";let e=document.querySelector("#media-modal video");null!==e&&e.pause()};
- * Schedule collapsable section animation
- */
-document.querySelectorAll('.schedule-category').forEach(node => {
-  let opened = false
-  let icon = node.querySelector('.schedule-category-collapse-icon')
-  let content = node.querySelector('.schedule-category-table')
-  let header = node.querySelector('.schedule-category-header')
-  header.onclick = () => {
-    if (!opened) {
-      // open the table
-      icon.style.transform = "rotate(0deg)"
-      content.style.maxHeight = content.scrollHeight + "px"
-    } else {
-      // close the table
-      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
- */
-let mediaModal = document.querySelector('#media-modal')
-let mediaModalContent = document.querySelector('#media-modal-content')
-// let mediaModalImage = document.querySelector('#media-modal img')
-// let mediaModalVideo = document.querySelector('#media-modal video')
-// let mediaModalSource = document.querySelector('#media-modal video source')
-
-// function disableScroll() { 
-//     // Get the current page scroll position 
-//     scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
-//     scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, 
-  
-//         // if any scroll is attempted, set this to the previous value 
-//         window.onscroll = function() { 
-//             window.scrollTo(scrollLeft, scrollTop); 
-//         }; 
-// } 
-  
-// function enableScroll() { 
-//     window.onscroll = function() {}; 
-// }
-
-
-let openModal = (url, isVideo) =>  {
-  mediaModal.style.visibility = 'visible'
-  mediaModal.style.opacity = 1
-  mediaModalContent.innerHTML = ""
-
-  let attr = document.createAttribute('src')
-  attr.value = url
-  let el = null
-  if (isVideo) {
-    el = document.createElement('video')
-    el.setAttribute('controls', '')
-    el.setAttribute('autoplay', '')
-    el.setAttribute('name', 'media')
-    let source = document.createElement('source')
-    source.setAttribute('src', url)
-    source.setAttribute('type', 'video/mp4')
-    el.appendChild(source)
-  } else {
-    el = document.createElement('img')
-    el.attributes.setNamedItem(attr)
-  }
-  mediaModalContent.appendChild(el)
-  //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
-  document.body.style.overflow = 'initial'
-  document.body.style.height = 'initial'
-  let video = document.querySelector('#media-modal video')
-  if (video !== null) {
-    video.pause()
-  }
-}

assets/production/styles/countdown.css

@@ -0,0 +1 @@
+.countdown{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;flex-direction:column;opacity:0;transition:.2s all ease-in-out}.counter{display:flex;align-items:center}.counter-component{border:2px solid #e74c3c;border-radius:50%;display:flex;justify-content:center;align-items:center;flex-direction:column;width:6em;height:6em;margin-right:1em;margin-left:1em}.counter-component:first-of-type{margin-left:0}.counter-component:last-of-type{margin-right:0}.counter-component span{font-size:1.5em}.label{font-size:.75em;color:#34495e;font-weight:lighter;margin-top:.5em}@media (max-width:600px){.counter{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;grid-column-gap:1em;grid-row-gap:1em;margin-bottom:2em}.counter-component{margin-right:0;margin-left:0}.counter-component:last-of-type{margin-bottom:0}.separator{display:none}}

assets/production/styles/main.css

@@ -1 +1 @@
-html{overflow-y:scroll}body{font-family:Roboto,sans-serif;margin:0}.container{width:60%;margin:0 auto}a{color:#3498db}a:hover{text-decoration:underline;transition:color .2s;color:#2980b9}body,html{height:100%}body{display:flex;flex-direction:column}.up-footer{flex:1 0 auto}.sticky-footer{flex-shrink:0}.proposed-alert{position:fixed;z-index:9999999;left:1em;bottom:2em;padding:1em;font-weight:700;border-radius:3px;text-transform:uppercase;border:1px solid #c0392b;background-color:#e74c3c;color:#fff}.btn{padding:.5em 1em;color:#fff;border-radius:7px;background:#2c3e50;border:0;cursor:pointer}.btn:focus{outline:0;opacity:.8}@media (max-width:1600px){.container{width:70%}}@media (max-width:1500px){.container{width:80%}}@media (max-width:900px){.container{width:92%}}
+html{overflow-y:scroll}body{font-family:Roboto,sans-serif;margin:0}.container{width:60%;margin:0 auto}a{color:#3498db}a:hover{text-decoration:underline;transition:color .2s;color:#2980b9}body,html{height:100%}body{display:flex;flex-direction:column}.up-footer{flex:1 0 auto}.sticky-footer{flex-shrink:0}.proposed-alert{position:fixed;z-index:9999999;left:1em;bottom:1em;padding:1em;font-weight:700;border-radius:3px;text-transform:uppercase;border:1px solid #c0392b;background-color:#e74c3c;color:#fff}.btn{padding:.5em 1em;color:#fff;border-radius:7px;background:#2c3e50;border:0;cursor:pointer}.btn:focus{outline:0;opacity:.8}@media (max-width:1600px){.container{width:70%}}@media (max-width:1500px){.container{width:80%}}@media (max-width:900px){.container{width:92%}}

gulpfile.js

@@ -12,7 +12,7 @@ function minifyStyles() {
 }
 
 function minifyScripts() {
-  return gulp.src(developmentPath + '/scripts/home.js')
+  return gulp.src(developmentPath + '/scripts/*.js')
     .pipe(terser())
     .pipe(gulp.dest(productionPath + '/scripts'))
 }

src/app.ts

@@ -58,6 +58,7 @@ let main = async () => {
   app.use(bodyParser.json())
 
   app.get('/', PublicController.home)
+  app.get('/countdown', PublicController.countdown)
   app.get('/association/:slug', PublicController.organization)
   app.get('/a-propos', PublicController.about)
   app.get('/mentions-legales', PublicController.legals)

src/controllers/AdminOrganizationController.ts

@@ -24,6 +24,7 @@ export default class AdminOrganizationController {
     // second column is always email
     const input = req.body.data
     const parsed = Papa.parse(input)
+    console.log(parsed)
     if (parsed.errors.length > 0) {
       return res
         .status(400)
@@ -51,7 +52,9 @@ export default class AdminOrganizationController {
       console.log(errors)
       res.status(400).json({
         success: false,
-        errors
+        errors,
+        parsed,
+        input
       })
     })
   }
@@ -64,11 +67,12 @@ export default class AdminOrganizationController {
     ).then(({ data, body }) => {
       res.json({ success: true, data, body })
     }).catch((err: any) => {
-      res.status(400).json({ success: false, errors: err.errors })
+      res.status(400).json({ success: false, errors: [err] })
     })
   }
 
   static storeUniversal(adminName: string, email: string, validationState: string): Promise<any> {
+    console.log(adminName, email, validationState)
     return new Promise((resolve, reject) => {
       if (validationState == null) {
         validationState = 'unaware'

src/controllers/DelegateController.ts

@@ -196,6 +196,7 @@ export default class DelegateController {
     // before starting the upload process, we want to make sure that this organization is not exeeding the size limit for all the file
     let currentSize = MediaService.computeSize(res.locals.organization.proposedVersion)
     if (currentSize >= MediaService.getSizeLimit()) {
+      console.log('> An upload was refused because of a storage size exceed event')
       return res
       .status(413)
       .json({
@@ -274,9 +275,15 @@ export default class DelegateController {
         
         // @ts-ignore
         req.files.forEach((file: any) => {
-          proposedVersion.gallery.push(MediaService.buildMedia(file, 'media'))
+          file = MediaService.buildMedia(file, 'media')
+          proposedVersion.gallery.push(file)
+          
+          // if the media is a video, we generate a thumbnail
+          if (file.contentType.indexOf('video') !== -1) {
+            console.log('generating a thumbnail')
+          }
         })
-
+        
         Organization.updateOne({ _id: res.locals.organization._id }, {
           proposedVersion,
           updatedAt: new Date()

src/controllers/PublicController.ts

@@ -15,6 +15,10 @@ import MediaService from '../MediaService'
 
 export default class PublicController {
 
+  static async countdown(req: express.Request, res: express.Response) {
+    res.render('countdown.twig', {})
+  }
+
   static async home(req: express.Request, res: express.Response) {
     // let client: IORedis.Redis = RedisService.getClient()
     // await client.set('hello', 'world')

src/models/Organization.ts

@@ -28,16 +28,13 @@ class AllowedString extends mongoose.SchemaType {
 
 const email = {
   type: String,
-  trim: true,
-  lowercase: true,
-  unique: true,
   validate: {
     validator: function(v: string) {
+      console.log(v)
       return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v);
     },
     message: "Invalid email"
-  },
+  }
-  required: [true, "Email required"]
 }
   
 // @ts-ignore
@@ -71,7 +68,7 @@ const OrganizationVersion = {
     website: { type: String },
     address: { type: String },
     person: { type: String },
-    email: { type: String },
+    email,
     phone: { type: String },
     peoples: [{
       name: { type: String },

views/countdown.twig

@@ -0,0 +1,37 @@
+{% extends "./base.twig" %}
+{% block title %}Le site va ouvrir prochainement{% endblock %}
+{% block head %}
+  <link rel="stylesheet" href="/styles/countdown.css" />
+{% endblock %}
+{% block content %}
+  <div class="countdown" id="countdown">
+    <div class="countdown-title-container">
+      <h2 class="countdown-title">Soyez patient...</h2>
+      <h5 class="countdown-subtitle">Le site ouvre le 4 septembre, c'est à dire dans :</h5>
+    </div>
+    <div id="counter" class="counter">
+      <div class="counter-component days">
+        <span id="days"></span>
+        <div class="label">Jours</div>
+      </div>
+      <span class="separator">:</span>
+      <div class="counter-component hours">
+        <span id="hours"></span>
+        <div class="label">Heures</div>
+      </div>
+      <span class="separator">:</span>
+      <div class="counter-component minutes">
+        <span id="minutes"></span>
+        <div class="label">Minutes</div>
+      </div>
+      <span class="separator">:</span>
+      <div class="counter-component seconds">
+        <span id="seconds"></span>
+        <div class="label">Secondes</div>
+      </div>
+    </div>
+  </div>
+{% endblock %}
+{% block scripts %}
+<script src="/scripts/countdown.js"></script>
+{% endblock %}

views/organization.twig

@@ -20,18 +20,20 @@
     </div>
   </div>
 </div>
-<div class="cover-background" style="background-image: url({{ data.cover.location }})"></div>
+<div class="cover-container">
-<div class="cover">
+  <div class="cover-background" style="background-image: url({{ data.cover.location }})"></div>
-  <div class="cover-content container">
+  <div class="cover-content">
-    <div class="cover-image" style="background-image: url({{ data.thumbnail.location }});">
+    <div class="container"> 
-    </div>
+      <div class="cover-image" style="background-image: url({{ data.thumbnail.location }});">
-    <div class="cover-title-container">
+      </div>
-      <h1 class="cover-title">
+      <div class="cover-title-container">
-        {{ data.name }}
+        <h1 class="cover-title">
-      </h1>
+          {{ data.name }}
-      {# <h4 class="cover-sub-title">
+        </h1>
-        Sous titre
+        {# <h4 class="cover-sub-title">
-      </h4> #}
+          Sous titre
+        </h4> #}
+      </div>
     </div>
   </div>
 </div>
@@ -163,7 +165,6 @@
       <div class="section-divider"></div>
     </div>
     <div class="org-container contact">
-      {% if data.contacts.peoples|length > 0 %}
       <div class="peoples">
         <div class="people-card">
           <div class="people-header">
@@ -183,6 +184,7 @@
                 {{ data.contacts.email }}
               </a>
             </div>
+            {% if data.contacts.phoneInt is not empty %}
             <div class="people-contact phone">
               <svg class="people-contact-icon" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                 <path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path>
@@ -191,6 +193,7 @@
                 {{ data.contacts.phoneSplit }}
               </a>
             </div>
+            {% endif %}
           </div>
         </div>
         {% for people in data.contacts.peoples %}
@@ -224,31 +227,32 @@
         </div>
         {% endfor %}
       </div>
-      {% endif %}
+      {#
-      {% if data.contacts.peoples|length == 0 and data.contacts.person|length > 0 %}
+        {% if data.contacts.peoples|length == 0 and data.contacts.person|length > 0 %}
-      <div class="contact-item person">
+        <div class="contact-item person">
-        <div class="contact-icon">
+          <div class="contact-icon">
-          <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
+              <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
-          </svg>
+            </svg>
+          </div>
+          <div class="contact-content">
+            {{ data.contacts.person }}
+          </div>
         </div>
-        <div class="contact-content">
+        {% endif %}
-          {{ data.contacts.person }}
+        {% if data.contacts.peoples|length == 0 and data.contacts.email|length > 0 %}
+        <div class="contact-item email">
+          <div class="contact-icon">
+            <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+              <path fill="currentColor" d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"></path>
+            </svg>
+          </div>
+          <div class="contact-content">
+            <a href="mailto:{{ data.contacts.email }}">{{ data.contacts.email }}</a>
+          </div>
         </div>
-      </div>
+        {% endif %}
-      {% endif %}
+      #}
-      {% if data.contacts.peoples|length == 0 and data.contacts.email|length > 0 %}
-      <div class="contact-item email">
-        <div class="contact-icon">
-          <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-            <path fill="currentColor" d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"></path>
-          </svg>
-        </div>
-        <div class="contact-content">
-          <a href="mailto:{{ data.contacts.email }}">{{ data.contacts.email }}</a>
-        </div>
-      </div>
-      {% endif %}
       {% if data.contacts.peoples|length == 0 and data.contacts.phone|length > 0 %}
       <div class="contact-item phone">
         <div class="contact-icon">
@@ -270,7 +274,7 @@
         </div>
         <div class="contact-content">
           {% for line in data.contacts.address %}
-            <span>{{ line }}</span><br>
+            <div>{{ line }}</div>
           {% endfor %}
         </div>
       </div>