AccourseWork list : design title

This commit is contained in:
Mathieu Jaumotte 2021-08-21 19:06:47 +02:00
parent d11c493e2d
commit 4ad6786bf2
4 changed files with 161 additions and 140 deletions

View File

@ -1,28 +1,41 @@
.chill-entity__social-action {
.badge-primary {
background-color: var(--chill-green);
}
}
div.accompanying_course_work-list { div.accompanying_course_work-list {
.item { // ?? howto calculate border:groove generated from $orange ??
margin-bottom: 1.5rem; // see mixin badge_social_action
padding: 1rem; $groove-border-color-connect: #965028;
border: 1px solid gray;
.title_label { h2.title {
display: block; display: flex;
margin: 0; flex-direction: row;
width: 100%;
color: $dark;
height: 40px;
font-variant-caps: small-caps; span.title_label {
border-radius: 0.35rem 0 0 0.35rem;
+ * { background-color: $groove-border-color-connect;
margin-top: 0; color: $white;
} font-size: 80%;
padding: 0.5em;
padding-right: 0;
}
span.action_title {
flex-grow: 1;
margin: 0 0 0 auto;
border-radius: 0 0.35rem 0.35rem 0;
background-color: $light;
padding: 0.2em 0.7em;
@include badge_social_action;
}
} }
/*
.objective_results { .objective_results {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
@ -61,51 +74,54 @@ div.accompanying_course_work-list {
} }
} }
*/
.updatedBy { .updatedBy {
margin-top: 1rem; margin-top: 1rem;
text-align: right; text-align: right;
font-size: 0.8rem; font-size: 0.9rem;
font-style: italic; font-style: italic;
} }
}
ul.timeline { ul.timeline {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
> li { > li {
min-width: 210px; min-width: 210px;
div.date { div.date {
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
div.label { div.label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0 40px; padding: 0 40px;
border-top: 3px solid var(--bs-chill-green); border-top: 3px solid var(--bs-chill-green);
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: white; background-color: white;
border-radius: 12px; border-radius: 12px;
border: 2px solid var(--bs-chill-green); border: 2px solid var(--bs-chill-green);
top: -9px; top: -9px;
}
} }
} }
} }
} }

View File

