mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Accourse Work list: improve design
This commit is contained in:
parent
3bffde6123
commit
b79c1f02da
@ -1,10 +1,6 @@
|
||||
/// AccompanyingCourse Work list Page
|
||||
div.accompanying_course_work-list {
|
||||
|
||||
// ?? howto calculate border:groove generated from $orange ??
|
||||
// see mixin badge_social_action
|
||||
$groove-border-color-connect: #965028;
|
||||
|
||||
h2.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -14,13 +10,13 @@ div.accompanying_course_work-list {
|
||||
|
||||
span.title_label {
|
||||
border-radius: 0.35rem 0 0 0.35rem;
|
||||
background-color: $groove-border-color-connect;
|
||||
background-color: $social-action-label-color;
|
||||
color: $white;
|
||||
font-size: 80%;
|
||||
padding: 0.5em;
|
||||
padding-right: 0;
|
||||
}
|
||||
span.action_title {
|
||||
span.title_action {
|
||||
flex-grow: 1;
|
||||
margin: 0 0 0 auto;
|
||||
border-radius: 0 0.35rem 0.35rem 0;
|
||||
@ -36,39 +32,36 @@ div.accompanying_course_work-list {
|
||||
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;
|
||||
|
||||
div.date {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
div.label {
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding: 0 40px;
|
||||
border-top: 3px solid var(--bs-chill-green);
|
||||
&.date {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
&.label {
|
||||
border-top: 3px solid $chill-green;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: -9px;
|
||||
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--bs-chill-green);
|
||||
|
||||
top: -9px;
|
||||
background-color: $white;
|
||||
border-radius: 12px;
|
||||
border: 2px solid $chill-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -76,41 +69,65 @@ div.accompanying_course_work-list {
|
||||
}
|
||||
|
||||
div.objective_results {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-areas:
|
||||
"obj res"
|
||||
;
|
||||
display: grid;
|
||||
grid-template-areas: "obj res";
|
||||
grid-template-columns: 50%;
|
||||
column-gap: 1rem;
|
||||
column-gap: 0.5rem;
|
||||
padding: 0.3rem;
|
||||
.obj {
|
||||
|
||||
div.objective {
|
||||
grid-area: obj;
|
||||
}
|
||||
.res {
|
||||
grid-area: res;
|
||||
ul.result_list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
h4.title_label {
|
||||
border-radius: 0.35rem 0 0 0.35rem;
|
||||
}
|
||||
}
|
||||
&:nth-child(2n+2) {
|
||||
background-color: var(--bs-chill-llight-gray);
|
||||
div.results {
|
||||
grid-area: res;
|
||||
h4.title_label {
|
||||
border-radius: 0 0.35rem 0.35rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
//&:nth-child(even) { background-color: $chill-llight-gray; }
|
||||
&.without-objectives {}
|
||||
&.with-objectives {}
|
||||
|
||||
&.short {
|
||||
.item {
|
||||
padding-bottom: 0;
|
||||
ul.record_actions {
|
||||
|
||||
h4.title_label {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0.1em 0.5em;
|
||||
font-variant-caps: small-caps;
|
||||
background-color: $light;
|
||||
+ * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
&.goal_title,
|
||||
&.result_list {
|
||||
padding-left: 1em;
|
||||
margin-bottom: 0;
|
||||
li {
|
||||
padding-left: 0.3em;
|
||||
&::marker {
|
||||
content: '→';
|
||||
font-weight: bold;
|
||||
font-size: 120%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.goal_title li::marker {
|
||||
color: $sky-blue;
|
||||
}
|
||||
&.result_list li::marker {
|
||||
color: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updatedBy {
|
||||
margin-top: 1rem;
|
||||
text-align: right;
|
||||
margin-top: 0.3rem;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
$social-issue-color: #4bafe8;
|
||||
// Additionnal colors
|
||||
$sky-blue: #4bafe8;
|
||||
|
||||
// mixins variables
|
||||
$social-issue-color: $sky-blue;
|
||||
$social-action-color: $orange;
|
||||
|
||||
// Calculate same color then border:groove
|
||||
// origin: $orange, computed: #965028
|
||||
$social-action-label-color: shade-color($orange, 34%);
|
||||
|
||||
///
|
||||
/// Social Issue mixin
|
||||
// define visual badge for all social issues
|
||||
|
||||
@ -135,7 +135,7 @@
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
<p class="title_label">{{ 'accompanying_course_work.action'|trans }}</p >
|
||||
<h2 class="action_title">
|
||||
<h2 class="title_action">
|
||||
{{ w.socialAction|chill_entity_render_box({ 'no-badge': false }) }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
@ -18,12 +18,12 @@
|
||||
|
||||
<h2 class="title">
|
||||
<span class="title_label">{{ 'accompanying_course_work.action'|trans }}</span>
|
||||
<span class="action_title">{{ w.socialAction|chill_entity_render_string }}</span>
|
||||
<span class="title_action">{{ w.socialAction|chill_entity_render_string }}</span>
|
||||
</h2>
|
||||
|
||||
</div>
|
||||
<div class="item-row separator">
|
||||
|
||||
|
||||
<div class="timeline">
|
||||
<ul>
|
||||
<li class="completed">
|
||||
@ -54,19 +54,22 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<div class="">
|
||||
|
||||
{% if w.results|length > 0 and w.goals|length > 0 %}
|
||||
|
||||
{% endif %}
|
||||
{% 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>
|
||||
<div class="objective_results without-objectives">
|
||||
<div class="objective">
|
||||
<h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
|
||||
<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>
|
||||
<div class="results">
|
||||
<h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
|
||||
<ul class="result_list">
|
||||
{% for r in w.results %}
|
||||
<li class="badge bg-primary">{{ r.title|localize_translatable_string }}</li>
|
||||
<li>{{ r.title|localize_translatable_string }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@ -74,20 +77,19 @@
|
||||
{% 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 class="objective_results with-objectives">
|
||||
<div class="objective">
|
||||
<h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
|
||||
<ul class="goal_title"><li>{{ g.goal.title|localize_translatable_string }}</li></ul>
|
||||
</div>
|
||||
<div class="results res">
|
||||
<div class="results">
|
||||
<h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
|
||||
{% 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>
|
||||
<li>{{ r.title|localize_translatable_string }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
@ -100,7 +102,8 @@
|
||||
<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') }}
|
||||
{{ 'Last updated by'|trans}} <b>{{ w.updatedBy|chill_entity_render_box }}</b>,<br>
|
||||
{{ 'le ' ~ w.updatedAt|format_datetime('long', 'short') }}
|
||||
</div>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user