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 {
.item {
margin-bottom: 1.5rem;
padding: 1rem;
border: 1px solid gray;
.title_label {
display: block;
margin: 0;
font-size: 0.8rem;
}
font-variant-caps: small-caps;
h2.action_title {
margin-top: 0;
+ * {
margin-top: 0;
}
}
.objective_results {
@ -19,8 +22,10 @@
grid-template-areas:
"obj res"
;
grid-columns: 50%;
grid-template-columns: 50%;
column-gap: 1rem;
padding: 0.3rem;
.obj {
grid-area: obj;
@ -28,8 +33,64 @@
.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 class="timeline">
<ul>
<li>
<span class="label">{{ 'accompanying_course_work.create_date'|trans }}</span>
<ul class="timeline">
<li class="completed">
<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>
</ul>
</div>
{% 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">
{{ '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 class="res results">
<p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p>
<ul>
<p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
<ul class="result_list">
{% for r in w.results %}
<li>{{ r.title|localize_translatable_string }}</li>
<li class="badge badge-primary">{{ r.title|localize_translatable_string }}</li>
{% endfor %}
</ul>
</div>
@ -41,35 +63,40 @@
{% endif %}
{% if w.goals|length > 0 %}
<div class="objective_results objective_results--with-objectives">
{% for g in w.goals %}
<div class="objective">
{% for g in w.goals %}
<div class="objective_results objective_results--with-objectives">
<div class="objective obj">
<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 class="results">
<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.result'|trans }}</p>
<ul>
<p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
<ul class="result_list">
{% for r in g.results %}
<li>{{ r.title|localize_translatable_string }}</li>
<li class="badge badge-primary">{{ r.title|localize_translatable_string }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endfor %}
{% endif %}
<div class="updatedBy">
{{ 'Last updated by'|trans}}: {{ w.updatedBy|chill_entity_render_box }}, {{ w.updatedAt|format_datetime('long', 'short') }}
</div>
<div class="actions">
<ul class="record_actions">
<li>
<a href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}">
Work with id {{ w.id }}
</a>
<a
class="sc-button bt-edit"
href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}">{{ 'Update'|trans }}</a>
</li>
</ul>
</div>

View File

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