@ -2,111 +2,115 @@
{% block title 'accompanying_course_work.List accompanying course work'|trans %} {% block title 'accompanying_course_work.List accompanying course work'|trans %}
{% block content %} {% block content %}
<div class="accompanying_course_work-list"> <div class="accompanying_course_work-list">
<h1>{{ block('title') }}</h1> <h1>{{ block('title') }}</h1>
{% if works|length == 0 %}
<p class="chill-no-data-statement">{{ 'accompanying_course_work.Any work'|trans }}</p>
{% endif %}
<div class="flex-table">
{% for w in works %} {% for w in works %}
<div class="item"> <div class="item-bloc">
<div class="title">
<p class="title_label">{{ 'accompanying_course_work.action'|trans }}</p > <div class="item-row">
<h2 class="action_title"> <h2 class="title">
{{ w.socialAction|chill_entity_render_box }} <span class="title_label">{{ 'accompanying_course_work.action'|trans }}</span>
<span class="action_title">{{ w.socialAction|chill_entity_render_string }}</span>
</h2> </h2>
</div> </div>
<div class="timeline"> <div class="item-row separator">
<ul class="timeline"> <div class="timeline">
<li class="completed"> <ul class="timeline">
<div class="date"> <li class="completed">
<span>{{ w.createdAt|format_date('long') }}</span> <div class="date">
</div> <span>{{ w.createdAt|format_date('long') }}</span>
<div class="label"> </div>
<span>{{ 'accompanying_course_work.create_date'|trans }}</span> <div class="label">
</div> <span>{{ 'accompanying_course_work.create_date'|trans }}</span>
</li> </div>
<li class="completed"> </li>
<div class="date"> <li class="completed">
<span>{{ w.startDate|format_date('long') }}</span> <div class="date">
</div> <span>{{ w.startDate|format_date('long') }}</span>
<div class="label"> </div>
<span>{{ 'accompanying_course_work.start_date'|trans }}</span> <div class="label">
</div> <span>{{ 'accompanying_course_work.start_date'|trans }}</span>
</li> </div>
<li class="{%if date(w.endDate) < date('now') %}completed{% endif %}"> </li>
<div class="date"> <li class="{%if date(w.endDate) < date('now') %}completed{% endif %}">
<span>{{ w.endDate|format_date('long') }}</span> <div class="date">
</div> <span>{{ w.endDate|format_date('long') }}</span>
<div class="label"> </div>
<span>{{ 'accompanying_course_work.end_date'|trans }}</span> <div class="label">
</div> <span>{{ 'accompanying_course_work.end_date'|trans }}</span>
</li> </div>
</ul> </li>
</div> </ul>
{% if w.results|length > 0 %}
<div class="objective_results objective_results__without-objectives">
<div class="obj without_objective">
<p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p>
<p class="chill-no-data-statement">{{ 'accompanying_course_work.results without objective'|trans }}</p>
</div>
<div class="res results">
<p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
<ul class="result_list">
{% for r in w.results %}
<li class="badge bg-primary">{{ r.title|localize_translatable_string }}</li>
{% endfor %}
</ul>
</div>
</div> </div>
{% endif %} {#
{% if w.results|length > 0 %}
{% if w.goals|length > 0 %} <div class="objective_results objective_results__without-objectives">
{% for g in w.goals %} <div class="obj without_objective">
<div class="objective_results objective_results--with-objectives">
<div class="objective obj">
<p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p> <p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p>
<h4 class="goal_title">{{ g.goal.title|localize_translatable_string }}</h4> <p class="chill-no-data-statement">{{ 'accompanying_course_work.results without objective'|trans }}</p>
</div> </div>
<div class="results res"> <div class="res results">
{% if g.results|length == 0 %} <p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
<p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p> <ul class="result_list">
<p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p> {% for r in w.results %}
{% else %} <li class="badge bg-primary">{{ r.title|localize_translatable_string }}</li>
<p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p> {% endfor %}
<ul class="result_list"> </ul>
{% for r in g.results %}
<li class="badge bg-primary">{{ r.title|localize_translatable_string }}</li>
{% endfor %}
</ul>
{% endif %}
</div> </div>
</div> </div>
{% endfor %} {% endif %}
{% endif %} {% if w.goals|length > 0 %}
{% for g in w.goals %}
<div class="updatedBy"> <div class="objective_results objective_results--with-objectives">
{{ 'Last updated by'|trans}}: {{ w.updatedBy|chill_entity_render_box }}, {{ w.updatedAt|format_datetime('long', 'short') }} <div class="objective obj">
<p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p>
<h4 class="goal_title">{{ g.goal.title|localize_translatable_string }}</h4>
</div>
<div class="results res">
{% if g.results|length == 0 %}
<p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
<p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p>
{% else %}
<p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
<ul class="result_list">
{% for r in g.results %}
<li class="badge bg-primary">{{ r.title|localize_translatable_string }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
{% endfor %}
{% endif %}
#}
</div> </div>
<div class="item-row separator">
<div class="actions"> <div class="updatedBy">
{{ 'Last updated by'|trans}} <b>{{ w.updatedBy|chill_entity_render_box }}</b>, {{ 'le ' ~ w.updatedAt|format_datetime('long', 'short') }}
</div>
<ul class="record_actions"> <ul class="record_actions">
<li> <li>
<a <a class="btn btn-edit"
class="btn btn-edit" href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}">
href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}">{{ 'Edit'|trans }}</a> {{ 'Edit'|trans }}
</a>
</li> </li>
</ul> </ul>
</div> </div>
</div>
{% else %}
<p class="chill-no-data-statement">{{ 'accompanying_course_work.Any work'|trans }}</p>
{% endfor %}
</div>
{% endfor %}
</div>
<ul class="record_actions sticky-form-buttons"> <ul class="record_actions sticky-form-buttons">
<li> <li>
@ -120,3 +124,4 @@
</div> </div>
{% endblock %} {% endblock %}

