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 {
.item {
margin-bottom: 1.5rem;
padding: 1rem;
border: 1px solid gray;
// ?? howto calculate border:groove generated from $orange ??
// see mixin badge_social_action
$groove-border-color-connect: #965028;
.title_label {
display: block;
margin: 0;
h2.title {
display: flex;
flex-direction: row;
width: 100%;
color: $dark;
height: 40px;
font-variant-caps: small-caps;
+ * {
margin-top: 0;
span.title_label {
border-radius: 0.35rem 0 0 0.35rem;
background-color: $groove-border-color-connect;
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 {
display: grid;
grid-template-areas:
@ -61,15 +74,16 @@ div.accompanying_course_work-list {
}
}
*/
.updatedBy {
margin-top: 1rem;
text-align: right;
font-size: 0.8rem;
font-size: 0.9rem;
font-style: italic;
}
}
ul.timeline {
ul.timeline {
display: flex;
align-items: center;
justify-content: center;
@ -108,4 +122,6 @@ ul.timeline {
}
}
}
}
}

View File

@ -2,22 +2,27 @@
{% block title 'accompanying_course_work.List accompanying course work'|trans %}
{% block content %}
<div class="accompanying_course_work-list">
<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 %}
<div class="item">
<div class="title">
<p class="title_label">{{ 'accompanying_course_work.action'|trans }}</p >
<h2 class="action_title">
{{ w.socialAction|chill_entity_render_box }}
<div class="item-bloc">
<div class="item-row">
<h2 class="title">
<span class="title_label">{{ 'accompanying_course_work.action'|trans }}</span>
<span class="action_title">{{ w.socialAction|chill_entity_render_string }}</span>
</h2>
</div>
<div class="item-row separator">
<div class="timeline">
<ul class="timeline">
<li class="completed">
@ -46,7 +51,7 @@
</li>
</ul>
</div>
{#
{% if w.results|length > 0 %}
<div class="objective_results objective_results__without-objectives">
<div class="obj without_objective">
@ -63,7 +68,6 @@
</div>
</div>
{% endif %}
{% if w.goals|length > 0 %}
{% for g in w.goals %}
<div class="objective_results objective_results--with-objectives">
@ -87,26 +91,26 @@
</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">
<div class="item-row separator">
<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">
<li>
<a
class="btn btn-edit"
href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}">{{ 'Edit'|trans }}</a>
<a class="btn btn-edit"
href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}">
{{ 'Edit'|trans }}
</a>
</li>
</ul>
</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">
<li>
@ -120,3 +124,4 @@
</div>
{% endblock %}

View File

@ -113,18 +113,18 @@
{# TODO if enable_accompanying_course_with_multiple_persons is true ... #}
<li>
<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>
{% if person is defined %}
<li>
<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>
{% if accompanying_period.isOpen == true %}
<li>
<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>
{{'Close accompanying period'|trans }}
</a>
@ -133,7 +133,7 @@
{% if accompanying_period.canBeReOpened(person) == true %}
<li>
<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>
{{'Re-open accompanying period'|trans }}
</a>