pagesassos/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

feat: add organization schedule widget

Browse source
This commit is contained in:
Matthieu Bessat 2020-07-05 14:36:10 +02:00
parent d8d53d184d
commit cdb197803c
3 changed files with 204 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

19
static/assets/js/organization.js Normal file
View 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
}
})

124
static/assets/organization.css
View file

@ -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%;