feat: add organization schedule widget

static/assets/js/organization.js

@@ -0,0 +1,19 @@
+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(180deg)"
+      content.style.maxHeight = content.scrollHeight + "px"
+    } else {
+      // close the table
+      icon.style.transform = "rotate(0deg)"
+      content.style.maxHeight = null
+    }
+    opened = !opened
+  }
+})
+

static/assets/organization.css

@@ -1,3 +1,9 @@
+/* *****************************************************************************
+
+*                              ORGANIZATION HEADER                              
+
+********************************************************************************/
+
 .header-container {
   display: flex;
   justify-content: space-between;
@@ -25,6 +31,12 @@
   text-decoration: underline;
 }
 
+/* *****************************************************************************
+
+*                                     COVER                                     
+
+********************************************************************************/
+
 .cover-background {
   background-position: center;
   background-size: cover;
@@ -74,6 +86,12 @@
   margin: 0;
 }
 
+/* *****************************************************************************
+
+*                                    MOSAIC                                     
+
+********************************************************************************/
+
 .media-mosaic {
   margin-top: .75em;
   width: 100%;
@@ -85,6 +103,9 @@
 
   grid-column-gap: .75em;
   grid-row-gap: .75em;
+
+  /* Negative to cancel the grid gap */
+  /* margin-bottom: -.75em; */
 }
 
 .media-overlay {
@@ -126,8 +147,14 @@
   background-position: center;
 }
 
+/* *****************************************************************************
+
+*                                    SECTION                                    
+
+********************************************************************************/
+
 section {
-  margin-top: .5em;
+  margin-top: 1.2em;
   margin-bottom: 0;
 }
 
@@ -150,6 +177,12 @@ section {
   border-radius: 1px;
 }
 
+/* *****************************************************************************
+
+*                                  DESCRIPTION                                  
+
+********************************************************************************/
+
 .description {
   line-height: 1.5em;
   text-align: justify;
@@ -159,9 +192,76 @@ section {
   margin-bottom: .5em;
 }
 
-/***********
+.description p:last-child {
- * PRICING *
+  margin-bottom: 0;
- ***********/
+}
+
+/* *****************************************************************************
+
+*                                   SCHEDULE                                    
+
+********************************************************************************/
+
+.schedule {
+
+}
+
+.schedule-category {
+  margin-bottom: 1em;
+}
+
+.schedule-category-header {
+  background-color: rgba(189,195,199,.97);
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1em 2em 1em 2em;
+}
+
+.schedule-category-collapse-icon {
+  color: #B12008;
+  font-size: 1.5em;
+  transition: all 0.1s ease-out;
+}
+
+.schedule-category-table {
+  
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.1s ease-out;
+}
+
+.schedule-category-days-container {
+  border-radius: 4px;
+  background-color: #ECF0F1;
+  width: 40;
+  margin-left: 2em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-right: 40em;
+  padding: 1em 2em 1em 2em;
+}
+
+.schedule-category-day-container {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1em;
+}
+
+.schedule-category-day-container .separator {
+  opacity: 0.5;
+}
+
+.schedule-category-table div:last-child {
+  margin-bottom: 0;
+}
+
+/* *****************************************************************************
+
+*                                    PRICING                                    
+
+********************************************************************************/
 
 .pricing {
   display: flex;
@@ -206,13 +306,11 @@ section {
   font-size: 1.8em;
 }
 
-.princing-description {
+/* *****************************************************************************
 
-}
+*                                    CONTACT                                    
 
-/***********
+********************************************************************************/
- * CONTACT *
- ***********/
 
 .contact {
   margin: 0 auto;
@@ -268,9 +366,11 @@ section {
   color: white;
 }
 
-/**********
+/* *****************************************************************************
- * FOOTER *
+
- **********/
+*                                    FOOTER                                     
+
+********************************************************************************/
 
 .footer {
   width: 100%;

static/organization.html

@@ -73,19 +73,79 @@
           <h2>Crénaux</h2>
           <div class="section-divider"></div>
         </div>
-        <div class="description">
+        <div class="schedule">
-          <p>
+          <div class="schedule-category">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia minima aliquam corporis fugit repellat obcaecati consequatur cumque, dolore omnis et porro, sit iusto similique blanditiis vel, alias quam ducimus voluptates.
+            <div class="schedule-category-header">
-          </p>
+              <div class="schedule-category-name">
-          <p>
+                Création de robots super cool
-            Unde neque adipisci et. Consequatur labore similique quia. Rerum nihil eius assumenda quae. Non vel sapiente omnis. Eum explicabo neque maxime sapiente et perspiciatis et.
+              </div>
-          </p>
+              <i class="schedule-category-collapse-icon fas fa-chevron-circle-up"></i>
-          <p>
+            </div>
-            Delectus unde inventore similique ut quo. Consequatur assumenda quaerat aliquid velit et corrupti. Laboriosam qui magnam culpa est amet nobis tenetur. Ducimus a sint ea. Expedita omnis libero ipsum dolor ipsam dolor beatae.
+            <div class="schedule-category-table">
-          </p>
+              <div class="schedule-category-days-container">
-          <p>
+                <div class="schedule-category-day-container">
-            Qui vel sit expedita eum recusandae nemo. Facere quas dolor eum ut. Aut omnis et qui repellat nihil accusantium. Et vitae beatae ratione. Tenetur sit omnis sa
+                  <div class="schedule-category-day">
-          </p>
+                    Lundi
+                  </div>
+                  <div class="schedule-category-hours">
+                    17:00 <span class="separator">-</span> 18:00
+                  </div>
+                </div>
+                <div class="schedule-category-day-container">
+                  <div class="schedule-category-day">
+                    Mardi
+                  </div>
+                  <div class="schedule-category-hours">
+                    14:00 <span class="separator">-</span> 15:00
+                  </div>
+                </div>
+                <div class="schedule-category-day-container">
+                  <div class="schedule-category-day">
+                    Samedi
+                  </div>
+                  <div class="schedule-category-hours">
+                    16:00 <span class="separator">-</span> 17:00
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="schedule-category">
+            <div class="schedule-category-header">
+              <div class="schedule-category-name">
+                Cours de programmation de gros expert
+              </div>
+              <i class="schedule-category-collapse-icon fas fa-chevron-circle-up"></i>
+            </div>
+            <div class="schedule-category-table">
+              <div class="schedule-category-days-container">
+                <div class="schedule-category-day-container">
+                  <div class="schedule-category-day">
+                    Lundi
+                  </div>
+                  <div class="schedule-category-hours">
+                    17:00 <span class="separator">-</span> 18:00
+                  </div>
+                </div>
+                <div class="schedule-category-day-container">
+                  <div class="schedule-category-day">
+                    Mardi
+                  </div>
+                  <div class="schedule-category-hours">
+                    14:00 <span class="separator">-</span> 15:00
+                  </div>
+                </div>
+                <div class="schedule-category-day-container">
+                  <div class="schedule-category-day">
+                    Samedi
+                  </div>
+                  <div class="schedule-category-hours">
+                    16:00 <span class="separator">-</span> 17:00
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </section>
       <section>