mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
list activity flex-table design
This commit is contained in:
parent
31468aeae0
commit
c1ba892811
@ -33,3 +33,64 @@ div.flex-bloc.concerned-groups {
|
||||
flex-basis: 33%; //3 blocs
|
||||
}
|
||||
}
|
||||
|
||||
// exceptions for flex-table in list-records
|
||||
div.flex-table.list-records {
|
||||
div.item-bloc {
|
||||
div.item-row.main {
|
||||
div.item-col {
|
||||
&:first-child {
|
||||
flex-basis: 27%;
|
||||
}
|
||||
ul.list-content {
|
||||
li.social-issues, li.social-actions {
|
||||
.badge-primary {
|
||||
font-variant: small-caps;
|
||||
font-weight: bold;
|
||||
font-size: 88%;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
}
|
||||
li.social-issues .badge-primary {
|
||||
background-color: var(--chill-orange);
|
||||
}
|
||||
li.social-actions .badge-primary {
|
||||
background-color: var(--chill-green);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.item-row.details {
|
||||
flex-direction: row;
|
||||
& > div.item-col {
|
||||
justify-content: flex-start;
|
||||
align-self: center;
|
||||
&:nth-child(1) {
|
||||
flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
flex-grow: 0; flex-shrink: 1; flex-basis: 70%;
|
||||
}
|
||||
}
|
||||
div.concerned-groups {
|
||||
font-size: 85%;
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.list-content {
|
||||
list-style-type: none;
|
||||
padding-left: 1em;
|
||||
margin: 0 0;
|
||||
li {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.duration {
|
||||
font-size: smaller;
|
||||
padding-left: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,14 +46,27 @@
|
||||
] %}
|
||||
{% endif %}
|
||||
|
||||
<div class="flex-bloc concerned-groups {{ context }}">
|
||||
{% set level1 = (with_display == 'bloc') ? context ~ ' flex-bloc ' : '' %}
|
||||
{% set level2 = (with_display == 'bloc') ? 'item-bloc ' : '' %}
|
||||
{% set level3 = (with_display == 'bloc') ? 'item-row ' : '' %}
|
||||
{% set level4 = (with_display == 'bloc') ? 'item-col ' : '' %}
|
||||
|
||||
<div class="{{ level1 }}concerned-groups">
|
||||
|
||||
{% for bloc in blocs %}
|
||||
<div class="item-bloc">
|
||||
<div class="item-row">
|
||||
<div class="item-col">
|
||||
<h4>{{ bloc.title }}</h4>
|
||||
<div class="{{ level2 }}">
|
||||
<div class="{{ level3 }}">
|
||||
<div class="{{ level4 }}">
|
||||
|
||||
{% if with_display == 'bloc' or bloc.items|length > 0 %}
|
||||
<h4>{{ bloc.title }}</h4>
|
||||
{% endif %}
|
||||
|
||||
{% if with_display == 'bloc' %}
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<div class="{{ level4 }}">
|
||||
{% endif %}
|
||||
|
||||
<ul class="list-content">
|
||||
{% for item in bloc.items %}
|
||||
<li>
|
||||
@ -69,4 +82,5 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,9 @@
|
||||
<a href="{{ path('chill_activity_activity_new', {'person_id': person_id, 'accompanying_period_id': accompanying_course_id}) }}" class="sc-button bt-create button-small"></a>
|
||||
</p>
|
||||
{% else %}
|
||||
<table class="records_list">
|
||||
|
||||
<div class="flex-table list-records {{ context }}">
|
||||
<!--
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="chill-red">{{'Date' | trans }}</th>
|
||||
@ -26,48 +28,149 @@
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
-->
|
||||
{% for activity in activities %}
|
||||
<tr>
|
||||
<td>{% if activity.date %}{{ activity.date|format_date('long') }}{% endif %}</td>
|
||||
<td>{{ activity.durationTime|date('H:i') }}</td>
|
||||
<td>
|
||||
<div class="item-bloc">
|
||||
<div class="item-row main">
|
||||
<div class="item-col">
|
||||
|
||||
{% if activity.date %}
|
||||
<h3>{{ activity.date|format_date('long') }}</h3>
|
||||
{% endif %}
|
||||
|
||||
<div class="duration">
|
||||
<p>
|
||||
<i class="fa fa-fw fa-hourglass-end"></i>
|
||||
{{ activity.durationTime|date('H:i') }}
|
||||
</p>
|
||||
|
||||
{% if activity.travelTime %}
|
||||
<p>
|
||||
<i class="fa fa-fw fa-car"></i>
|
||||
{{ activity.travelTime|date('H:i') }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="list-content">
|
||||
|
||||
{% if activity.user %}
|
||||
<li>
|
||||
<b>{{ 'by'|trans }}{{ activity.user.usernameCanonical }}</b>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<li>
|
||||
<b>{{ activity.type.name | localize_translatable_string }}</b>
|
||||
|
||||
{% if activity.attendee is not null %}
|
||||
{% if activity.attendee %}
|
||||
{{ '→ ' ~ 'present'|trans|capitalize }}
|
||||
{% else %}
|
||||
{{ '→ ' ~ 'not present'|trans|capitalize }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<b>{{ 'location'|trans ~ ': ' }}</b>
|
||||
Domicile de l'usager
|
||||
{#
|
||||
{% if activity.location %}{{ activity.location }}{% endif %}
|
||||
#}
|
||||
</li>
|
||||
|
||||
{%- if activity.reasons is defined -%}
|
||||
<li>
|
||||
{%- if activity.reasons is empty -%}
|
||||
<span class="chill-no-data-statement">{{ 'No reason associated'|trans }}</span>
|
||||
{%- else -%}
|
||||
{% for r in activity.reasons %}
|
||||
{{ r|chill_entity_render_box }}
|
||||
{% endfor %}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{%- if activity.socialIssues is defined -%}
|
||||
<li class="social-issues">
|
||||
{%- if activity.socialIssues is empty -%}
|
||||
<span class="chill-no-data-statement">{{ 'No social issues associated'|trans }}</span>
|
||||
{%- else -%}
|
||||
{% for r in activity.socialIssues %}
|
||||
<span class="badge badge-primary">
|
||||
{% if r.parent %}
|
||||
{{ r.parent.title|localize_translatable_string ~ ' > ' }}
|
||||
{% endif %}
|
||||
{{ r.title|localize_translatable_string }}
|
||||
</span>
|
||||
{% endfor %}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{%- if activity.socialActions is defined -%}
|
||||
<li class="social-actions">
|
||||
{%- if activity.socialActions is empty -%}
|
||||
<span class="chill-no-data-statement">{{ 'No social actions associated'|trans }}</span>
|
||||
{%- else -%}
|
||||
{% for r in activity.socialActions %}
|
||||
<span class="badge badge-primary">{{ r.title|localize_translatable_string }}</span>
|
||||
{% endfor %}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
|
||||
</ul>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a href="{{ path('chill_activity_activity_show', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}" class="sc-button bt-show "></a>
|
||||
</li>
|
||||
{# TOOD
|
||||
{% if is_granted('CHILL_ACTIVITY_UPDATE', activity) %}
|
||||
#}
|
||||
<li>
|
||||
<a href="{{ path('chill_activity_activity_edit', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}" class="sc-button bt-update "></a>
|
||||
</li>
|
||||
{# TOOD
|
||||
{% endif %}
|
||||
{% if is_granted('CHILL_ACTIVITY_DELETE', activity) %}
|
||||
#}
|
||||
<li>
|
||||
<a href="{{ path('chill_activity_activity_delete', { 'id': activity.id, 'person_id' : person_id, 'accompanying_period_id': accompanying_course_id } ) }}" class="sc-button bt-delete "></a>
|
||||
</li>
|
||||
{#
|
||||
{% endif %}
|
||||
#}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{%
|
||||
if activity.comment.comment is not empty
|
||||
or activity.persons|length > 0
|
||||
or activity.thirdParties|length > 0
|
||||
or activity.users|length > 0
|
||||
%}
|
||||
<div class="item-row details">
|
||||
<div class="item-col">
|
||||
{% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': activity } %}
|
||||
</div>
|
||||
|
||||
{% if activity.comment.comment is not empty %}
|
||||
{{ activity.comment|chill_entity_render_box( { 'limit_lines': 3, 'metadata': false } ) }}
|
||||
<div class="item-col comment">
|
||||
{{ activity.comment|chill_entity_render_box( { 'limit_lines': 3, 'metadata': false } ) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{%- if activity.reasons is empty -%}
|
||||
{{ 'No reason associated'|trans }}
|
||||
{%- else -%}
|
||||
{% for r in activity.reasons %}{{ r|chill_entity_render_box }} {% endfor %}
|
||||
{%- endif -%}
|
||||
</td>
|
||||
<td>{{ activity.type.name | localize_translatable_string }}</td>
|
||||
<td>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a href="{{ path('chill_activity_activity_show', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}" class="sc-button bt-show "></a>
|
||||
</li>
|
||||
{# TOOD
|
||||
{% if is_granted('CHILL_ACTIVITY_UPDATE', activity) %}
|
||||
#}
|
||||
<li>
|
||||
<a href="{{ path('chill_activity_activity_edit', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}" class="sc-button bt-update "></a>
|
||||
</li>
|
||||
{# TOOD
|
||||
{% endif %}
|
||||
{% if is_granted('CHILL_ACTIVITY_DELETE', activity) %}
|
||||
#}
|
||||
<li>
|
||||
<a href="{{ path('chill_activity_activity_delete', { 'id': activity.id, 'person_id' : person_id, 'accompanying_period_id': accompanying_course_id } ) }}" class="sc-button bt-delete "></a>
|
||||
</li>
|
||||
{#
|
||||
{% endif %}
|
||||
#}
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<ul class="record_actions">
|
||||
@ -77,3 +180,4 @@
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{{ dump()}}
|
||||
|
||||
@ -5,5 +5,5 @@
|
||||
{% block title %}{{ 'Activity list' |trans }}{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
{% include 'ChillActivityBundle:Activity:list.html.twig' %}
|
||||
{% include 'ChillActivityBundle:Activity:list.html.twig' with {'context': 'accompanyingCourse'} %}
|
||||
{% endblock %}
|
||||
|
||||
@ -21,5 +21,5 @@
|
||||
{% block title %}{{ 'Activity list' |trans }}{% endblock title %}
|
||||
|
||||
{% block personcontent %}
|
||||
{% include 'ChillActivityBundle:Activity:list.html.twig' %}
|
||||
{% include 'ChillActivityBundle:Activity:list.html.twig' with {'context': 'person'} %}
|
||||
{% endblock %}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</dl>
|
||||
|
||||
<h2 class="chill-red">{{ 'Concerned groups'|trans }}</h2>
|
||||
{% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context } %}
|
||||
{% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'bloc' } %}
|
||||
|
||||
<h2 class="chill-red">{{ 'Activity data'|trans }}</h2>
|
||||
<dl class="chill_view_data">
|
||||
|
||||
@ -24,6 +24,8 @@ Update activity: Modifier l'activité
|
||||
Scope: Cercle
|
||||
Activity data: Données de l'activité
|
||||
No reason associated: Aucun sujet
|
||||
No social issues associated: Aucune problématique sociale
|
||||
No social actions associated: Aucune action d'accompagnement
|
||||
There isn't any activities.: Aucune activité enregistrée.
|
||||
type_name: type de l'activité
|
||||
person_firstname: prénom
|
||||
@ -39,6 +41,8 @@ Emergency: Urgent
|
||||
Sent received: Envoyer / Recevoir
|
||||
Sent: Envoyer
|
||||
Received: Recevoir
|
||||
by: 'Par '
|
||||
location: Lieu
|
||||
|
||||
|
||||
#forms
|
||||
|
||||
@ -75,6 +75,6 @@ export default {
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
<style lang="scss">
|
||||
span.multiselect__tag {
|
||||
background: #e2793d;
|
||||
background: var(--chill-orange);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user