notification list, item header integration (test 3 ways)

This commit is contained in:
Mathieu Jaumotte 2022-01-06 18:41:25 +01:00
parent c32b767d9b
commit 442e2a1ede
3 changed files with 128 additions and 2 deletions

View File

@ -25,6 +25,8 @@
// Chill flex responsive table/block presentation
@import './scss/flex_table';
// Specific templates
@import './scss/notification';
/*
* BASE LAYOUT POSITION

View File

@ -0,0 +1,37 @@
/*
* Notifications List
*/
div.notification-list {
div.item-bloc {
div.item-row.header {
div.item-col {
&:first-child {
flex-grow: 1;
/// 3
div.wrap-list {
div.wl-col.list {
width: 90%;
}
}
}
&:last-child {
flex-grow: 0;
}
}
ul.small_in_title {
list-style-type: circle;
li {
span.item-key {
display: inline-block;
width: 3em;
}
}
}
}
}
}

View File

@ -51,14 +51,16 @@
{% for data in datas %}
{% set notification = data.notification %}
<div class="item-bloc {% if not notification.isReadBy(app.user) %}unread{% else %}read{% endif %}">
<div class="item-row">
<div class="item-row title">
<h2>
<a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
{{ notification.title }}
</a>
</h2>
</div>
<div class="item-row">
<div class="item-row mt-2 header">
{# 1
<div class="item-col">
<div class="notification-from">
{% if step == 'inbox' %}
@ -88,6 +90,91 @@
</div>
</div>
<div class="item-col">{{ notification.date|format_datetime('long', 'short') }}</div>
#}
{# 2
#}
<div class="item-col">
<ul class="small_in_title">
{% if step == 'inbox' %}
<li class="notification-from">
<span class="item-key">
<abbr title="{{ 'notification.received_from'|trans }}">
{{ 'notification.from'|trans }}:
</abbr>
</span>
{% if not notification.isSystem %}
<span class="badge-user">
{{ notification.sender|chill_entity_render_string }}
</span>
{% else %}
<span class="badge-user system">{{ 'notification.is_system'|trans }}</span>
{% endif %}
</li>
{% endif %}
{% if notification.addressees|length > 0 %}
<li class="notification-to">
<span class="item-key">
<abbr title="{{ 'notification.sent_to'|trans }}">
{{ 'notification.to'|trans }}:
</abbr>
</span>
{% for a in notification.addressees %}
<span class="badge-user">
{{ a|chill_entity_render_string }}
</span>
{% endfor %}
</li>
{% endif %}
</ul>
</div>
<div class="item-col">
{{ notification.date|format_datetime('long', 'short') }}
</div>
{# 3
<div class="item-col">
<div class="wrap-list">
{% if step == 'inbox' %}
<div class="wl-row notification-from">
<div class="wl-col title">
<abbr title="{{ 'notification.received_from'|trans }}">
{{ 'notification.from'|trans }}:
</abbr>
</div>
<div class="wl-col list">
{% if not notification.isSystem %}
<span class="wl-item badge-user">
{{ notification.sender|chill_entity_render_string }}
</span>
{% else %}
<span class="wl-item badge-user system">{{ 'notification.is_system'|trans }}</span>
{% endif %}
</div>
</div>
{% endif %}
{% if notification.addressees|length > 0 %}
<div class="wl-row notification-to">
<div class="wl-col title">
<abbr title="{{ 'notification.sent_to'|trans }}">
{{ 'notification.to'|trans }}:
</abbr>
</div>
<div class="wl-col list">
{% for a in notification.addressees %}
<span class="wl-item badge-user">
{{ a|chill_entity_render_string }}
</span>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
<div class="item-col">{{ notification.date|format_datetime('long', 'short') }}</div>
#}
</div>
<div class="item-row separator">
{% include data.template with data.template_data %}