add JS masonry placement on resume page

src/Bundle/ChillPersonBundle/Resources/public/page/accompanying_course_index/masonry.js

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

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig

@@ -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 id="dashboards" class="row" data-masonry='{"percentPosition": true }'>
-        <div class="warnings mb-5">
+        {% if 'DRAFT' == accompanyingCourse.step %}
-            {% include '@ChillPerson/AccompanyingCourse/_still_draft.html.twig' %}
+            <div class="col-4 warnings mb-4">
-        </div>
+                {% include '@ChillPerson/AccompanyingCourse/_still_draft.html.twig' %}
-    {% endif %}
-
-    {% if 'DRAFT' != accompanyingCourse.step %}
-        {% if withoutHousehold|length > 0 %}
-            <div class="warnings mb-5">
-                {% include '@ChillPerson/AccompanyingCourse/_join_household.html.twig' %}
             </div>
         {% endif %}
-    {% endif %}
 
-    {% if accompanyingCourse.locationStatus == 'address'
+        {% if 'DRAFT' != accompanyingCourse.step %}
-       or accompanyingCourse.locationStatus == 'none' %}
+            {% if withoutHousehold|length > 0 %}
-        <div class="warnings mb-5">
+                <div class="col-4 warnings mb-4">
-            {% include '@ChillPerson/AccompanyingCourse/_warning_address.html.twig' %}
+                    {% include '@ChillPerson/AccompanyingCourse/_join_household.html.twig' %}
-        </div>
+                </div>
-    {% endif %}
+            {% endif %}
+        {% endif %}
 
-    <div class="col-md-5 mb-5">
+        {% if accompanyingCourse.locationStatus == 'address'
-        <div class="location mb-3">
+            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
+        <div class="col col-sm-6 col-lg-4 scopes mb-4">
-        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">
             {% 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 %}

src/Bundle/ChillPersonBundle/chill.webpack.config.js

@@ -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');
 };