update

static/assets/home.css

@@ -181,6 +181,8 @@
   margin-bottom: 1em;
   box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
   transition: all 0.2s;
+  height: 12em;
+  overflow: hidden;
 }
 
 .card:hover {
@@ -202,7 +204,7 @@
 }
 
 .card-content {
-  /* width: 100%; */
+  width: 100%;
   padding: 1.5em;
   display: flex;
   flex-direction: column;
@@ -238,12 +240,14 @@
   color: #34495E;
   margin: 0;
   line-height: 1.6em;
+  position: relative;
 }
 
 .card-link {
-  color: #0029FF;
-  opacity: 0.75;
-  text-align: right;
+  position: absolute;
+  right: .5em;
+  bottom: 0;
+  margin-bottom: -.5em;
 }
 
 @media (max-width: 1350px) {

static/assets/js/home.js

@@ -10,11 +10,6 @@ let navContent = document.getElementById('nav-content')
 let mosaic = document.getElementById('mosaic')
 let mosaicHeader = document.getElementById('mosaic-header')
 
-organizations = organizations.map(org => {
-  org.tag = tags.filter(t => t._id === org.tag)[0]
-  return org
-})
-
 navEnabler.onclick = async () => {
   if (!navOpened) {
     // open the menu
@@ -105,28 +100,36 @@ function renderCard(organization) {
   titleContainer.appendChild(title)
 
   let icon = createEl('card-icon')
-  icon.innerHTML = `<svg
-    aria-hidden="true"
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 ${organization.tag.icon.width} ${organization.tag.icon.height}">
-    <path fill="currentColor" d="${organization.tag.icon.path}"></path>
-  </svg>`
+  if (Array.isArray(organization.tags) && organization.tags.length > 0) {
+    let tag = tags.filter(tag => organization.tags[0] === tag._id)[0]
+    icon.innerHTML = `<svg
+      aria-hidden="true"
+      focusable="false"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 ${tag.icon.width} ${tag.icon.height}">
+      <path fill="currentColor" d="${tag.icon.path}"></path>
+    </svg>`
+  }
   titleContainer.appendChild(icon)
   upperContent.appendChild(titleContainer)
 
   let description = createEl('card-description')
   description.textContent = organization.description
-  upperContent.appendChild(description)
 
-  let link = createEl('card-link')
-  let aTag = createEl(0, 'a')
-  aTag.href = "/association/" + organization.slug
+  //let link = createEl('card-link')
+  let aTag = createEl('card-link', 'a')
+  aTag.href = "/association/" + organization.slugs[organization.slugs.length - 1]
+  if (organization.isProposed) {
+    aTag.href += "?version=proposed"
+  }
   aTag.textContent = "En savoir plus"
-  link.appendChild(aTag)
+  description.appendChild(aTag)
+
+  upperContent.appendChild(description)
+  //link.appendChild(aTag)
   content.appendChild(upperContent)
-  content.appendChild(link)
+  //content.appendChild(link)
   card.appendChild(content)
 
   card.onclick = () => {
@@ -152,7 +155,7 @@ function enableTag(node) {
   if (!all) {
     tagId = node.attributes['data-tag-id'].value
   }
-  let data = organizations.filter(orga => orga.tag._id === tagId || all)
+  let data = organizations.filter(orga => orga.tags.filter(id => id === tagId).length > 0 || all)
   let cards = renderMosaic(data)
   if (currentCardContainer !== null) {
     mosaic.removeChild(currentCardContainer)

static/assets/main.css

@@ -23,6 +23,35 @@ a:hover {
   color: #2980b9;
 }
 
+/* sticky footer */
+html, body {
+  height: 100%;
+}
+body {
+  display: flex;
+  flex-direction: column;
+}
+.up-footer {
+  flex: 1 0 auto;
+}
+.sticky-footer {
+  flex-shrink: 0;
+}
+
+/* Porposed alert */
+.proposed-alert {
+  position: fixed;
+  z-index: 9999999;
+  left: 1em;
+  bottom: 2em;
+  padding: 1em;
+  font-weight: bold;
+  border-radius: 3px;
+  text-transform: uppercase;
+  border: 1px solid #c0392b;
+  background-color: #e74c3c;
+  color: white;
+}
 
 @media (max-width: 1600px) {
   .container {

static/assets/organization.css

@@ -538,13 +538,26 @@ section {
 
 ********************************************************************************/
 
+.mentions {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  flex-direction: column;
+  text-align: center;
+  color: #d35400;
+  margin-top: 2em;
+  margin-bottom: .5em;
+}
+.mentions div {
+  margin-bottom: .5em;
+}
+
 .footer {
   width: 100%;
   display: grid;
   grid-template-columns: 50% 25% 25%;
   grid-template-rows: 1fr;
   height: 1em;
-  margin-top: 2em;
 }
 
 .footer div:nth-child(1) {
@@ -559,6 +572,9 @@ section {
   background-color: rgb(253, 110, 11, .83);
 }
 
+/**
+RESPONSIVE
+**/
 
 @media (max-width: 1200px) {
   .schedule-category-days-container {