feat: home and organization page css integration

static/assets/home.css

@@ -0,0 +1,283 @@
+.header {
+  border-bottom: 2px solid #C28100;
+  padding-bottom: 1.5em;
+  padding-top: 1.5em;
+}
+
+.header-container {
+  display: flex;
+}
+
+.header-image {
+  margin-right: 3em;
+}
+
+.header-image img {
+  width: 7em;
+}
+
+.header-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+.header-title {
+  font-family: 'Roboto Slab', serif;
+  margin: 0;
+  font-weight: 500;
+  font-size: 2.5em;
+}
+
+.header-sub-title {
+  margin: 0;
+  text-decoration: underline;
+  font-weight: 100;
+  color: #34495e;
+  transition: 0.2s;
+}
+
+.header-sub-title:hover {
+  color: #0029FF;
+}
+
+.header-description {
+  color: #34495e;
+}
+
+.content {
+  margin-top: 1.5em;
+  display: flex;
+}
+
+
+
+
+.nav {
+  margin-right: 2em;
+}
+
+.nav-item {
+  width: 15em;
+  padding: 1em;
+  border-radius: 4px;
+  margin-bottom: 0.7em;
+  border: 3px solid rgba(255, 111, 10, 0.7);
+  display: flex;
+  cursor: pointer;
+  transition: ease-in-out 0.1s;
+  height: 1.2em;
+}
+
+.nav-icon {
+  width: 3em;
+  padding-left: .5em;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #C28200;
+  font-size: 1.5em;
+  opacity: 0.7;
+}
+
+.nav-item-content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.nav-title {
+  display: flex;
+  align-items: center;
+  opacity: 0.85;
+}
+
+.nav-access {
+  display: flex;
+  align-items: center;
+  color: #FF6F0A;
+  opacity: 0.7;
+}
+
+.nav-item.enabled {
+  border-color: rgba(255, 111, 10, 1);
+}
+
+.nav-item.enabled .nav-access {
+  opacity: 1;
+}
+
+.nav-item.enabled .nav-icon {
+  opacity: 1;
+}
+
+.nav-item.enabled .nav-title {
+  opacity: 1;
+}
+
+.nav-item:hover {
+  transform: scale(1.05); 
+}
+
+#nav-enabler {
+  display: none;
+}
+
+.mosaic {
+  background: white;
+  width: 100%;
+}
+
+.mosaic-header {
+  width: 100%;
+  opacity: 0.8;
+  text-align: right;
+  margin-bottom: 1.5em;
+}
+
+.card-container {
+  margin: 0 auto;
+  width: 85%;
+}
+
+.card {
+  display: flex;
+  border: 1px solid #bdc3c7;
+  border-radius: 4px;
+  margin-bottom: 1em;
+  box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
+}
+
+.card-image {
+  border-right: 1px solid #C4C4C4;
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 1em;
+}
+
+.card-image img {
+  width: 12em;
+}
+
+.card-content {
+  padding: 1.5em;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.card-title-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.card-icon {
+  color: #C28200;
+  opacity: 0.85;
+  margin-top: -.5em;
+  margin-right: -.5em;
+  font-size: 1.4em;
+}
+
+.card-title {
+  font-size: 1.6em;
+  color: #B12008;
+  margin: 0;
+  margin-bottom: 0.5em;
+}
+
+.card-description {
+  color: #34495E;
+  margin: 0;
+  line-height: 1.6em;
+}
+
+.card-link {
+  color: #0029FF;
+  opacity: 0.75;
+  text-align: right;
+}
+
+@media (max-width: 1350px) {
+  .card-container {
+    width: 100%;
+  }
+}
+
+@media (max-width: 900px) {
+  .header {
+    padding-top: 1em;
+    padding-bottom: 1em;
+  }
+  .header-container {
+    display: block;
+  }
+  .header-content {
+    padding: 0;
+  }
+  .header-image {
+    margin: 0;
+    text-align: center;
+  }
+  .header-image img {
+    width: 6em;
+  }
+  .header-sub-title {
+    margin-top: 1em;
+    text-align: center;
+  }
+  .header-title {
+    text-align: center;
+    margin-bottom: .25em;
+  }
+  .header-description {
+    text-align: center;
+  }
+
+  .content {
+    display: block;
+  }
+  .nav {
+    margin-right: 0;
+    user-select: none;
+  }
+  #nav-enabler {
+    display: flex;
+  }
+  #nav-enabler-icon {
+    transform: rotate(-90deg)
+  }
+  #nav-content {
+    max-height: 0;
+    transition: max-height 0.1s ease-out;
+  }
+  .nav-item {
+    width: auto;
+  }
+  .nav-mobile-enabler #nav-enabler-icon {
+    transition: all 0.1s ease;
+  }
+
+  .mosaic {
+    position: relative;
+    border-top: 1px solid #C4C4C4;
+    padding-top: 1em;
+  }
+  .mosaic-header {
+    text-align: center;
+  }
+  .card {
+    display: block;
+  }
+  .card-image {
+    border-right: 0;
+    border-bottom: 1px solid #C4C4C4;
+    margin: 0;
+  }
+}
+

static/assets/js/home.js

@@ -0,0 +1,157 @@
+let navOpened = false
+let oldNavText = ""
+let oldNavIcon = ""
+
+let navEnabler = document.getElementById('nav-enabler')
+let navEnablerText = document.getElementById('nav-enabler-text')
+let navEnablerIcon = document.getElementById('nav-enabler-icon')
+let navContent = document.getElementById('nav-content')
+
+let mosaic = document.getElementById('mosaic')
+let mosaicHeader = document.getElementById('mosaic-header')
+
+navEnabler.onclick = async () => {
+  if (!navOpened) {
+    // open the menu
+    oldNavText = navEnablerText.textContent
+    navEnablerText.textContent = "Minimiser le menu"
+    navEnablerIcon.style.transform = "rotate(0deg)"
+    navContent.style.maxHeight = navContent.scrollHeight + "px"
+  } else {
+    // close the menu
+    navEnablerText.textContent = oldNavText
+    navEnablerIcon.style.transform = "rotate(-90deg)"
+    navContent.style.maxHeight = null
+  }
+  navOpened = !navOpened
+}
+
+function createEl(className = false, elName = "div") {
+  let el = document.createElement(elName)
+  if (className != false) {
+    el.className = className
+  }
+  return el
+}
+
+function renderNavItem(tag) {
+  /*
+  <div class="nav-item">
+    <div class="nav-icon">
+      <i class="fas fa-music"></i>
+    </div>
+    <div class="nav-item-content">
+      <div class="nav-title">
+        Danse et musique
+      </div>
+      <div class="nav-access">
+        <i class="fas fa-chevron-right"></i>
+      </div>
+    </div>
+  </div>
+  */
+
+  let navItem = createEl('nav-item')
+  let navIcon = createEl('nav-icon')
+  let icon = createEl(tag.icon, 'i')
+
+  navIcon.appendChild(icon)
+  navItem.appendChild(navIcon)
+
+  let navItemContent = createEl('nav-item-content')
+  let navTitle = createEl('nav-title')
+  navTitle.textContent = tag.name
+  navItemContent.appendChild(navTitle)
+  
+  let navAccess = createEl('nav-access')
+  let chevronIcon = createEl('fas fa-chevron-right', 'i')
+  navAccess.appendChild(chevronIcon)
+  navItemContent.appendChild(navTitle)
+  navItemContent.appendChild(navAccess)
+  navItem.appendChild(navItemContent)
+
+  return navItem
+}
+
+function renderCard(organization) {
+  let card = createEl('card')
+
+  // image
+  let image = createEl('card-image')
+  let imageTag = createEl(0, 'img')
+  imageTag.src = organization.thumbnail
+  image.appendChild(imageTag)
+  card.appendChild(image)
+  
+  let content = createEl('card-content')
+  let upperContent = createEl()
+  
+  let titleContainer = createEl('card-title-container')
+  let title = createEl('card-title', 'h2')
+  title.textContent = organization.name
+  titleContainer.appendChild(title)
+
+  let icon = createEl('card-icon')
+  let iconTag = createEl(organization.tag.icon, 'i')
+  icon.appendChild(iconTag)
+  titleContainer.appendChild(icon)
+  upperContent.appendChild(titleContainer)
+
+  let description = createEl('card-description')
+  description.textContent = organization.descriptionShort
+  upperContent.appendChild(description)
+
+  let link = createEl('card-link')
+  let aTag = createEl(0, 'a')
+  aTag.href = "/association/" + organization.slug
+  aTag.textContent = "En savoir plus"
+  link.appendChild(aTag)
+  content.appendChild(upperContent)
+  content.appendChild(link)
+  card.appendChild(content)
+  return card
+}
+
+function renderMosaic(data) {
+  let cardContainer = createEl('card-container')
+  data.forEach(orga => {
+    cardContainer.appendChild(renderCard(orga))
+  })
+  return cardContainer
+}
+
+let currentTag = null
+let currentCardContainer = null
+
+function enableTag(node) {
+  let all = node.id === 'nav-all'
+  let tagId = ""
+  if (!all) {
+    tagId = node.attributes['data-tag-id'].value
+  }
+  let data = organizations.filter(orga => orga.tag.id === tagId || all)
+  let cards = renderMosaic(data)
+  if (currentCardContainer !== null) {
+    mosaic.removeChild(currentCardContainer)
+  }
+  currentCardContainer = cards
+  mosaic.appendChild(cards)
+  node.className += ' enabled'
+  if (currentTag !== null) {
+    currentTag.className = currentTag.className.replace('enabled', '')
+  }
+  currentTag = node
+  if (data === undefined || data === null || data.length <= 0) {
+    mosaicHeader.textContent = "Aucune associations listées"
+  } else if (data.length === 1) {
+    mosaicHeader.textContent = "Une association listée"
+  } else {
+    mosaicHeader.textContent = data.length + " associations listées"
+  }
+} 
+
+navContent.childNodes.forEach(node => {
+  node.onclick = () => enableTag(node)
+})
+
+enableTag(document.getElementById('nav-all'))

