improve masonry bloc style

This commit is contained in:
Mathieu Jaumotte 2021-12-29 12:11:20 +01:00
parent 6a0ce72836
commit 5089bba4d7
2 changed files with 109 additions and 74 deletions

View File

@ -254,3 +254,19 @@ abbr.referrer { // still used ?
border: 1px solid black; border: 1px solid black;
padding: 10px; 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;
}
}
}

View File

@ -19,31 +19,39 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="accompanyingcourse-resume"> <div class="accompanyingcourse-resume overflow-hidden">
<div id="dashboards" class="row" data-masonry='{"percentPosition": true }'> <div id="dashboards" class="row g-3" data-masonry='{"percentPosition": true }'>
{% if 'DRAFT' == accompanyingCourse.step %}
<div class="col-4 warnings mb-4"> <div class="mbloc col col-sm-6 col-lg-4">
<div class="warnings">
{% include '@ChillPerson/AccompanyingCourse/_still_draft.html.twig' %} {% include '@ChillPerson/AccompanyingCourse/_still_draft.html.twig' %}
</div> </div>
</div>
{% if 'DRAFT' == accompanyingCourse.step %}
{% endif %} {% endif %}
{% if 'DRAFT' != accompanyingCourse.step %} <div class="mbloc col col-sm-6 col-lg-4">
{% if withoutHousehold|length > 0 %} <div class="warnings">
<div class="col-4 warnings mb-4">
{% include '@ChillPerson/AccompanyingCourse/_join_household.html.twig' %} {% include '@ChillPerson/AccompanyingCourse/_join_household.html.twig' %}
</div> </div>
</div>
{% if 'DRAFT' != accompanyingCourse.step %}
{% if withoutHousehold|length > 0 %}
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if accompanyingCourse.locationStatus == 'address' <div class="mbloc col col-sm-6 col-lg-4">
or accompanyingCourse.locationStatus == 'none' %} <div class="warnings">
<div class="col-4 warnings mb-4">
{% include '@ChillPerson/AccompanyingCourse/_warning_address.html.twig' %} {% include '@ChillPerson/AccompanyingCourse/_warning_address.html.twig' %}
</div> </div>
</div>
{% if accompanyingCourse.locationStatus == 'address'
or accompanyingCourse.locationStatus == 'none' %}
{% endif %} {% endif %}
<div class="col col-sm-6 col-lg-4 location mb-4"> <div class="mbloc col col-sm-6 col-lg-4">
<div class="location">
{% if accompanyingCourse.locationStatus == 'person' %} {% if accompanyingCourse.locationStatus == 'person' %}
<h2>{{ 'This course is located by'|trans }}</h2> <h2>{{ 'This course is located by'|trans }}</h2>
<h4>{{ accompanyingCourse.personLocation|chill_entity_render_string }}</h4> <h4>{{ accompanyingCourse.personLocation|chill_entity_render_string }}</h4>
@ -55,18 +63,22 @@
{{ accompanyingCourse.location|chill_entity_render_box }} {{ accompanyingCourse.location|chill_entity_render_box }}
{% endif %} {% endif %}
</div> </div>
</div>
{% if accompanyingCourse.participations is not empty %} {% if accompanyingCourse.participations is not empty %}
<div class="col col-sm-6 col-lg-4 persons mb-4"> <div class="mbloc col col-sm-6 col-lg-4">
<div class="persons">
<h4 class="item-key">{{ 'Persons associated'|trans }}</h4> <h4 class="item-key">{{ 'Persons associated'|trans }}</h4>
{% for r in accompanyingCourse.participations %} {% for r in accompanyingCourse.participations %}
{{ _self.insert_onthefly('person', r.person) }} {{ _self.insert_onthefly('person', r.person) }}
{% endfor %} {% endfor %}
</div> </div>
</div>
{% endif %} {% endif %}
{% if accompanyingCourse.resources is not empty %} {% if accompanyingCourse.resources is not empty %}
<div class="col col-sm-6 col-lg-4 resources mb-4"> <div class="mbloc col col-sm-6 col-lg-4">
<div class="resources">
<h4 class="item-key">{{ 'Resources'|trans }}</h4> <h4 class="item-key">{{ 'Resources'|trans }}</h4>
{% for r in accompanyingCourse.resources %} {% for r in accompanyingCourse.resources %}
{% if r.person is not null %} {% if r.person is not null %}
@ -76,13 +88,15 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
</div>
{% endif %} {% endif %}
{% if accompanyingCourse.pinnedComment is not empty %} {% if accompanyingCourse.pinnedComment is not empty %}
<div class="col col-sm-6 col-lg-4 comment mb-4"> <div class="mbloc col col-sm-6 col-lg-4">
<h4 class="item-key">{{ 'Pinned comment'|trans }}</h4> <div class="comment">
<h4 class="item-key visually-hidden">{{ 'Pinned comment'|trans }}</h4>
<blockquote class="chill-user-quote"> <blockquote class="chill-user-quote">
{{ accompanyingCourse.pinnedComment.content }} {{ accompanyingCourse.pinnedComment.content|chill_markdown_to_html }}
<div class="metadata"> <div class="metadata">
{{ 'Last updated by'| trans }} {{ 'Last updated by'| trans }}
<span class="user"> <span class="user">
@ -95,10 +109,12 @@
</div> </div>
</blockquote> </blockquote>
</div> </div>
</div>
{% endif %} {% endif %}
{% if accompanyingCourse.scopes is not empty %} {% if accompanyingCourse.scopes is not empty %}
<div class="col col-sm-6 col-lg-4 scopes mb-4"> <div class="mbloc col col-sm-6 col-lg-4">
<div class="scopes">
<h4 class="item-key">{{ 'Scopes'|trans }}</h4> <h4 class="item-key">{{ 'Scopes'|trans }}</h4>
<div> <div>
{% for s in accompanyingCourse.scopes %} {% for s in accompanyingCourse.scopes %}
@ -106,10 +122,12 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div>
{% endif %} {% endif %}
{% if accompanyingCourse.requestorPerson is not null or accompanyingCourse.requestorThirdParty is not null %} {% if accompanyingCourse.requestorPerson is not null or accompanyingCourse.requestorThirdParty is not null %}
<div class="col col-sm-6 col-lg-4 requestor mb-4"> <div class="mbloc col col-sm-6 col-lg-4">
<div class="requestor">
{% if accompanyingCourse.requestorPerson is not null %} {% if accompanyingCourse.requestorPerson is not null %}
<h4 class="item-key">{{ 'Requestor'|trans }}</h4> <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }} {{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}
@ -118,6 +136,7 @@
{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }} {{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}
{% endif %} {% endif %}
</div> </div>
</div>
{% endif %} {% endif %}
</div> </div>