accourse banner: use bootstrap carousel to display vue_accourse social-issues and associated-persons as slides

This commit is contained in:
2021-11-18 17:59:03 +01:00
parent aba47600ff
commit af339aa7f0
7 changed files with 173 additions and 38 deletions

View File

@@ -23,11 +23,28 @@
</div>
<div id="header-accompanying_course-details" class="header-details">
<div class="container-xxl">
<div
class="row justify-content-md-right">
<div class="row">
{# vue teleport fragment here #}
<div class="col-md-10 ps-md-5 ps-xxl-0" id="banner-social-issues"></div>
<div class="col-md-12 px-md-5 px-xxl-0">
<div id="ACHeaderSlider" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
{# vue teleport fragment here #}
<div id="banner-social-issues" class="col-11"></div>
</div>
<div class="carousel-item">
{# vue teleport fragment here #}
<div id="banner-persons-associated" class="col-11 offset-1 text-end"></div>
</div>
</div>
<button class="carousel-control-prev justify-content-start visually-hidden" type="button" data-bs-target="#ACHeaderSlider" data-bs-slide="prev">
<span class="to-social-issues" title="{{ 'see social issues'|trans }}"></span>
</button>
<button class="carousel-control-next justify-content-end" type="button" data-bs-target="#ACHeaderSlider" data-bs-slide="next">
<span class="to-persons-associated" title="{{ 'see persons associated'|trans }}"></span>
</button>
</div>
</div>
</div>
</div>

View File

@@ -23,32 +23,6 @@
{% block content %}
<div class="accompanyingcourse-resume row">
<div class="associated-persons mb-5">
{% for h in participationsByHousehold %}
{% set householdClass = (h.household is not null) ? 'household-' ~ h.household.id : 'no-household alert alert-warning' %}
{% set householdTitle = (h.household is not null) ?
'household.Household number'|trans({'household_num': h.household.id }) : 'household.Never in any household'|trans %}
<span class="household {{ householdClass }}" title="{{ householdTitle }}">
{% if h.household is not null %}
<a href="{{ path('chill_person_household_summary', { 'household_id': h.household.id }) }}"
title="{{ 'household.Household number'|trans({'household_num': h.household.id }) }}"
><i class="fa fa-home fa-fw"></i></a>
{% endif %}
{% for p in h.members %}
{# include vue_onthefly component #}
{% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
targetEntity: { name: 'person', id: p.person.id },
action: 'show',
displayBadge: true,
buttonText: p.person|chill_entity_render_string
} %}
{% endfor %}
</span>
{% endfor %}
</div>
{% if 'DRAFT' == accompanyingCourse.step %}
<div class="col-md-6 warnings mb-5">
{% include '@ChillPerson/AccompanyingCourse/_still_draft.html.twig' %}