mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-13 13:54:23 +00:00
AccourseWork list : design title
This commit is contained in:
parent
d11c493e2d
commit
4ad6786bf2
@ -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,51 +74,54 @@ 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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
ul.timeline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
> li {
|
||||
min-width: 210px;
|
||||
> 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;
|
||||
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: 3px solid var(--bs-chill-green);
|
||||
padding: 0 40px;
|
||||
border-top: 3px solid var(--bs-chill-green);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--bs-chill-green);
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--bs-chill-green);
|
||||
|
||||
top: -9px;
|
||||
top: -9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,111 +2,115 @@
|
||||
|
||||
{% 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="timeline">
|
||||
<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="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 class="item-row separator">
|
||||
<div class="timeline">
|
||||
<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>
|
||||
{% endif %}
|
||||
|
||||
{% if w.goals|length > 0 %}
|
||||
{% for g in w.goals %}
|
||||
<div class="objective_results objective_results--with-objectives">
|
||||
<div class="objective obj">
|
||||
{#
|
||||
{% 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>
|
||||
<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 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 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>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<div class="updatedBy">
|
||||
{{ 'Last updated by'|trans}}: {{ w.updatedBy|chill_entity_render_box }}, {{ w.updatedAt|format_datetime('long', 'short') }}
|
||||
{% endif %}
|
||||
{% if w.goals|length > 0 %}
|
||||
{% 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>
|
||||
<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 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 %}
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user