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 {
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 %}
|
||||||
|
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user