improve flex-table logic, with accompanying period list template

This commit is contained in:
2021-08-01 18:38:31 +02:00
parent d34a00b2c0
commit ee819e7767
10 changed files with 180 additions and 147 deletions

View File

@@ -4,29 +4,24 @@
/*
* PERSON CONTEXT
*/
div#header-person-name {
background: none repeat scroll 0 0 $chill-green-dark;
color: $white;
padding-top: 1em;
padding-bottom: 1em;
}
div#header-person-details {
background: none repeat scroll 0 0 $chill-green;
color: $white;
padding-top: 1em;
padding-bottom: 1em;
div.contact {
& > * {
margin-right: 1em;
}
}
}
div#person_details_container {
padding-top: 20px;
padding-bottom: 20px;
div.banner {
div#header-person-name {
background: none repeat scroll 0 0 $chill-green-dark;
color: $white;
padding-top: 1em;
padding-bottom: 1em;
}
div#header-person-details {
background: none repeat scroll 0 0 $chill-green;
color: $white;
padding-top: 1em;
padding-bottom: 1em;
div.contact {
& > * {
margin-right: 1em;
}
}
}
}
div.person-view {
@@ -83,83 +78,77 @@ div.person-view {
* ACCOMPANYING_COURSE CONTEXT
* Header custom for Accompanying Course
*/
$chill-accourse: #718596;
$chill-accourse-context: #718596;
div#header-accompanying_course-name {
background: none repeat scroll 0 0 $chill-accourse;
color: $white;
h1 {
margin: 0.4em 0;
}
span {
a {
color: $white;
div.banner {
div#header-accompanying_course-name {
background: none repeat scroll 0 0 $chill-accourse-context;
color: $white;
h1 {
margin: 0.4em 0;
}
a:hover {
text-decoration: underline;
span {
a {
color: $white;
}
a:hover {
text-decoration: underline;
}
}
}
}
div#header-accompanying_course-details {
background: none repeat scroll 0 0 tint-color($chill-accourse, 20%);
color: $white;
padding-top: 1em;
padding-bottom: 1em;
}
// flex-table precision
div.accompanyingcourse-resume {
div.associated-persons {
.flex-table .item-row .item-col:first-child { flex-basis: 33%; }
div#header-accompanying_course-details {
background: none repeat scroll 0 0 tint-color($chill-accourse-context, 20%);
color: $white;
padding-top: 1em;
padding-bottom: 1em;
}
}
/*
* HOUSEHOLD CONTEXT
* Header custom for Household
*/
$chill-household: #929d69;
$chill-household-context: #929d69;
div#header-household-name {
background: none repeat scroll 0 0 $chill-household;
color: $white;
h1 {
margin: 0.4em 0;
}
span {
a {
color: $white;
div.banner {
div#header-household-name {
background: none repeat scroll 0 0 $chill-household-context;
color: $white;
h1 {
margin: 0.4em 0;
}
a:hover {
text-decoration: underline;
span {
a {
color: $white;
}
a:hover {
text-decoration: underline;
}
}
div.household-members {
display: flex;
flex-direction: row;
flex-wrap: wrap;
span.badge-member {
flex-shrink: 0; flex-grow: 0; flex-basis: auto;
color: $white;
border: 1px solid #ffffff3b;
border-radius: 8px;
padding: 0.4em 0.8em;
margin-bottom: 0.2em;
margin-right: 0.3em;
&.holder { order: -1; }
&.child { order: 2; }
}
}
}
div.household-members {
display: flex;
flex-direction: row;
flex-wrap: wrap;
span.badge-member {
flex-shrink: 0; flex-grow: 0; flex-basis: auto;
color: $white;
border: 1px solid #ffffff3b;
border-radius: 8px;
padding: 0.4em 0.8em;
margin-bottom: 0.2em;
margin-right: 0.3em;
&.holder { order: -1; }
&.child { order: 2; }
div#header-household-details {
background: none repeat scroll 0 0 tint-color($chill-household-context, 15%);
color: $white;
padding-top: 1em;
padding-bottom: 1em;
span.current-members-explain {
font-weight: bold;
}
}
}
div#header-household-details {
background: none repeat scroll 0 0 tint-color($chill-household, 15%);
color: $white;
padding-top: 1em;
padding-bottom: 1em;
span.current-members-explain {
font-weight: bold;
}
}

View File

@@ -8,6 +8,7 @@ require('./scss/household_banner.scss');
require('./scss/accompanying_period_work.scss');
require('./scss/person_by_phonenumber.scss');
require('./scss/render_box.scss');
require('./scss/flex_table.scss');
require('./scss/address_history.scss');
require('./svg/phone-alt-solid.svg');

View File

@@ -0,0 +1,31 @@
/*
* flex-table overwrite: precision and exceptions
*/
///
div.accompanyingcourse-resume {
div.associated-persons {
.flex-table .item-row .item-col:first-child {
flex-basis: 33%;
}
}
}
///
div.accompanyingcourse-list, div.household-members {
.flex-table .item-bloc .item-row {
&:nth-child(2) {
flex-direction: row;
}
&:last-child {
flex-direction: column;
}
}
}
///
div.list-with-period {
div.flex-table div.item-row div.item-col:first-child {
flex-basis: 33%;
}
}

View File

@@ -1,11 +1,6 @@
/// overwrite flex-table
div.list-with-period {
div.flex-table div.item-row div.item-col:first-child { flex-basis: 33%; }
}
///
div.list-with-period,
div.list-household-members {
div.list-with-period, div.list-household-members {
div.periods {
div.header,