Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 21:34:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

notification list: use bootstrap accordion to fold/unfold notification content

Browse Source
This commit is contained in:
Mathieu Jaumotte 2022-01-15 17:13:20 +01:00
parent 22022e5143
commit 120ce40dbe
3 changed files with 130 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss
View File

@ -66,3 +66,15 @@ div.notification-show {
}
}
}
// Override bootstrap accordion
div#notification-fold {
.accordion-button {
padding: 0;
background-color: unset;
&:not(.collapsed) {
background-color: unset;
box-shadow: unset;
}
}
}

33
src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig
View File

@ -1,4 +1,15 @@
<div class="item-bloc notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
{% if fold_item is defined and fold_item != 'false' %}
<div class="accordion-header" id="flush-heading-{{ notification.id }}">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapse-{{ notification.id }}"
aria-expanded="false"
aria-controls="flush-collapse-{{ notification.id }}">
{% endif %}
<div class="item-row title">
<h2 class="notification-title">
<a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
@ -6,8 +17,12 @@
</a>
</h2>
</div>
<div class="item-row mt-2 notification-header">
{% if fold_item is defined and fold_item != 'false' %}
</button>
{% endif %}
<div class="item-row notification-header mt-2">
<div class="item-col">
<ul class="small_in_title">
{% if step is not defined or step == 'inbox' %}
@ -42,12 +57,19 @@
{% endif %}
</ul>
</div>
<div class="item-col">
{{ notification.date|format_datetime('long', 'short') }}
</div>
</div>
{% if fold_item is defined and fold_item != 'false' %}
</div>
<div id="flush-collapse-{{ notification.id }}"
class="accordion-collapse collapse"
aria-labelledby="flush-heading-{{ notification.id }}"
data-bs-parent="#notification-fold">
{% endif %}
<div class="item-row separator">
<div class="mx-3 flex-grow-1">
{% include data.template with data.template_data %}
@ -88,4 +110,9 @@
</ul>
</div>
{% endif %}
{% if fold_item is defined and fold_item != 'false' %}
</div>
{% endif %}
</div>

6
src/Bundle/ChillMainBundle/Resources/views/Notification/list.html.twig
View File

@ -46,10 +46,12 @@
<p class="chill-no-data-statement">{{ 'notification.Any notification sent'|trans }}</p>
{% endif %}
{% else %}
<div class="flex-table">
<div class="flex-table accordion accordion-flush" id="notification-fold">
{% for data in datas %}
{% set notification = data.notification %}
{% include 'ChillMainBundle:Notification:_list_item.html.twig' %}
{% include 'ChillMainBundle:Notification:_list_item.html.twig' with {
'fold_item': 'true'
} %}
{% endfor %}
</div>
{% endif %}