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

Cohérence graphique des listes d'activités et d'actions dans le contexte d'un parcours

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-12-06 14:45:44 +00:00
committed by Julien Fastré
parent 8e6e92ae89
commit 2d1e8b2acd
19 changed files with 561 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,51 +1,6 @@
/// AccompanyingCourse Work list Page
div.accompanying_course_work-list {
div.timeline {
width: 100%;
ul {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
list-style-type: none;
> li {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
div {
display: flex;
flex-direction: column;
align-items: center;
&.date {
margin-bottom: 1em;
}
&.label {
border-top: 3px solid $chill-green;
&:before {
content: '';
display: inline-block;
position: relative;
width: 15px;
height: 15px;
top: -9px;
background-color: $white;
border-radius: 12px;
border: 2px solid $chill-green;
}
&.no-label:before {
display: none;
}
}
}
}
}
}
div.objective_results {
width: 100%;
display: grid;
@@ -69,8 +24,10 @@ div.accompanying_course_work-list {
//&:nth-child(even) { background-color: $chill-llight-gray; }
&.without-objectives {}
&.with-objectives {}
}
div.objective_results,
div.evaluations {
h4.title_label {
display: block;
margin: 0.4em 0;

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

@@ -39,69 +39,15 @@ span.fa-holder {
}
/*
* BADGE_TITLE
* Display Title like a badge (with background-colored label)
* DASHBOARDS
*/
h2.badge-title {
display: flex;
flex-direction: row;
width: 100%;
color: $dark;
span.title_label {
border-radius: 0.35rem 0 0 0.35rem;
color: $white;
font-size: 80%;
padding: 0.5em;
padding-right: 0;
h3 {
margin-bottom: 0.5rem;
}
//position: relative;
span {
display: none;
//position: absolute;
//top: 0;
//left: 0;
//transform: rotate(270deg);
//transform-origin: 0 0;
}
}
span.title_action {
flex-grow: 1;
margin: 0 0 0 auto;
border-radius: 0 0.35rem 0.35rem 0;
background-color: $chill-llight-gray;
padding: 0.2em 1em;
ul.small_in_title {
margin: 0;
//margin-top: 0.5em;
font-size: 70%;
padding-left: 1rem;
&.evaluations {
@include list_marker_triangle($orange);
}
}
ul.columns { // XS:1 SM:2 MD:1 LG:2 XL:2 XXL:2
@include media-breakpoint-only(sm) {
columns: 2; -webkit-columns: 2; -moz-columns: 2;
}
@include media-breakpoint-up(lg) {
columns: 2; -webkit-columns: 2; -moz-columns: 2;
}
}
}
}
/// Theses links apply on badge as parent tag.
/// Theses links apply on dashboards as parent tag.
/// They don't look like button, picto or simple text links
a.badge-link {
a.dashboard-link {
color: unset;
text-decoration: unset;
& > h2.badge-title {
& > div.dashboard {
&:hover {
//box-shadow: 0 0 7px 0 $chill-gray;
//opacity: 0.8;
@@ -114,21 +60,80 @@ a.badge-link {
}
}
/// badge_title in AccompanyingCourse Work list Page
div.dashboard {
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 0.5rem;
line-height: 1.2;
span.like-h3 {
color: #334d5c;
}
}
div.dashboard,
h2.badge-title {
display: flex;
flex-direction: row;
width: 100%;
color: $dark;
span.title_label {
color: $white;
font-size: 80%;
padding: 0.5em;
padding-right: 0;
border-radius: 0.35rem 0 0 0.35rem;
h3 {
margin-bottom: 0.5rem;
}
}
span.title_action {
flex-grow: 1;
margin: 0 0 0 auto;
background-color: $chill-llight-gray;
padding: 0.2em 1em;
border-radius: 0 0.35rem 0.35rem 0;
ul.small_in_title {
font-size: 70%;
}
}
}
ul.small_in_title {
margin: 0;
//margin-top: 0.5em;
padding-left: 1rem;
&.evaluations {
@include list_marker_triangle($orange);
}
}
ul.columns { // XS:1 SM:2 MD:1 LG:2 XL:2 XXL:2
@include media-breakpoint-only(sm) {
columns: 2; -webkit-columns: 2; -moz-columns: 2;
}
@include media-breakpoint-up(lg) {
columns: 2; -webkit-columns: 2; -moz-columns: 2;
}
}
/// dashboard_like_badge in AccompanyingCourse Work list Page
div.accompanying_course_work-list {
div.dashboard,
h2.badge-title {
span.title_label {
// Calculate same color then border:groove
background-color: shade-color($social-action-color, 34%);
}
span.title_action {
@include badge_title($social-action-color);
@include dashboard_like_badge($social-action-color);
}
}
}
/// badge_title in Activities on resume page
/// dashboard_like_badge in Activities on resume page
div.activity-list {
div.dashboard,
h2.badge-title {
span.title_label {
// Calculate same color then border:groove
@@ -138,7 +143,7 @@ div.activity-list {
}
}
span.title_action {
@include badge_title($activity-color);
@include dashboard_like_badge($activity-color);
}
span.title_label {
div.duration {

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

@@ -18,12 +18,6 @@ div.accompanyingcourse-list {
//&:nth-child(2) { flex-direction: row; }
//&:last-child { flex-direction: column; }
}
div.title h3 {
font-weight: 700;
font-size: 100%;
font-family: 'Open Sans';
}
div.list {}
}
/// Search Page (list_with_period.html.twig)

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

@@ -27,11 +27,10 @@
}
///
/// Generic mixin for titles like badge
// define visual badge used in title area
/// Mixin for dashboards (with design like badge_social)
///
@mixin badge_title($color) {
@mixin dashboard_like_badge($color) {
@include chill_badge($color);
&:before {
margin: 0 0.3em 0 -1.05em;

4
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
View File

@@ -103,7 +103,7 @@
</div>
<div class="social-actions my-4">
<h2 class="mb-3 d-none">{{ 'Last social actions'|trans }}</h2>
<h2 class="mb-3 visually-hidden">{{ 'Last social actions'|trans }}</h2>
{% include 'ChillPersonBundle:AccompanyingCourseWork:list_recent_by_accompanying_period.html.twig' with {'buttonText': false } %}
</div>
@@ -121,7 +121,7 @@
{% set accompanying_course_id = accompanyingCourse.id %}
{% endif %}
<h2 class="mb-3 d-none">{{ 'Last activities' |trans }}</h2>
<h2 class="mb-3 visually-hidden">{{ 'Last activities' |trans }}</h2>
{% include 'ChillActivityBundle:Activity:list_recent.html.twig' with { 'context': 'accompanyingCourse', 'no_action': true } %}
</div>
{% endblock %}

2
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/delete.html.twig
View File

@@ -8,7 +8,7 @@
<div class="accompanying_course_work-list">
<h2 class="badge-title">
<span class="title_label">{{ 'accompanying_course_work.action'|trans }}</span>
<span class="title_label"></span>
<span class="title_action">{{ work.socialAction|chill_entity_render_string }}</span>
</h2>

212
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/index.html.twig
View File

@@ -7,7 +7,217 @@
<h1>{{ block('title') }}</h1>
{% include 'ChillPersonBundle:AccompanyingCourseWork:list_by_accompanying_period.html.twig' %}
{% if works|length == 0 %}
<p class="chill-no-data-statement">{{ 'accompanying_course_work.Any work'|trans }}
<a class="btn btn-sm btn-create"
title="{{ 'accompanying_course_work.create'|trans }}"
href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_new', { 'id': accompanyingCourse.id }) }}"
></a>
</p>
{% else %}
<div class="flex-table accompanying_course_work-list">
{% for w in works %}
<div class="item-bloc">
<div class="item-row">
<h2 class="badge-title">
<span class="title_label"></span>
<span class="title_action">{{ w.socialAction|chill_entity_render_string }}
<ul class="small_in_title columns mt-1">
<li>
<span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
<b>{{ w.startDate|format_date('short') }}</b>
</li>
{% if w.endDate %}
<li>
<span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
<b>{{ w.endDate|format_date('short') }}</b>
</li>
{% endif %}
</ul>
</span>
</h2>
</div>
<div class="item-row separator">
<div class="wrap-list">
{% if w.createdBy %}
<div class="wl-row">
<div class="wl-col title">
<h3>{{ 'Referrer'|trans }}</h3>
</div>
<div class="wl-col list">
<p class="wl-item">
{{ w.createdBy.usernameCanonical|chill_entity_render_string|capitalize }}
</p>
</div>
</div>
{% endif %}
{%- if w.persons -%}
<div class="wl-row">
<div class="wl-col title">
<h3>{{ 'Persons in accompanying course'|trans }}</h3>
</div>
<div class="wl-col list">
{% for p in w.persons %}
<span class="wl-item badge-person">
{{ p|chill_entity_render_box({
'render': 'raw',
'addAltNames': false
}) }}
</span>
{% endfor %}
</div>
</div>
{% endif %}
{%- if w.handlingThierParty -%}
<div class="wl-row">
<div class="wl-col title">
<h3>{{ 'Thirdparty handling'|trans }}</h3>
</div>
<div class="wl-col list">
<span class="wl-item badge-thirdparty">
{{ w.handlingThierParty|chill_entity_render_box({
'render': 'raw',
'addAltNames': false
}) }}
</span>
</div>
</div>
{% endif %}
{%- if w.socialAction.issue -%}
<div class="wl-row">
<div class="wl-col title">
<h3>{{ 'Social issue'|trans }}</h3>
</div>
<div class="wl-col list">
<p class="wl-item social-issues">
{{ w.socialAction.issue|chill_entity_render_box }}
</p>
</div>
</div>
{% endif %}
{% if w.accompanyingPeriodWorkEvaluations|length > 0 %}
<div class="wl-row">
<div class="wl-col title">
<h3>{{ 'accompanying_course_work.evaluations'|trans }}</h3>
</div>
<div class="wl-col list">
<ul class="small_in_title evaluations mt-1">
{% for e in w.accompanyingPeriodWorkEvaluations %}
<li>
{{ e.evaluation.title|localize_translatable_string }}
<ul class="columns">
<li>
<span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
<b>{{ e.startDate|format_date('short') }}</b>
</li>
{% if e.endDate %}
<li>
<span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
<b>{{ e.endDate|format_date('short') }}</b>
</li>
{% endif %}
{% if e.maxDate %}
<li>
<span class="item-key">{{ 'accompanying_course_work.max_date'|trans ~ ' : ' }}</span>
<b>{{ e.maxDate|format_date('short') }}</b>
</li>
{% endif %}
{% if e.warningInterval and e.warningInterval.d > 0 %}
<li>
{% set days = (e.warningInterval.d + e.warningInterval.m * 30) %}
<span class="item-key">{{ 'accompanying_course_work.warning_interval'|trans ~ ' : ' }}</span>
{{ 'accompanying_course_work.%days% days before max_date'|trans({'%days%': days }) }}
</li>
{% endif %}
</ul>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
</div>
</div>
<div class="item-row column">
{# SEULEMENT SI DÉTAILLÉ
{% if w.results|length > 0 %}
<div class="objective_results without-objectives">
<div class="objective">
<h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
<p class="chill-no-data-statement">{{ 'accompanying_course_work.results without objective'|trans }}</p>
</div>
<div class="results">
<h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
<ul class="result_list">
{% for r in w.results %}
<li>{{ r.title|localize_translatable_string }}</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% if w.goals|length > 0 %}
{% for g in w.goals %}
<div class="objective_results with-objectives">
<div class="objective">
<h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
<ul class="goal_title"><li>{{ g.goal.title|localize_translatable_string }}</li></ul>
</div>
<div class="results">
<h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
{% if g.results|length == 0 %}
<p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p>
{% else %}
<ul class="result_list">
{% for r in g.results %}
<li>{{ r.title|localize_translatable_string }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
{% endfor %}
{% endif %}
#}
</div>
<div class="item-row separator">
<div class="updatedBy">
{{ 'Last updated by'|trans}} <b>{{ w.updatedBy|chill_entity_render_box }}</b>,<br>
{{ 'le ' ~ w.updatedAt|format_datetime('long', 'short') }}
</div>
<ul class="record_actions">
<li>
<a class="btn btn-edit" title="{{ 'Edit'|trans }}"
href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}"
></a>
</li>
<li>
<a class="btn btn-delete" title="{{ 'Delete'|trans }}"
href="{{ path('chill_person_accompanying_period_work_delete', { 'id': w.id } ) }}"
></a>
</li>
</ul>
</div>
</div>
{% endfor %}
</div>
{% endif %}
<ul class="record_actions sticky-form-buttons">
<li>

118
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_by_accompanying_period.html.twig
View File

@@ -1,118 +0,0 @@
{% if works|length == 0 %}
<p class="chill-no-data-statement">{{ 'accompanying_course_work.Any work'|trans }}
<a class="btn btn-sm btn-create"
href="" title="TODO"></a>{# TODO link #}
</p>
{% endif %}
<div class="flex-table accompanying_course_work-list">
{% for w in works %}
<div class="item-bloc">
<div class="item-row">
<h2 class="badge-title">
<span class="title_label">{{ 'accompanying_course_work.action'|trans }}</span>
<span class="title_action">{{ w.socialAction|chill_entity_render_string }}</span>
</h2>
</div>
<div class="item-row separator">
<div class="timeline">
<ul>
<li class="completed">
<div class="date">
<span>{{ w.startDate|format_date('long') }}</span>
</div>
<div class="label">
<span>{{ 'accompanying_course_work.start_date'|trans }}</span>
</div>
</li>
{% if w.endDate == null %}
<li>
<div class="label no-label"></div>
</li>
{% else %}
<li class="{%if date(w.endDate) < date('now') %}completed{% endif %}">
<div class="date">
<span>{{ w.endDate|format_date('long') }}</span>
</div>
<div class="label">
<span>{{ 'accompanying_course_work.end_date'|trans }}</span>
</div>
</li>
{% endif %}
</ul>
</div>
</div>
<div class="">
{% if w.results|length > 0 and w.goals|length > 0 %}
{% endif %}
{% if w.results|length > 0 %}
<div class="objective_results without-objectives">
<div class="objective">
<h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
<p class="chill-no-data-statement">{{ 'accompanying_course_work.results without objective'|trans }}</p>
</div>
<div class="results">
<h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
<ul class="result_list">
{% for r in w.results %}
<li>{{ r.title|localize_translatable_string }}</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% if w.goals|length > 0 %}
{% for g in w.goals %}
<div class="objective_results with-objectives">
<div class="objective">
<h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
<ul class="goal_title"><li>{{ g.goal.title|localize_translatable_string }}</li></ul>
</div>
<div class="results">
<h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
{% if g.results|length == 0 %}
<p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p>
{% else %}
<ul class="result_list">
{% for r in g.results %}
<li>{{ r.title|localize_translatable_string }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
{% endfor %}
{% endif %}
</div>
<div class="item-row separator">
<div class="updatedBy">
{{ 'Last updated by'|trans}} <b>{{ w.updatedBy|chill_entity_render_box }}</b>,<br>
{{ 'le ' ~ w.updatedAt|format_datetime('long', 'short') }}
</div>
<ul class="record_actions">
<li>
<a class="btn btn-edit" title="{{ 'Edit'|trans }}"
href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}"
>{% if buttonText is not defined or buttonText == true %}{{ 'Edit'|trans }}{% endif %}</a>
</li>
<li>
<a class="btn btn-delete" title="{{ 'Delete'|trans }}"
href="{{ path('chill_person_accompanying_period_work_delete', { 'id': w.id } ) }}"
>{% if buttonText is not defined or buttonText == true %}{{ 'Delete'|trans }}{% endif %}</a>
</li>
</ul>
</div>
</div>
{% endfor %}
</div>

13
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
View File

@@ -2,14 +2,11 @@
{% for w in works | slice(0,5) %}
<a href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}"
class="badge-link" title="{{ 'crud.social_action.title_link'|trans }}">
class="dashboard-link" title="{{ 'crud.social_action.title_link'|trans }}">
<h2 class="badge-title">
<span class="title_label">
<span>{{ 'accompanying_course_work.action'|trans }}</span>
</span>
<span class="title_action">
{{ w.socialAction|chill_entity_render_string }}
<div class="dashboard">
<span class="title_label"></span>
<span class="title_action"><span class="like-h3">{{ w.socialAction|chill_entity_render_string }}</span>
<ul class="small_in_title columns mt-3">
<li>
@@ -75,7 +72,7 @@
</div>
</span>
</h2>
</div>
</a>{# {{ dump(w) }} #}
{% endfor %}