Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-21 23:23:51 +00:00
Code Issues Actions Projects Releases Wiki Activity

Cohérence graphique des listes d'activités et d'actions dans le contexte d'un parcours

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-12-06 14:45:44 +00:00
committed by Julien Fastré
parent 8e6e92ae89
commit 2d1e8b2acd
19 changed files with 561 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,51 +1,6 @@
/// AccompanyingCourse Work list Page
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;
div {
display: flex;
flex-direction: column;
align-items: center;
&.date {
margin-bottom: 1em;
}
&.label {
border-top: 3px solid $chill-green;
&:before {
content: '';
display: inline-block;
position: relative;
width: 15px;
height: 15px;
top: -9px;
background-color: $white;
border-radius: 12px;
border: 2px solid $chill-green;
}
&.no-label:before {
display: none;
}
}
}
}
}
}
div.objective_results {
width: 100%;
display: grid;
@@ -69,8 +24,10 @@ div.accompanying_course_work-list {
//&:nth-child(even) { background-color: $chill-llight-gray; }
&.without-objectives {}
&.with-objectives {}
}
div.objective_results,
div.evaluations {
h4.title_label {
display: block;
margin: 0.4em 0;

129
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
View File

@@ -39,69 +39,15 @@ span.fa-holder {
}
/*
* BADGE_TITLE
* Display Title like a badge (with background-colored label)
* DASHBOARDS
*/
h2.badge-title {
display: flex;
flex-direction: row;
width: 100%;
color: $dark;
span.title_label {
border-radius: 0.35rem 0 0 0.35rem;
color: $white;
font-size: 80%;
padding: 0.5em;
padding-right: 0;
h3 {
margin-bottom: 0.5rem;
}
//position: relative;
span {
display: none;
//position: absolute;
//top: 0;
//left: 0;
//transform: rotate(270deg);
//transform-origin: 0 0;
}
}
span.title_action {
flex-grow: 1;
margin: 0 0 0 auto;
border-radius: 0 0.35rem 0.35rem 0;
background-color: $chill-llight-gray;
padding: 0.2em 1em;
ul.small_in_title {
margin: 0;
//margin-top: 0.5em;
font-size: 70%;
padding-left: 1rem;
&.evaluations {
@include list_marker_triangle($orange);
}
}
ul.columns { // XS:1 SM:2 MD:1 LG:2 XL:2 XXL:2
@include media-breakpoint-only(sm) {
columns: 2; -webkit-columns: 2; -moz-columns: 2;
}
@include media-breakpoint-up(lg) {
columns: 2; -webkit-columns: 2; -moz-columns: 2;
}
}
}
}
/// Theses links apply on badge as parent tag.
/// Theses links apply on dashboards as parent tag.
/// They don't look like button, picto or simple text links
a.badge-link {
a.dashboard-link {
color: unset;
text-decoration: unset;
& > h2.badge-title {
& > div.dashboard {
&:hover {
//box-shadow: 0 0 7px 0 $chill-gray;
//opacity: 0.8;
@@ -114,21 +60,80 @@ a.badge-link {
}
}
/// badge_title in AccompanyingCourse Work list Page
div.dashboard {
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 0.5rem;
line-height: 1.2;
span.like-h3 {
color: #334d5c;
}
}
div.dashboard,
h2.badge-title {
display: flex;
flex-direction: row;
width: 100%;
color: $dark;
span.title_label {
color: $white;
font-size: 80%;
padding: 0.5em;
padding-right: 0;
border-radius: 0.35rem 0 0 0.35rem;
h3 {
margin-bottom: 0.5rem;
}
}
span.title_action {
flex-grow: 1;
margin: 0 0 0 auto;
background-color: $chill-llight-gray;
padding: 0.2em 1em;
border-radius: 0 0.35rem 0.35rem 0;
ul.small_in_title {
font-size: 70%;
}
}
}
ul.small_in_title {
margin: 0;
//margin-top: 0.5em;
padding-left: 1rem;
&.evaluations {
@include list_marker_triangle($orange);
}
}
ul.columns { // XS:1 SM:2 MD:1 LG:2 XL:2 XXL:2
@include media-breakpoint-only(sm) {
columns: 2; -webkit-columns: 2; -moz-columns: 2;
}
@include media-breakpoint-up(lg) {
columns: 2; -webkit-columns: 2; -moz-columns: 2;
}
}
/// dashboard_like_badge in AccompanyingCourse Work list Page
div.accompanying_course_work-list {
div.dashboard,
h2.badge-title {
span.title_label {
// Calculate same color then border:groove
background-color: shade-color($social-action-color, 34%);
}
span.title_action {
@include badge_title($social-action-color);
@include dashboard_like_badge($social-action-color);
}
}
}
/// badge_title in Activities on resume page
/// dashboard_like_badge in Activities on resume page
div.activity-list {
div.dashboard,
h2.badge-title {
span.title_label {
// Calculate same color then border:groove
@@ -138,7 +143,7 @@ div.activity-list {
}
}
span.title_action {
@include badge_title($activity-color);
@include dashboard_like_badge($activity-color);
}
span.title_label {
div.duration {

6
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/flex_table.scss
View File

@@ -18,12 +18,6 @@ div.accompanyingcourse-list {
//&:nth-child(2) { flex-direction: row; }
//&:last-child { flex-direction: column; }
}
div.title h3 {
font-weight: 700;
font-size: 100%;
font-family: 'Open Sans';
}
div.list {}
}
/// Search Page (list_with_period.html.twig)

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

@@ -27,11 +27,10 @@
}
///
/// Generic mixin for titles like badge
// define visual badge used in title area
/// Mixin for dashboards (with design like badge_social)
///
@mixin badge_title($color) {
@mixin dashboard_like_badge($color) {
@include chill_badge($color);
&:before {
margin: 0 0.3em 0 -1.05em;