add JS masonry placement on resume page

This commit is contained in:
Mathieu Jaumotte 2021-11-27 16:28:14 +01:00
parent aeb165d6cc
commit 406ec14c3d
3 changed files with 39 additions and 37 deletions

View File

@ -0,0 +1,6 @@
import Masonry from 'masonry-layout/masonry';
let elem = document.querySelector('#dashboards');
let msnry = new Masonry( elem, {
// options
});

View File

@ -15,34 +15,35 @@
{% block js %}
{{ parent() }}
{{ encore_entry_script_tags('page_accompanying_course_index_person_locate') }}
{{ encore_entry_script_tags('page_accompanying_course_index_masonry') }}
{% endblock %}
{% block content %}
<div class="accompanyingcourse-resume row">
<div class="accompanyingcourse-resume">
{% if 'DRAFT' == accompanyingCourse.step %}
<div class="warnings mb-5">
{% include '@ChillPerson/AccompanyingCourse/_still_draft.html.twig' %}
</div>
{% endif %}
{% if 'DRAFT' != accompanyingCourse.step %}
{% if withoutHousehold|length > 0 %}
<div class="warnings mb-5">
{% include '@ChillPerson/AccompanyingCourse/_join_household.html.twig' %}
<div id="dashboards" class="row" data-masonry='{"percentPosition": true }'>
{% if 'DRAFT' == accompanyingCourse.step %}
<div class="col-4 warnings mb-4">
{% include '@ChillPerson/AccompanyingCourse/_still_draft.html.twig' %}
</div>
{% endif %}
{% endif %}
{% if accompanyingCourse.locationStatus == 'address'
or accompanyingCourse.locationStatus == 'none' %}
<div class="warnings mb-5">
{% include '@ChillPerson/AccompanyingCourse/_warning_address.html.twig' %}
</div>
{% endif %}
{% if 'DRAFT' != accompanyingCourse.step %}
{% if withoutHousehold|length > 0 %}
<div class="col-4 warnings mb-4">
{% include '@ChillPerson/AccompanyingCourse/_join_household.html.twig' %}
</div>
{% endif %}
{% endif %}
<div class="col-md-5 mb-5">
<div class="location mb-3">
{% if accompanyingCourse.locationStatus == 'address'
or accompanyingCourse.locationStatus == 'none' %}
<div class="col-4 warnings mb-4">
{% include '@ChillPerson/AccompanyingCourse/_warning_address.html.twig' %}
</div>
{% endif %}
<div class="col col-sm-6 col-lg-4 location mb-4">
{% if accompanyingCourse.locationStatus == 'person' %}
<h2>{{ 'This course is located by'|trans }}</h2>
<h4>{{ accompanyingCourse.personLocation|chill_entity_render_string }}</h4>
@ -54,28 +55,21 @@
{{ accompanyingCourse.location|chill_entity_render_box }}
{% endif %}
</div>
</div>
{% if accompanyingCourse.scopes is not empty
or (accompanyingCourse.requestorThirdParty is not null
or accompanyingCourse.requestorPerson is not null)
or accompanyingCourse.participations is not empty
or accompanyingCourse.resources is not empty
%}
<div class="col-md-7 mb-5">
<div class="scopes mb-3">
<div class="col col-sm-6 col-lg-4 scopes mb-4">
{% if accompanyingCourse.scopes is not empty %}
<h4 class="item-key">{{ 'Scopes'|trans }}</h4>
<p>
<div>
{% for s in accompanyingCourse.scopes %}
<span>{{ s.name|localize_translatable_string|capitalize }}</span>{% if not loop.last %}, {% endif %}
{% endfor %}
</p>
</div>
{% else %}
<span class="chill-no-data-statement visually-hidden">{{ 'No scopes'|trans }}</span>
{% endif %}
</div>
<div class="requestor mb-3">
<div class="col col-sm-6 col-lg-4 requestor mb-4">
{% if accompanyingCourse.requestorPerson is not null %}
<h4 class="item-key">{{ 'Requestor'|trans }}</h4>
{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}
@ -86,7 +80,8 @@
<span class="chill-no-data-statement visually-hidden">{{ 'No requestor'|trans }}</span>
{% endif %}
</div>
<div class="persons mb-3">
<div class="col col-sm-6 col-lg-4 persons mb-4">
{% if accompanyingCourse.participations is not empty %}
<h4 class="item-key">{{ 'Persons associated'|trans }}</h4>
{% for r in accompanyingCourse.participations %}
@ -100,7 +95,8 @@
<span class="chill-no-data-statement visually-hidden">{{ 'No participations'|trans }}</span>
{% endif %}
</div>
<div class="resources mb-3">
<div class="col col-sm-6 col-lg-4 resources mb-4">
{% if accompanyingCourse.resources is not empty %}
<h4 class="item-key">{{ 'Resources'|trans }}</h4>
{% for r in accompanyingCourse.resources %}
@ -115,15 +111,14 @@
{% endif %}
</div>
</div>
{% endif %}
<div class="social-actions mb-5">
<div class="social-actions my-4">
<h2 class="mb-3 d-none">{{ 'Last social actions'|trans }}</h2>
{% include 'ChillPersonBundle:AccompanyingCourseWork:list_recent_by_accompanying_period.html.twig' with {'buttonText': false } %}
</div>
{% block contentActivity %}
<div class="activities mb-5">
<div class="activities my-4">
{% set person = null %}
{% set person_id = null %}

View File

@ -17,4 +17,5 @@ module.exports = function(encore, entries)
encore.addEntry('page_household_edit_metadata', __dirname + '/Resources/public/page/household_edit_metadata/index.js');
encore.addEntry('page_person', __dirname + '/Resources/public/page/person/index.js');
encore.addEntry('page_accompanying_course_index_person_locate', __dirname + '/Resources/public/page/accompanying_course_index/person_locate.js');
encore.addEntry('page_accompanying_course_index_masonry', __dirname + '/Resources/public/page/accompanying_course_index/masonry.js');
};