Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 13:24:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

Accourse Work list: improve design

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-08-22 10:34:14 +02:00
parent 3bffde6123
commit b79c1f02da
4 changed files with 96 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss
View File

@ -1,10 +1,6 @@
/// AccompanyingCourse Work list Page /// AccompanyingCourse Work list Page
div.accompanying_course_work-list { div.accompanying_course_work-list {
// ?? howto calculate border:groove generated from $orange ??
// see mixin badge_social_action
$groove-border-color-connect: #965028;
h2.title { h2.title {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -14,13 +10,13 @@ div.accompanying_course_work-list {
span.title_label { span.title_label {
border-radius: 0.35rem 0 0 0.35rem; border-radius: 0.35rem 0 0 0.35rem;
background-color: $groove-border-color-connect; background-color: $social-action-label-color;
color: $white; color: $white;
font-size: 80%; font-size: 80%;
padding: 0.5em; padding: 0.5em;
padding-right: 0; padding-right: 0;
} }
span.action_title { span.title_action {
flex-grow: 1; flex-grow: 1;
margin: 0 0 0 auto; margin: 0 0 0 auto;
border-radius: 0 0.35rem 0.35rem 0; border-radius: 0 0.35rem 0.35rem 0;
@ -36,39 +32,36 @@ div.accompanying_course_work-list {
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 {
flex-grow: 1; flex-shrink: 1; flex-basis: auto; flex-grow: 1; flex-shrink: 1; flex-basis: auto;
min-width: 210px;
div.date { div {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
div.label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0 40px; &.date {
border-top: 3px solid var(--bs-chill-green); margin-bottom: 1em;
}
&.label {
border-top: 3px solid $chill-green;
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 12px; width: 15px;
height: 12px; height: 15px;
top: -9px;
background-color: white; background-color: $white;
border-radius: 12px; border-radius: 12px;
border: 2px solid var(--bs-chill-green); border: 2px solid $chill-green;
}
top: -9px;
} }
} }
} }
@ -76,41 +69,65 @@ div.accompanying_course_work-list {
} }
div.objective_results { div.objective_results {
display: grid;
width: 100%; width: 100%;
grid-template-areas: display: grid;
"obj res" grid-template-areas: "obj res";
;
grid-template-columns: 50%; grid-template-columns: 50%;
column-gap: 1rem; column-gap: 0.5rem;
padding: 0.3rem; padding: 0.3rem;
.obj {
div.objective {
grid-area: obj; grid-area: obj;
} h4.title_label {
.res { border-radius: 0.35rem 0 0 0.35rem;
grid-area: res;
ul.result_list {
list-style-type: none;
padding: 0;
} }
} }
&:nth-child(2n+2) { div.results {
background-color: var(--bs-chill-llight-gray); 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 { h4.title_label {
padding-bottom: 0; display: block;
ul.record_actions { 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; 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 { .updatedBy {
margin-top: 1rem; margin-top: 0.3rem;
text-align: right;
font-size: 0.9rem; font-size: 0.9rem;
font-style: italic; font-style: italic;
} }

10
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
View File

@ -1,6 +1,14 @@
$social-issue-color: #4bafe8; // Additionnal colors
$sky-blue: #4bafe8;
// mixins variables
$social-issue-color: $sky-blue;
$social-action-color: $orange; $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 /// Social Issue mixin
// define visual badge for all social issues // define visual badge for all social issues

2
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
View File

@ -135,7 +135,7 @@
<div class="item"> <div class="item">
<div class="title"> <div class="title">
<p class="title_label">{{ 'accompanying_course_work.action'|trans }}</p > <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 }) }} {{ w.socialAction|chill_entity_render_box({ 'no-badge': false }) }}
</h2> </h2>
</div> </div>

39
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_by_accompanying_period.html.twig
View File

@ -18,12 +18,12 @@
<h2 class="title"> <h2 class="title">
<span class="title_label">{{ 'accompanying_course_work.action'|trans }}</span> <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> </h2>
</div> </div>
<div class="item-row separator"> <div class="item-row separator">
<div class="timeline"> <div class="timeline">
<ul> <ul>
<li class="completed"> <li class="completed">
@ -54,19 +54,22 @@
</div> </div>
</div> </div>
<div class="item-row"> <div class="">
{% if w.results|length > 0 and w.goals|length > 0 %}
{% endif %}
{% if w.results|length > 0 %} {% if w.results|length > 0 %}
<div class="objective_results objective_results__without-objectives"> <div class="objective_results without-objectives">
<div class="obj without_objective"> <div class="objective">
<p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p> <h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
<p class="chill-no-data-statement">{{ 'accompanying_course_work.results without objective'|trans }}</p> <p class="chill-no-data-statement">{{ 'accompanying_course_work.results without objective'|trans }}</p>
</div> </div>
<div class="res results"> <div class="results">
<p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p> <h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
<ul class="result_list"> <ul class="result_list">
{% for r in w.results %} {% for r in w.results %}
<li class="badge bg-primary">{{ r.title|localize_translatable_string }}</li> <li>{{ r.title|localize_translatable_string }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
@ -74,20 +77,19 @@
{% endif %} {% endif %}
{% if w.goals|length > 0 %} {% if w.goals|length > 0 %}
{% for g in w.goals %} {% for g in w.goals %}
<div class="objective_results objective_results--with-objectives"> <div class="objective_results with-objectives">
<div class="objective obj"> <div class="objective">
<p class="title_label">{{ 'accompanying_course_work.goal'|trans }}</p> <h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
<h4 class="goal_title">{{ g.goal.title|localize_translatable_string }}</h4> <ul class="goal_title"><li>{{ g.goal.title|localize_translatable_string }}</li></ul>
</div> </div>
<div class="results res"> <div class="results">
<h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
{% if g.results|length == 0 %} {% 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> <p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p>
{% else %} {% else %}
<p class="title_label">{{ 'accompanying_course_work.results'|trans }}</p>
<ul class="result_list"> <ul class="result_list">
{% for r in g.results %} {% for r in g.results %}
<li class="badge bg-primary">{{ r.title|localize_translatable_string }}</li> <li>{{ r.title|localize_translatable_string }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}
@ -100,7 +102,8 @@
<div class="item-row separator"> <div class="item-row separator">
<div class="updatedBy"> <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> </div>
<ul class="record_actions"> <ul class="record_actions">
<li> <li>