View File

@ -113,18 +113,18 @@
{# TODO if enable_accompanying_course_with_multiple_persons is true ... #} {# TODO if enable_accompanying_course_with_multiple_persons is true ... #}
<li> <li>
<a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': accompanying_period.id }) }}" <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': accompanying_period.id }) }}"
class="btn btn-sm btn-show" title="{{ 'See accompanying period'|trans }}">{# {{ 'See this period'|trans }} #}</a> class="btn btn-show" title="{{ 'See accompanying period'|trans }}">{# {{ 'See this period'|trans }} #}</a>
</li> </li>
{% if person is defined %} {% if person is defined %}
<li> <li>
<a href="{{ path('chill_person_accompanying_period_update', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}" <a href="{{ path('chill_person_accompanying_period_update', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}"
class="btn btn-sm btn-update" title="{{ 'Edit accompanying period'|trans }}"></a> class="btn btn-update" title="{{ 'Edit accompanying period'|trans }}"></a>
</li> </li>
{% if accompanying_period.isOpen == true %} {% if accompanying_period.isOpen == true %}
<li> <li>
<a href="{{ path('chill_person_accompanying_period_close', {'person_id' : person.id}) }}" <a href="{{ path('chill_person_accompanying_period_close', {'person_id' : person.id}) }}"
class="btn btn-sm btn-update change-icon"> class="btn btn-update change-icon">
<i class="fa fa-fw fa-lock" aria-hidden="true"></i> <i class="fa fa-fw fa-lock" aria-hidden="true"></i>
{{'Close accompanying period'|trans }} {{'Close accompanying period'|trans }}
</a> </a>
@ -133,7 +133,7 @@
{% if accompanying_period.canBeReOpened(person) == true %} {% if accompanying_period.canBeReOpened(person) == true %}
<li> <li>
<a href="{{ path('chill_person_accompanying_period_re_open', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}" <a href="{{ path('chill_person_accompanying_period_re_open', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}"
class="btn btn-sm btn-create change-icon"> class="btn btn-create change-icon">
<i class="fa fa-fw fa-unlock" aria-hidden="true"></i> <i class="fa fa-fw fa-unlock" aria-hidden="true"></i>
{{'Re-open accompanying period'|trans }} {{'Re-open accompanying period'|trans }}
</a> </a>

View File

@ -33,11 +33,11 @@ class SocialActionRender implements ChillEntityRenderInterface
{ {
return $entity instanceof SocialAction; return $entity instanceof SocialAction;
} }
public function renderString($socialAction, array $options): string public function renderString($socialAction, array $options): string
{ {
/** @var $socialAction SocialAction */ /** @var $socialAction SocialAction */
$options = \array_merge(self::DEFAULT_ARGS, $options); $options = \array_merge(self::DEFAULT_ARGS, $options);
$titles[] = $this->translatableStringHelper->localize($socialAction->getTitle()); $titles[] = $this->translatableStringHelper->localize($socialAction->getTitle());
while ($socialAction->hasParent()) { while ($socialAction->hasParent()) {
@ -60,11 +60,11 @@ class SocialActionRender implements ChillEntityRenderInterface
} }
return $parents; return $parents;
} }
public function renderBox($socialAction, array $options): string public function renderBox($socialAction, array $options): string
{ {
$options = \array_merge(self::DEFAULT_ARGS, $options); $options = \array_merge(self::DEFAULT_ARGS, $options);
// give some help to twig: an array of parents // give some help to twig: an array of parents
$parents = $this->buildParents($socialAction); $parents = $this->buildParents($socialAction);