ac work, design

This commit is contained in:
Mathieu Jaumotte 2021-08-21 20:29:42 +02:00
parent 4ad6786bf2
commit 37b73931c4
2 changed files with 91 additions and 95 deletions

View File

@ -1,7 +1,4 @@
/// AccompanyingCourse Work list Page
div.accompanying_course_work-list {
// ?? howto calculate border:groove generated from $orange ??
@ -33,95 +30,90 @@ div.accompanying_course_work-list {
}
}
/*
div.timeline {
width: 100%;
ul {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
list-style-type: none;
> li {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
min-width: 210px;
.objective_results {
display: grid;
grid-template-areas:
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);
&:before {
content: '';
display: inline-block;
position: relative;
width: 12px;
height: 12px;
background-color: white;
border-radius: 12px;
border: 2px solid var(--bs-chill-green);
top: -9px;
}
}
}
}
}
div.objective_results {
display: grid;
width: 100%;
grid-template-areas:
"obj res"
;
grid-template-columns: 50%;
column-gap: 1rem;
padding: 0.3rem;
.obj {
grid-area: obj;
}
.res {
grid-area: res;
ul.result_list {
list-style-type: none;
padding: 0;
;
grid-template-columns: 50%;
column-gap: 1rem;
padding: 0.3rem;
.obj {
grid-area: obj;
}
}
}
.objective_results:nth-child(2n+2) {
background-color: var(--bs-chill-llight-gray);
}
}
&.short {
.item {
padding-bottom: 0;
ul.record_actions {
margin-bottom: 0;
}
}
}
*/
.updatedBy {
margin-top: 1rem;
text-align: right;
font-size: 0.9rem;
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: 3px solid var(--bs-chill-green);
&:before {
content: '';
display: inline-block;
position: relative;
width: 12px;
height: 12px;
background-color: white;
border-radius: 12px;
border: 2px solid var(--bs-chill-green);
top: -9px;
.res {
grid-area: res;
ul.result_list {
list-style-type: none;
padding: 0;
}
}
&:nth-child(2n+2) {
background-color: var(--bs-chill-llight-gray);
}
}
}
}
&.short {
.item {
padding-bottom: 0;
ul.record_actions {
margin-bottom: 0;
}
}
}
.updatedBy {
margin-top: 1rem;
text-align: right;
font-size: 0.9rem;
font-style: italic;
}
}

View File

@ -14,17 +14,18 @@
<div class="flex-table">
{% for w in works %}
<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>
<div class="item-row separator">
<div class="timeline">
<ul class="timeline">
<ul>
<li class="completed">
<div class="date">
<span>{{ w.createdAt|format_date('long') }}</span>
@ -51,7 +52,10 @@
</li>
</ul>
</div>
{#
</div>
<div class="item-row">
{% if w.results|length > 0 %}
<div class="objective_results objective_results__without-objectives">
<div class="obj without_objective">
@ -91,10 +95,10 @@
</div>
{% endfor %}
{% endif %}
#}
</div>
</div>
<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>
@ -106,8 +110,8 @@
</a>
</li>
</ul>
</div>
</div>
</div>
{% endfor %}
</div>