static/assets/main.css

@@ -0,0 +1,30 @@
+html {
+  overflow-y: scroll;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+}
+
+.container {
+  width: 80%;
+  margin: 0 auto;
+}
+
+a {
+  color: #3498db;
+}
+
+a:hover {
+  text-decoration: underline;
+  /*opacity: 0.8;*/
+  transition: color 0.2s;
+  color: #2980b9;
+}
+
+@media (max-width: 900px) {
+  .container {
+    width: 92%; 
+  }
+}

static/assets/organization.css

@@ -0,0 +1,294 @@
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  font-size: 1.2em;
+}
+
+.return {
+  display: flex;
+  align-items: center;
+  color: #34495e;
+  cursor: pointer;
+  transition: all .2s;
+}
+
+.return-icon {
+  font-size: 1.5em;
+  margin-right: .5em;
+}
+
+.return:hover {
+  opacity: 0.88;
+  text-decoration: underline;
+}
+
+.cover-background {
+  background-position: center;
+  background-size: cover;
+  height: 13em;
+  width: 100%;
+}
+
+.cover {
+  height: 13em;
+  margin-top: -13em;
+  background-color: rgba(230, 126, 34, 0.78);
+  background-size: cover;
+}
+
+.cover-content {
+  color: white;
+  display: flex;
+  align-items: center;
+  height: 13em;
+}
+
+.cover-image {
+  background: white;
+  border-radius: 50%;
+  border: 3px solid #FD6E0B;
+  background-size: cover;
+  background-position: center;
+  width: 10em;
+  height: 10em;
+  margin-right: 3em;
+}
+
+.cover-title-container {
+
+}
+
+.cover-title {
+  font-family: 'Roboto Slab', serif;
+  font-size: 3.5em;
+  font-weight: normal;
+  margin: 0;
+}
+
+.cover-sub-title {
+  font-size: 1.5em;
+  font-weight: normal;
+  margin: 0;
+}
+
+.media-mosaic {
+  margin-top: .75em;
+  width: 100%;
+  height: 25em;
+
+  display: grid;
+  grid-template-columns: 1fr .5fr .5fr;
+  grid-template-rows: 1fr 1fr;
+
+  grid-column-gap: .75em;
+  grid-row-gap: .75em;
+}
+
+.media-overlay {
+  background-color: rgba(196, 196, 196, 0.7);
+  color: #B12008;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 3.5em;
+}
+
+.media-overlay i {
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.media-overlay i:hover {
+  transform: scale(1.2);
+}
+
+.media-main {
+  grid-row: 1 / span 2;
+}
+
+/* .media-sec {
+  display: grid;
+  grid-template-rows: 50% 50%;
+}
+
+.media-sec-row {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: 100%;
+} */
+
+.media {
+  border-radius: 4px;
+  background-size: cover;
+  background-position: center;
+}
+
+section {
+  margin-top: .5em;
+  margin-bottom: 0;
+}
+
+.section-title {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.section-title h1, .section-title h2, .section-title h3 {
+  margin: 0;
+  font-weight: normal;
+  font-family: 'Roboto Slab', serif; 
+  font-size: 1.8em;
+}
+
+.section-divider {
+  background-color: rgba(194, 129, 0, 0.5);
+  width: 100%;
+  height: 3px;
+  border-radius: 1px;
+}
+
+.description {
+  line-height: 1.5em;
+  text-align: justify;
+  margin: 0 auto;
+  width: 80%;
+  margin-top: 1.5em;
+  margin-bottom: .5em;
+}
+
+/***********
+ * PRICING *
+ ***********/
+
+.pricing {
+  display: flex;
+  justify-content: space-between;
+}
+
+.pricing-card {
+  height: 10em;
+  width: 100%;
+  padding-top: 1.5em;
+  padding-bottom: 1.5em;
+  text-align: center;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-right: 1.5em;
+  color: white;
+}
+
+.pricing .pricing-card:nth-child(1) {
+  background-color: rgba(177, 88, 8, .80);
+}
+
+.pricing .pricing-card:nth-child(2) {
+  background-color: rgba(253, 110, 11, .780);
+}
+
+.pricing .pricing-card:nth-child(3) {
+  background-color: rgba(177, 32, 8, .80);
+}
+
+.pricing .pricing-card:last-child {
+  margin-right: 0;
+}
+
+.pricing-label {
+  font-size: 1.5em;
+}
+
+.pricing-name {
+  font-size: 1.8em;
+}
+
+.princing-description {
+
+}
+
+/***********
+ * CONTACT *
+ ***********/
+
+.contact {
+  margin: 0 auto;
+  width: 70%;
+}
+
+.contact-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: .75em;
+  padding-bottom: .75em;
+  padding-left: 2em;
+  padding-right: 2em;
+  background-color: #ECF0F1;
+  border-radius: 4px;
+  margin-bottom: 1em;
+}
+
+.contact-icon {
+  color: #B15808;
+  background-color: #C4C4C4;
+  border-radius: 50%;
+  width: 2em;
+  height: 2em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5em;
+}
+
+.contact-content {
+  text-align: right;
+}
+
+.external-link {
+  margin-left: .25em;
+  font-weight: bold;
+}
+
+.facebook .contact-icon {
+  background-color: #3B5999;
+  color: white;
+}
+
+.instagram .contact-icon {
+  background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
+  color: white;
+}
+
+.twitter .contact-icon {
+  background-color: #1DA1F2;
+  color: white;
+}
+
+/**********
+ * FOOTER *
+ **********/
+
+.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) {
+  background-color: rgb(177, 32, 8, .83);
+}
+
+.footer div:nth-child(2) {
+  background-color: rgb(177, 88, 8, .83);
+}
+
+.footer div:nth-child(3) {
+  background-color: rgb(253, 110, 11, .83);
+}