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

feat(PublicPage): add schedule parts system for page with a lot of schedule (dense schedule)

Browse source
This commit is contained in:
Matthieu Bessat 2020-08-29 21:27:38 +02:00
parent 61a9a703e9
commit ebd725b0d3
3 changed files with 77 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/development/styles/organization.css
View file

@ -478,6 +478,17 @@ section {
********************************************************************************/ ********************************************************************************/
.schedule.dense {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 100%;
column-gap: 1em;
}
.schedule.dense .schedule-category-days-container {
margin-right: 7em;
}
.schedule-category { .schedule-category {
margin-bottom: 1em; margin-bottom: 1em;
} }
@ -952,6 +963,13 @@ RESPONSIVE
width: 80%; width: 80%;
} }
/**
Schedule
**/
.schedule.dense {
grid-template-columns: 1fr;
}
.schedule-category-header { .schedule-category-header {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;

11
src/controllers/PublicController.ts
View file

@ -237,6 +237,17 @@ export default class PublicController {
}) })
} }
if (version.schedule.length > 8) {
let isFirst = true;
version.scheduleParts = [[], []]
version.schedule.forEach((schedule: any) => {
version.scheduleParts[isFirst ? 0 : 1].push(schedule)
isFirst = !isFirst
})
} else {
version.scheduleParts = [version.schedule]
}
version.cutDescription = Utils.isStrUsable(version, 'descriptionLong') && version.descriptionLong.length > 800 version.cutDescription = Utils.isStrUsable(version, 'descriptionLong') && version.descriptionLong.length > 800
// if (version.cutDescription) { // if (version.cutDescription) {

92
views/organization.twig
View file

@ -149,54 +149,58 @@
<h2>Crénaux</h2> <h2>Crénaux</h2>
<div class="section-divider"></div> <div class="section-divider"></div>
</div> </div>
<div class="schedule org-container"> <div class="schedule org-container {% if data.scheduleParts|length > 1 %}dense{% endif %}">
{% for item in data.schedule %} {% for schedules in data.scheduleParts %}
{% if item.when|length > 0 %} <div class="schedule-part">
<div class="schedule-category"> {% for item in schedules %}
<div class="schedule-category-header" title="Déroulez"> {% if item.when|length > 0 %}
<div class="schedule-category-name"> <div class="schedule-category">
{{ item.name|e }} <div class="schedule-category-header" title="Déroulez">
{% if item.description is not empty %} <div class="schedule-category-name">
<span class="separator">-</span><span class="subtitle"> {{ item.description|e }}</span> {{ item.name|e }}
{% endif %} {% if item.description is not empty %}
<span class="separator">-</span><span class="subtitle"> {{ item.description|e }}</span>
{% endif %}
</div>
<div class="schedule-category-collapse-icon-container">
<svg class="schedule-category-collapse-icon"
aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm231-113.9L103.5 277.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L256 226.9l101.6 101.6c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L273 142.1c-9.4-9.4-24.6-9.4-34 0z"></path>
</svg>
</div>
</div> </div>
<div class="schedule-category-collapse-icon-container"> <div class="schedule-category-table">
<svg class="schedule-category-collapse-icon" <div class="schedule-category-days-container">
aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> {# {% for when in item.when %}
<path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm231-113.9L103.5 277.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L256 226.9l101.6 101.6c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L273 142.1c-9.4-9.4-24.6-9.4-34 0z"></path> <div class="schedule-category-day-container">
</svg> <div class="schedule-category-day">
</div> {{ when.day }}
</div> </div>
<div class="schedule-category-table"> <div class="schedule-category-hours">
<div class="schedule-category-days-container"> {{ when.from }} <span class="separator">-</span> {{ when.to }}
{# {% for when in item.when %} </div>
<div class="schedule-category-day-container"> </div>
<div class="schedule-category-day"> {% endfor %} #}
{{ when.day }} {% for when in item.when %}
</div> <div class="schedule-category-day-container">
<div class="schedule-category-hours"> <div class="schedule-category-day">
{{ when.from }} <span class="separator">-</span> {{ when.to }} {{ when.day|e }}
</div> </div>
</div> <div class="schedule-category-hours">
{% endfor %} #} {% for i in when.hours %}
{% for when in item.when %} <span>
<div class="schedule-category-day-container"> {{ i.from|e }} <span class="separator">-</span> {{ i.to|e }}{% if not loop.last %},{% endif %}
<div class="schedule-category-day"> </span>
{{ when.day|e }} {% endfor %}
</div> </div>
<div class="schedule-category-hours"> </div>
{% for i in when.hours %} {% endfor %}
<span> </div>
{{ i.from|e }} <span class="separator">-</span> {{ i.to|e }}{% if not loop.last %},{% endif %}
</span>
{% endfor %}
</div>
</div>
{% endfor %}
</div> </div>
</div> </div>
{% endif %}
{% endfor %}
</div> </div>
{% endif %}
{% endfor %} {% endfor %}
</div> </div>
</section> </section>