feat: add organization schedule widget
This commit is contained in:
parent
d8d53d184d
commit
cdb197803c
3 changed files with 204 additions and 25 deletions
19
static/assets/js/organization.js
Normal file
19
static/assets/js/organization.js
Normal file
|
|
@ -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
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/***********
|
||||
* PRICING *
|
||||
***********/
|
||||
.description p:last-child {
|
||||
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%;
|
||||
|
|
|
|||
|
|
@ -73,19 +73,79 @@
|
|||
<h2>Crénaux</h2>
|
||||
<div class="section-divider"></div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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
|
||||
</p>
|
||||
<div class="schedule">
|
||||
<div class="schedule-category">
|
||||
<div class="schedule-category-header">
|
||||
<div class="schedule-category-name">
|
||||
Création de robots super cool
|
||||
</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 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue