From 5089bba4d7cb6c820f50a933b1776d1458889000 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Wed, 29 Dec 2021 12:11:20 +0100
Subject: [PATCH] improve masonry bloc style

---
 .../Resources/public/chill/chillperson.scss   |  16 ++
 .../views/AccompanyingCourse/index.html.twig  | 167 ++++++++++--------
 2 files changed, 109 insertions(+), 74 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
index f39f64eb2..9680f116a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
@@ -254,3 +254,19 @@ abbr.referrer {   // still used ?
     border: 1px solid black;
     padding: 10px;
 }
+
+/// Masonry blocs on AccompanyingCourse resume page
+div#dashboards {
+    div.mbloc {
+        & > div:not(.warnings) {
+            border: 1px solid $chill-light-gray;
+            padding: 1rem;
+        }
+        & > div.warnings .alert {
+            margin-bottom: 0;
+        }
+        blockquote.chill-user-quote {
+            margin: -1.2em;
+        }
+    }
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
index 39e924d18..cf05ccdf9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
@@ -19,104 +19,123 @@
 {% endblock %}
 
 {% block content %}
-<div class="accompanyingcourse-resume">
+<div class="accompanyingcourse-resume overflow-hidden">
 
-    <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 id="dashboards" class="row g-3" data-masonry='{"percentPosition": true }'>
+
+            <div class="mbloc col col-sm-6 col-lg-4">
+                <div class="warnings">
+                    {% include '@ChillPerson/AccompanyingCourse/_still_draft.html.twig' %}
+                </div>
             </div>
+        {% if 'DRAFT' == accompanyingCourse.step %}
         {% endif %}
 
+                <div class="mbloc col col-sm-6 col-lg-4">
+                    <div class="warnings">
+                        {% include '@ChillPerson/AccompanyingCourse/_join_household.html.twig' %}
+                    </div>
+                </div>
         {% 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="mbloc col col-sm-6 col-lg-4">
+                <div class="warnings">
+                    {% include '@ChillPerson/AccompanyingCourse/_warning_address.html.twig' %}
+                </div>
+            </div>
         {% 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>
-            {%  elseif accompanyingCourse.locationStatus == 'address' %}
-                <h4>{{ 'This course has a temporarily location'|trans }}</h4>
-            {% endif %}
+        <div class="mbloc col col-sm-6 col-lg-4">
+            <div class="location">
+                {% if accompanyingCourse.locationStatus == 'person' %}
+                    <h2>{{ 'This course is located by'|trans }}</h2>
+                    <h4>{{ accompanyingCourse.personLocation|chill_entity_render_string }}</h4>
+                {%  elseif accompanyingCourse.locationStatus == 'address' %}
+                    <h4>{{ 'This course has a temporarily location'|trans }}</h4>
+                {% endif %}
 
-            {% if accompanyingCourse.locationStatus != 'none' %}
-                {{ accompanyingCourse.location|chill_entity_render_box }}
-            {% endif %}
+                {% if accompanyingCourse.locationStatus != 'none' %}
+                    {{ accompanyingCourse.location|chill_entity_render_box }}
+                {% endif %}
+            </div>
         </div>
 
         {% if accompanyingCourse.participations is not empty %}
-            <div class="col col-sm-6 col-lg-4 persons mb-4">
-                <h4 class="item-key">{{ 'Persons associated'|trans }}</h4>
-                {% for r in accompanyingCourse.participations %}
-                    {{ _self.insert_onthefly('person', r.person) }}
-                {% endfor %}
-            </div>
-        {% endif %}
-
-        {% if accompanyingCourse.resources is not empty %}
-            <div class="col col-sm-6 col-lg-4 resources mb-4">
-                <h4 class="item-key">{{ 'Resources'|trans }}</h4>
-                {% for r in accompanyingCourse.resources %}
-                    {% if r.person is not null %}
+            <div class="mbloc col col-sm-6 col-lg-4">
+                <div class="persons">
+                    <h4 class="item-key">{{ 'Persons associated'|trans }}</h4>
+                    {% for r in accompanyingCourse.participations %}
                         {{ _self.insert_onthefly('person', r.person) }}
-                    {% elseif r.thirdParty is not null %}
-                        {{ _self.insert_onthefly('thirdparty', r.thirdParty) }}
-                    {% endif %}
-                {% endfor %}
-            </div>
-        {% endif %}
-
-        {% if accompanyingCourse.pinnedComment is not empty %}
-            <div class="col col-sm-6 col-lg-4 comment mb-4">
-                <h4 class="item-key">{{ 'Pinned comment'|trans }}</h4>
-                <blockquote class="chill-user-quote">
-                    {{ accompanyingCourse.pinnedComment.content }}
-                    <div class="metadata">
-                        {{ 'Last updated by'| trans }}
-                        <span class="user">
-                            {{ accompanyingCourse.pinnedComment.updatedBy|chill_entity_render_box }}
-                        </span>
-                        {{ 'on'|trans ~ ' ' }}
-                        <span class="date">
-                            {{ accompanyingCourse.pinnedComment.updatedAt|format_datetime("medium", "short") }}
-                        </span>
-                    </div>
-                </blockquote>
-            </div>
-        {% endif %}
-
-        {% if accompanyingCourse.scopes is not empty %}
-            <div class="col col-sm-6 col-lg-4 scopes mb-4">
-                <h4 class="item-key">{{ 'Scopes'|trans }}</h4>
-                <div>
-                    {% for s in accompanyingCourse.scopes  %}
-                        <span>{{ s.name|localize_translatable_string|capitalize }}</span>{% if not loop.last %}, {% endif %}
                     {% endfor %}
                 </div>
             </div>
         {% endif %}
 
+        {% if accompanyingCourse.resources is not empty %}
+            <div class="mbloc col col-sm-6 col-lg-4">
+                <div class="resources">
+                    <h4 class="item-key">{{ 'Resources'|trans }}</h4>
+                    {% for r in accompanyingCourse.resources %}
+                        {% if r.person is not null %}
+                            {{ _self.insert_onthefly('person', r.person) }}
+                        {% elseif r.thirdParty is not null %}
+                            {{ _self.insert_onthefly('thirdparty', r.thirdParty) }}
+                        {% endif %}
+                    {% endfor %}
+                </div>
+            </div>
+        {% endif %}
+
+        {% if accompanyingCourse.pinnedComment is not empty %}
+            <div class="mbloc col col-sm-6 col-lg-4">
+                <div class="comment">
+                    <h4 class="item-key visually-hidden">{{ 'Pinned comment'|trans }}</h4>
+                    <blockquote class="chill-user-quote">
+                        {{ accompanyingCourse.pinnedComment.content|chill_markdown_to_html }}
+                        <div class="metadata">
+                            {{ 'Last updated by'| trans }}
+                            <span class="user">
+                            {{ accompanyingCourse.pinnedComment.updatedBy|chill_entity_render_box }}
+                        </span>
+                            {{ 'on'|trans ~ ' ' }}
+                            <span class="date">
+                            {{ accompanyingCourse.pinnedComment.updatedAt|format_datetime("medium", "short") }}
+                        </span>
+                        </div>
+                    </blockquote>
+                </div>
+            </div>
+        {% endif %}
+
+        {% if accompanyingCourse.scopes is not empty %}
+            <div class="mbloc col col-sm-6 col-lg-4">
+                <div class="scopes">
+                    <h4 class="item-key">{{ 'Scopes'|trans }}</h4>
+                    <div>
+                        {% for s in accompanyingCourse.scopes  %}
+                            <span>{{ s.name|localize_translatable_string|capitalize }}</span>{% if not loop.last %}, {% endif %}
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+
         {% if accompanyingCourse.requestorPerson is not null or accompanyingCourse.requestorThirdParty is not null %}
-            <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) }}
-                {% elseif accompanyingCourse.requestorThirdParty is not null %}
-                    <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
-                    {{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}
-                {% endif %}
+            <div class="mbloc col col-sm-6 col-lg-4">
+                <div class="requestor">
+                    {% if accompanyingCourse.requestorPerson is not null %}
+                        <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
+                        {{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}
+                    {% elseif accompanyingCourse.requestorThirdParty is not null %}
+                        <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
+                        {{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}
+                    {% endif %}
+                </div>
             </div>
         {% endif %}
     </div>