Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

refactor activity list css styles (wip)

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-10-05 17:03:39 +02:00
parent 52c1a01980
commit e12e5798ea
8 changed files with 186 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
View File

@ -21,89 +21,28 @@ div.new-activity-select-type {
} }
} }
// exceptions for flex-table /// liste des échanges, sous le titre-badge, le bloc de contenu
div.activity-list { div.main {
&.flex-table { padding: 1em;
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%;
// 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 { ul.list-content {
list-style-type: none; list-style-type: none;
padding-left: 1em; padding-left: 0.6em;
margin: 0 0; margin: 0;
li { li {
margin-bottom: 0.2em; margin-bottom: 0.2em;
} }
} }
}
div.duration { div.duration {
font-size: smaller; font-size: smaller;
padding-left: 1em; padding-left: 1em;
margin-top: 1em; margin-top: 1em;
} }
}
} }
// exceptions for flex-bloc in concerned-groups // exceptions for flex-bloc in concerned-groups
div.flex-bloc.concerned-groups { div.flex-bloc.concerned-groups {
margin-top: 1em; margin-top: 1em;

28
src/Bundle/ChillActivityBundle/Resources/views/Activity/concernedGroups.html.twig
View File

@ -101,3 +101,31 @@
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% 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 %}

145
src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
View File

@ -11,28 +11,49 @@
{% for activity in activities %} {% for activity in activities %}
{% set t = activity.type %} {% set t = activity.type %}
<div class="item-bloc"> <div class="item-bloc">
<div class="item-row main"> <div class="item-row">
<div class="item-col">
<h2 class="badge-title">
<span class="title_label">
{% if activity.date %} {% if activity.date %}
<h3>{{ activity.date|format_date('long') }}</h3> <h3>{{ activity.date|format_date('short') }}</h3>
{% endif %} {% endif %}
<div class="duration"> <div class="duration">
{% if activity.durationTime and t.durationTimeVisible %} {% if activity.durationTime and t.durationTimeVisible %}
<p> <p>
<i class="fa fa-fw fa-hourglass-end"></i> <abbr class="fa fa-fw fa-hourglass-end" title="{{ 'Duration Time'|trans }}"></abbr>
{{ activity.durationTime|date('H:i') }} {{ activity.durationTime|date('H:i') }}
</p> </p>
{% endif %} {% endif %}
{% if activity.travelTime and t.travelTimeVisible %} {% if activity.travelTime and t.travelTimeVisible %}
<p> <p>
<i class="fa fa-fw fa-car"></i> <abbr class="fa fa-fw fa-car" title="{{ 'Travel time'|trans }}"></abbr>
{{ activity.travelTime|date('H:i') }} {{ activity.travelTime|date('H:i') }}
</p> </p>
{% endif %} {% endif %}
</div> </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 %} {% if context == 'person' and activity.accompanyingPeriod is not empty %}
<div class="mt-3"> <div class="mt-3">
<a class="btn btn-sm btn-outline-primary" <a class="btn btn-sm btn-outline-primary"
@ -44,70 +65,13 @@
</a> </a>
</div> </div>
{% endif %} {% 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> </div>
<div class="main">
<ul class="list-content"> <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 -%} {%- if t.reasonsVisible -%}
<li> <li class="reasons">
{%- if activity.reasons is not empty -%} {%- if activity.reasons is not empty -%}
{% for r in activity.reasons %} {% for r in activity.reasons %}
{{ r|chill_entity_render_box }} {{ r|chill_entity_render_box }}
@ -115,7 +79,6 @@
{%- endif -%} {%- endif -%}
</li> </li>
{% endif %} {% endif %}
{%- if t.socialIssuesVisible %} {%- if t.socialIssuesVisible %}
<li class="social-issues"> <li class="social-issues">
{%- if activity.socialIssues is not empty -%} {%- if activity.socialIssues is not empty -%}
@ -125,7 +88,6 @@
{%- endif -%} {%- endif -%}
</li> </li>
{% endif %} {% endif %}
{%- if t.socialActionsVisible -%} {%- if t.socialActionsVisible -%}
<li class="social-actions"> <li class="social-actions">
{%- if activity.socialActions is not empty -%} {%- if activity.socialActions is not empty -%}
@ -135,26 +97,14 @@
{%- endif -%} {%- endif -%}
</li> </li>
{% endif %} {% endif %}
</ul> </ul>
</div>
</div>
</div>
</div>
{% if activity.comment.comment is not empty {% if activity.comment.comment is not empty
or activity.persons|length > 0 or activity.persons|length > 0
or activity.thirdParties|length > 0 or activity.thirdParties|length > 0
or activity.users|length > 0 or activity.users|length > 0
%} %}
<div class="item-row comment separator">
{% if activity.comment.comment is not empty %} {% if activity.comment.comment is not empty %}
{{ activity.comment|chill_entity_render_box({ {{ activity.comment|chill_entity_render_box({
'disable_markdown': false, 'disable_markdown': false,
@ -162,17 +112,42 @@
'metadata': false, 'metadata': false,
}) }} }) }}
{% endif %} {% endif %}
</div>
<div class="item-row details">
{% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with { {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {
'context': context, 'context': context,
'with_display': 'bloc', 'with_display': 'row',
'entity': activity, 'entity': activity,
'badge_person': true '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> </div>
{% endfor %} {% endfor %}

20
src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
View File

@ -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 * HOUSEHOLD CONTEXT
* Header custom for Household * Header custom for Household
@ -185,6 +179,7 @@ div.banner {
} }
} }
///
div.household-resume { div.household-resume {
display: flex; display: flex;
flex-direction: row; 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;
}

6
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss
View File

@ -108,10 +108,4 @@ div.accompanying_course_work-list {
} }
} }
.updatedBy {
margin-top: 0.3rem;
font-size: 0.9rem;
font-style: italic;
}
} }

9
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
View File

@ -62,6 +62,9 @@ h2.badge-title {
font-size: 80%; font-size: 80%;
padding: 0.5em; padding: 0.5em;
padding-right: 0; padding-right: 0;
h3 {
margin-bottom: 0.5rem;
}
} }
span.title_action { span.title_action {
flex-grow: 1; flex-grow: 1;
@ -97,6 +100,9 @@ h2.badge-title {
span.title_label { span.title_label {
// Calculate same color then border:groove // Calculate same color then border:groove
background-color: shade-color($activity-color, 34%); background-color: shade-color($activity-color, 34%);
h3 {
color: $white;
}
} }
span.title_action { span.title_action {
@include badge_title($activity-color); @include badge_title($activity-color);
@ -108,6 +114,9 @@ h2.badge-title {
p { p {
margin-bottom: 0; margin-bottom: 0;
text-align: right; text-align: right;
abbr {
text-decoration: none;
}
} }
} }
} }

2
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
View File

@ -4,7 +4,7 @@
/// ///
@mixin chill_badge($color) { @mixin chill_badge($color) {
//text-transform: capitalize !important; text-transform: capitalize !important;
font-weight: 500 !important; font-weight: 500 !important;
border-left: 20px groove $color; border-left: 20px groove $color;
&:before { &:before {

3
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
View File

@ -58,11 +58,10 @@
</div> </div>
<div class="item-row separator"> <div class="item-row separator">
<div class="wrap-list"> <div class="wrap-list">
{% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %} {% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
<div class="wl-row"> <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"> <div class="wl-col list">
{% if accompanying_period.requestorPerson is not null %} {% if accompanying_period.requestorPerson is not null %}
<span class="wl-item badge-person">{{ accompanying_period.requestorPerson|chill_entity_render_string }}</span> <span class="wl-item badge-person">{{ accompanying_period.requestorPerson|chill_entity_render_string }}</span>