mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
refactor activity list css styles (wip)
This commit is contained in:
parent
52c1a01980
commit
e12e5798ea
@ -21,89 +21,28 @@ div.new-activity-select-type {
|
||||
}
|
||||
}
|
||||
|
||||
// exceptions for flex-table
|
||||
div.activity-list {
|
||||
&.flex-table {
|
||||
div.item-bloc {
|
||||
div.item-row.main {
|
||||
div.item-col {
|
||||
&:first-child {
|
||||
flex-basis: 15%;
|
||||
}
|
||||
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: $orange;
|
||||
}
|
||||
li.social-actions .badge-primary {
|
||||
background-color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.item-row.comment {
|
||||
margin-left: 15%;
|
||||
blockquote.chill-user-quote {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
div.item-row.details {
|
||||
margin-left: 15%;
|
||||
/// liste des échanges, sous le titre-badge, le bloc de contenu
|
||||
div.main {
|
||||
padding: 1em;
|
||||
|
||||
///
|
||||
ul.list-content {
|
||||
list-style-type: none;
|
||||
padding-left: 0.6em;
|
||||
margin: 0;
|
||||
li {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
}
|
||||
div.duration {
|
||||
font-size: smaller;
|
||||
padding-left: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
// override flex-bloc to adapt in list
|
||||
// TODO refund this
|
||||
div.accompanyingCourse.flex-bloc.concerned-groups {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
div.item-bloc {
|
||||
box-shadow: unset;
|
||||
padding: 0;
|
||||
flex-basis: 25%;
|
||||
div.item-row {
|
||||
flex-direction: column;
|
||||
div.item-col {
|
||||
&:first-child {
|
||||
width: unset;
|
||||
}
|
||||
&:last-child {
|
||||
border-top: 0;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
ul.list-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// exceptions for flex-bloc in concerned-groups
|
||||
div.flex-bloc.concerned-groups {
|
||||
margin-top: 1em;
|
||||
|
||||
@ -101,3 +101,31 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if (with_display == 'wrap-list') %}
|
||||
<div class="concerned-groups wrap-list">
|
||||
{% for bloc in blocs %}
|
||||
<div class="wl-row">
|
||||
{% if bloc.items|length > 0 %}
|
||||
<div class="wl-col title">
|
||||
<h4>{{ bloc.title }}</h4>
|
||||
</div>
|
||||
<div class="wl-col list">
|
||||
{% for item in bloc.items %}
|
||||
|
||||
<span class="wl-item {% if (badge_person is defined and badge_person == true) %}badge-person{% else %}badge bg-primary{% endif %}">
|
||||
<a href="{{ _self.href(bloc.path, bloc.key, item.id) }}">
|
||||
{{ item|chill_entity_render_box({
|
||||
'render': 'raw',
|
||||
'addAltNames': false
|
||||
}) }}
|
||||
</a>
|
||||
</span>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@ -11,28 +11,49 @@
|
||||
{% for activity in activities %}
|
||||
{% set t = activity.type %}
|
||||
<div class="item-bloc">
|
||||
<div class="item-row main">
|
||||
<div class="item-col">
|
||||
<div class="item-row">
|
||||
|
||||
{% if activity.date %}
|
||||
<h3>{{ activity.date|format_date('long') }}</h3>
|
||||
{% endif %}
|
||||
|
||||
<div class="duration">
|
||||
{% if activity.durationTime and t.durationTimeVisible %}
|
||||
<p>
|
||||
<i class="fa fa-fw fa-hourglass-end"></i>
|
||||
{{ activity.durationTime|date('H:i') }}
|
||||
</p>
|
||||
<h2 class="badge-title">
|
||||
<span class="title_label">
|
||||
{% if activity.date %}
|
||||
<h3>{{ activity.date|format_date('short') }}</h3>
|
||||
{% endif %}
|
||||
{% if activity.travelTime and t.travelTimeVisible %}
|
||||
<p>
|
||||
<i class="fa fa-fw fa-car"></i>
|
||||
{{ activity.travelTime|date('H:i') }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="duration">
|
||||
{% if activity.durationTime and t.durationTimeVisible %}
|
||||
<p>
|
||||
<abbr class="fa fa-fw fa-hourglass-end" title="{{ 'Duration Time'|trans }}"></abbr>
|
||||
{{ activity.durationTime|date('H:i') }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if activity.travelTime and t.travelTimeVisible %}
|
||||
<p>
|
||||
<abbr class="fa fa-fw fa-car" title="{{ 'Travel time'|trans }}"></abbr>
|
||||
{{ activity.travelTime|date('H:i') }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</span>
|
||||
<span class="title_action">
|
||||
|
||||
{{ activity.type.name | localize_translatable_string }}
|
||||
<ul class="small_in_title">
|
||||
|
||||
<li>
|
||||
<abbr title="{{ 'location'|trans }}">{{ 'location'|trans ~ ': ' }}</abbr>
|
||||
{# TODO {% if activity.location %}{{ activity.location }}{% endif %} #}
|
||||
Domicile de l'usager
|
||||
</li>
|
||||
|
||||
{% if activity.user and t.userVisible %}
|
||||
<li>
|
||||
<abbr title="{{ 'Referrer'|trans }}">{{ 'Referrer'|trans ~ ': ' }}</abbr>
|
||||
{{ activity.user.usernameCanonical }}
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</span>
|
||||
</h2>
|
||||
{#
|
||||
{% if context == 'person' and activity.accompanyingPeriod is not empty %}
|
||||
<div class="mt-3">
|
||||
<a class="btn btn-sm btn-outline-primary"
|
||||
@ -44,117 +65,46 @@
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="item-col">
|
||||
|
||||
<div class="float-button top">
|
||||
<div class="box">
|
||||
|
||||
<div class="action">
|
||||
<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="btn btn-sm btn-show "></a>
|
||||
</li>
|
||||
{% if no_action is not defined or no_action == false %}
|
||||
{# TODO
|
||||
{% 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="btn btn-sm btn-update "></a>
|
||||
</li>
|
||||
{# TODO
|
||||
{% 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="btn btn-sm btn-delete "></a>
|
||||
</li>
|
||||
{# TODO
|
||||
{% endif %}
|
||||
#}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="list-content">
|
||||
|
||||
{% if activity.user and t.userVisible %}
|
||||
<li>
|
||||
<abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
|
||||
<b>{{ activity.user.usernameCanonical }}</b>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<li>
|
||||
<b>{{ activity.type.name | localize_translatable_string }}</b>
|
||||
|
||||
{% if activity.attendee is not null and t.attendeeVisible %}
|
||||
{% if activity.attendee %}
|
||||
{{ '→ ' ~ 'present'|trans|capitalize }}
|
||||
{% else %}
|
||||
{{ '→ ' ~ 'not present'|trans|capitalize }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<b>{{ 'location'|trans ~ ': ' }}</b> Domicile de l'usager
|
||||
{# TODO {% if activity.location %}{{ activity.location }}{% endif %} #}
|
||||
</li>
|
||||
|
||||
{%- if t.reasonsVisible -%}
|
||||
<li>
|
||||
{%- if activity.reasons is not empty -%}
|
||||
{% for r in activity.reasons %}
|
||||
{{ r|chill_entity_render_box }}
|
||||
{% endfor %}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{%- if t.socialIssuesVisible %}
|
||||
<li class="social-issues">
|
||||
{%- if activity.socialIssues is not empty -%}
|
||||
{% for r in activity.socialIssues %}
|
||||
{{ r|chill_entity_render_box }}
|
||||
{% endfor %}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{%- if t.socialActionsVisible -%}
|
||||
<li class="social-actions">
|
||||
{%- if activity.socialActions is not empty -%}
|
||||
{% for r in activity.socialActions %}
|
||||
{{ r|chill_entity_render_box }}
|
||||
{% endfor %}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
#}
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<ul class="list-content">
|
||||
{%- if t.reasonsVisible -%}
|
||||
<li class="reasons">
|
||||
{%- if activity.reasons is not empty -%}
|
||||
{% for r in activity.reasons %}
|
||||
{{ r|chill_entity_render_box }}
|
||||
{% endfor %}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endif %}
|
||||
{%- if t.socialIssuesVisible %}
|
||||
<li class="social-issues">
|
||||
{%- if activity.socialIssues is not empty -%}
|
||||
{% for r in activity.socialIssues %}
|
||||
{{ r|chill_entity_render_box }}
|
||||
{% endfor %}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endif %}
|
||||
{%- if t.socialActionsVisible -%}
|
||||
<li class="social-actions">
|
||||
{%- if activity.socialActions is not empty -%}
|
||||
{% for r in activity.socialActions %}
|
||||
{{ r|chill_entity_render_box }}
|
||||
{% endfor %}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
{% if activity.comment.comment is not empty
|
||||
or activity.persons|length > 0
|
||||
or activity.thirdParties|length > 0
|
||||
or activity.users|length > 0
|
||||
%}
|
||||
|
||||
{% 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 comment separator">
|
||||
{% if activity.comment.comment is not empty %}
|
||||
{{ activity.comment|chill_entity_render_box({
|
||||
'disable_markdown': false,
|
||||
@ -162,17 +112,42 @@
|
||||
'metadata': false,
|
||||
}) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="item-row details">
|
||||
|
||||
{% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {
|
||||
'context': context,
|
||||
'with_display': 'bloc',
|
||||
'with_display': 'row',
|
||||
'entity': activity,
|
||||
'badge_person': true
|
||||
} %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="item-row separator">
|
||||
<div class="updatedBy">
|
||||
{#
|
||||
{{ 'Last updated by'|trans}}
|
||||
<b>{{ activity.updatedBy|chill_entity_render_box }}</b>,<br>
|
||||
{{ 'le ' ~ activity.updatedAt|format_datetime('long', 'short') }}
|
||||
#}
|
||||
</div>
|
||||
<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="btn btn-sm btn-show "></a>
|
||||
</li>
|
||||
{% if no_action is not defined or no_action == false %}
|
||||
<li>
|
||||
<a href="{{ path('chill_activity_activity_edit', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}"
|
||||
class="btn btn-sm btn-update "></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('chill_activity_activity_delete', { 'id': activity.id, 'person_id' : person_id, 'accompanying_period_id': accompanying_course_id } ) }}"
|
||||
class="btn btn-sm btn-delete "></a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
@ -120,12 +120,6 @@ div.banner {
|
||||
}
|
||||
}
|
||||
|
||||
abbr.referrer { // still used ?
|
||||
font-size: 70%;
|
||||
padding-right: 0.4em;
|
||||
align-self: center; // in flex context
|
||||
}
|
||||
|
||||
/*
|
||||
* HOUSEHOLD CONTEXT
|
||||
* Header custom for Household
|
||||
@ -185,6 +179,7 @@ div.banner {
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
div.household-resume {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -234,3 +229,16 @@ div.accompanyingcourse-resume {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
abbr.referrer { // still used ?
|
||||
font-size: 70%;
|
||||
padding-right: 0.4em;
|
||||
align-self: center; // in flex context
|
||||
}
|
||||
|
||||
.updatedBy {
|
||||
margin-top: 0.3rem;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@ -108,10 +108,4 @@ div.accompanying_course_work-list {
|
||||
}
|
||||
}
|
||||
|
||||
.updatedBy {
|
||||
margin-top: 0.3rem;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -62,6 +62,9 @@ h2.badge-title {
|
||||
font-size: 80%;
|
||||
padding: 0.5em;
|
||||
padding-right: 0;
|
||||
h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
span.title_action {
|
||||
flex-grow: 1;
|
||||
@ -97,6 +100,9 @@ h2.badge-title {
|
||||
span.title_label {
|
||||
// Calculate same color then border:groove
|
||||
background-color: shade-color($activity-color, 34%);
|
||||
h3 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
span.title_action {
|
||||
@include badge_title($activity-color);
|
||||
@ -108,6 +114,9 @@ h2.badge-title {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
text-align: right;
|
||||
abbr {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
///
|
||||
|
||||
@mixin chill_badge($color) {
|
||||
//text-transform: capitalize !important;
|
||||
text-transform: capitalize !important;
|
||||
font-weight: 500 !important;
|
||||
border-left: 20px groove $color;
|
||||
&:before {
|
||||
|
||||
@ -58,11 +58,10 @@
|
||||
|
||||
</div>
|
||||
<div class="item-row separator">
|
||||
|
||||
<div class="wrap-list">
|
||||
{% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
|
||||
<div class="wl-row">
|
||||
<div class="wl-col title"><h3>{{ 'Requestor'|trans }}</h3></div>
|
||||
<div class="wl-col title"><h3>{{ 'Requestor'|trans({'gender': null }) }}</h3></div>
|
||||
<div class="wl-col list">
|
||||
{% if accompanying_period.requestorPerson is not null %}
|
||||
<span class="wl-item badge-person">{{ accompanying_period.requestorPerson|chill_entity_render_string }}</span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user