address history: improve template, insert buttons with validFrom/validTo difference

This commit is contained in:
2021-07-30 17:28:51 +02:00
parent e8e4dbef1f
commit b683e60cf7
9 changed files with 226 additions and 162 deletions

View File

@@ -159,85 +159,4 @@ div.household-members {
}
}
/*
* ADDRESS HISTORY
* context person / household
*/
div.address-timeline.grid {
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: auto 120px auto;
@media only screen and (max-width: 750px) {
grid-template-columns: auto 1em auto;
}
div.top {
grid-column: 2;
text-align: center;
color: lightgrey;
margin-bottom: -20px;
}
div.col-a {
grid-column: 1;
text-align: right;
}
div.col-b,
div.date {
grid-column: 2;
position: relative;
&:after {
position: absolute;
content: '';
top: 0; bottom: 0;
left: 50%;
margin: auto -5px;
width: 10px;
height: 100%;
background-color: lightgrey;
z-index: -5;
}
}
div.col-c {
grid-column: 3;
}
div.col-b,
div.action,
div.content {
min-height: 30px;
padding: 1em;
}
div.content {
margin: 0.3em;
border: 1px dashed #00000045;
&.row1 { // current address
border: 1px solid #000;
}
div.address {
font-variant: small-caps;
}
}
div.date {
text-align: center;
background-color: lightgrey;
padding: 0.5em;
border-radius: 0.3em;
}
div.span2 { grid-row: span 3; }
div.span3 { grid-row: span 5; }
div.span4 { grid-row: span 7; }
div.span5 { grid-row: span 9; }
ul.record_actions {
margin: 0;
}
.fake {
&:after {
content: 'fake, just to test.. ';
color: lightgrey;
font-style: italic;
}
}
}

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/address_history.scss');
require('./svg/phone-alt-solid.svg');
require('./svg/mobile-alt-solid.svg');

View File

@@ -0,0 +1,88 @@
/*
* ADDRESS HISTORY
* context person / household
*/
div.address-timeline.grid {
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: auto 120px auto;
div.household-address & {
// no col-a in this context !
grid-template-columns: 0 120px auto;
}
@media only screen and (max-width: 750px) {
grid-template-columns: auto 1em auto;
}
div.top {
grid-column: 2;
text-align: center;
color: lightgrey;
margin-bottom: -20px;
}
div.col-a {
grid-column: 1;
text-align: right;
}
div.col-b,
div.date {
grid-column: 2;
position: relative;
&:after {
position: absolute;
content: '';
top: 0; bottom: 0;
left: 50%;
margin: auto -5px;
width: 10px;
height: 100%;
background-color: lightgrey;
z-index: -5;
}
}
div.col-c {
grid-column: 3;
}
div.col-b,
div.action,
div.content {
min-height: 30px;
padding: 1em;
}
div.content {
margin: 0.3em;
border: 1px dashed #00000045;
&.row1 { // current address
border: 1px solid #000;
}
div.address {
font-variant: small-caps;
}
}
div.date {
text-align: center;
background-color: lightgrey;
padding: 0.5em;
border-radius: 0.3em;
}
div.span2 { grid-row: span 3; }
div.span3 { grid-row: span 5; }
div.span4 { grid-row: span 7; }
div.span5 { grid-row: span 9; }
ul.record_actions {
margin: 0;
}
.fake {
&:after {
content: 'fake, just to test.. ';
color: lightgrey;
font-style: italic;
}
}
}