layout for list accompanying work

This commit is contained in:
Julien Fastré 2021-06-25 21:25:27 +02:00
parent cb67605bd2
commit c85ca894b8
3 changed files with 120 additions and 30 deletions

View File

@ -2,16 +2,19 @@
#accompanying_course_work_list { #accompanying_course_work_list {
.item { .item {
margin-bottom: 1.5rem;
padding: 1rem;
border: 1px solid gray;
.title_label { .title_label {
display: block; display: block;
margin: 0; margin: 0;
font-size: 0.8rem; font-variant-caps: small-caps;
}
h2.action_title { + * {
margin-top: 0; margin-top: 0;
}
} }
.objective_results { .objective_results {
@ -19,8 +22,10 @@
grid-template-areas: grid-template-areas:
"obj res" "obj res"
; ;
grid-columns: 50%; grid-template-columns: 50%;
column-gap: 1rem; column-gap: 1rem;
padding: 0.3rem;
.obj { .obj {
grid-area: obj; grid-area: obj;
@ -28,8 +33,64 @@
.res { .res {
grid-area: res; grid-area: res;
ul.result_list {
list-style-type: none;
padding: 0;
}
} }
} }
.objective_results:nth-child(2n+2) {
background-color: var(--chill-llight-gray);
}
} }
.updatedBy {
margin-top: 1rem;
text-align: right;
font-size: 0.8rem;
font-style: italic;
}
}
ul.timeline {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
list-style-type: none;
> li {
min-width: 210px;
div.date {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
div.label {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 40px;
border-top: 2px solid var(--chill-green);
&:before {
content: '';
display: inline-block;
position: relative;
width: 25px;
height: 25px;
background-color: white;
border-radius: 25px;
border: 1px solid #ddd;
top: -15px;
}
}
}
} }

View File

@ -17,23 +17,45 @@
</div> </div>
<div class="timeline"> <div class="timeline">
<ul> <ul class="timeline">
<li> <li class="completed">
<span class="label">{{ 'accompanying_course_work.create_date'|trans }}</span> <div class="date">
<span>{{ w.createdAt|format_date('long') }}</span>
</div>
<div class="label">
<span>{{ 'accompanying_course_work.create_date'|trans }}</span>
</div>
</li>
<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>
<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> </li>
</ul> </ul>
</div> </div>
{% if w.results|length > 0 %} {% if w.results|length > 0 %}
<div class="objective_results objective_results--without-objectives"> <div class="objective_results objective_results__without-objectives">
<div class="obj without_objective"> <div class="obj without_objective">
{{ 'accompanying_course_work.results without objective'|trans }} <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>
<div class="res results"> <div class="res results">
<p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p> <p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
<ul> <ul class="result_list">
{% for r in w.results %} {% for r in w.results %}
<li>{{ r.title|localize_translatable_string }}</li> <li class="badge badge-primary">{{ r.title|localize_translatable_string }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
@ -41,35 +63,40 @@
{% endif %} {% endif %}
{% if w.goals|length > 0 %} {% if w.goals|length > 0 %}
<div class="objective_results objective_results--with-objectives"> {% for g in w.goals %}
{% for g in w.goals %} <div class="objective_results objective_results--with-objectives">
<div class="objective"> <div class="objective obj">
<p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p> <p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p>
<h3>{{ g.goal.title|localize_translatable_string }}</h3> <h3 class="goal_title">{{ g.goal.title|localize_translatable_string }}</h3>
</div> </div>
<div class="results"> <div class="results res">
{% if g.results|length == 0 %} {% 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> <p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p>
{% else %} {% else %}
<p class="title_label">{{ 'accompanying_course_work.result'|trans }}</p> <p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
<ul> <ul class="result_list">
{% for r in g.results %} {% for r in g.results %}
<li>{{ r.title|localize_translatable_string }}</li> <li class="badge badge-primary">{{ r.title|localize_translatable_string }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}
</div> </div>
{% endfor %} </div>
</div> {% endfor %}
{% endif %} {% endif %}
<div class="updatedBy">
{{ 'Last updated by'|trans}}: {{ w.updatedBy|chill_entity_render_box }}, {{ w.updatedAt|format_datetime('long', 'short') }}
</div>
<div class="actions"> <div class="actions">
<ul class="record_actions"> <ul class="record_actions">
<li> <li>
<a href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}"> <a
Work with id {{ w.id }} class="sc-button bt-edit"
</a> href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}">{{ 'Update'|trans }}</a>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -339,7 +339,9 @@ accompanying_course_work:
action: Action action: Action
create_date: Date de création create_date: Date de création
start_date: Date de début start_date: Date de début
results without objective: Résultats - orientation sans objectifs - motifs - dispositifs end_date: Date de fin
no_result: Aucun résultat - orientation results without objective: Aucun objectif - motif - dispositif
result: Résultat - orientation no_results: Aucun résultat - orientation
goal: Objectifs - motifs - dispositifs results: Résultats - orientations
goal: Objectif - motif - dispositif