Search list with periods, html/scss refactoring

This commit is contained in:
2021-05-26 00:09:25 +02:00
parent 6264171c0c
commit 37996651c4
4 changed files with 208 additions and 245 deletions

View File

@@ -1,68 +1,67 @@
.person-list--with-period {
.person-list--with-period__item {
margin-bottom: 0;
padding: 1em 1em 2em 1em;
&:nth-last-of-type {
padding-bottom: 1em;
}
.chill-entity__person {
.chill-entity__person__first-name,
.chill-entity__person__last-name {
font-size: 1.3em;
font-weight: 700;
/// complete and overwrite flex-table in chillmain.scss
div.list-with-period { // .flex-table
div.item-bloc {
margin-bottom: 0;
&:nth-last-of-type {
padding-bottom: 1em;
}
}
& > div {
display: flex;
}
@media screen and (min-width: 720px) {
flex-direction: column; // !!
& > div {
flex-direction: row;
.person-list--with-period__item__box-where {
align-self: flex-end;
margin-left: auto;
width: 33%;
text-align: right;
}
display: flex;
flex-direction: row;
&.person {
div.box-person {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 33%;
}
div.box-where {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 40%;
}
ul.record_actions {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 25%;
li {
margin-right: 0;
}
}
@media only screen and (max-width: 768px) {
flex-direction: column;
}
}
&.periods {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
div.header {
abbr.referrer {
font-size: 70%;
}
span.user {}
}
span.more {
font-style: italic;
}
}
}
}
@media screen and (max-width: 720px) {
& > div {
flex-direction: column;
}
}
@media screen and (max-width: 460px) {
.person-list--with-period__item__box-where__center {
display: none;
}
.chill_address {
.street {
display: none;
}
.country {
display: none;
}
}
}
ul.person-list--with-period__item__periods {
list-style-type: none;
padding: 0;
margin: 0;
li {
}
}
}
.person-list--with-period__item:hover {
background-color: var(--chill-llight-gray);
}
}
}
.chill-entity__person {
.chill-entity__person__first-name,
.chill-entity__person__last-name {
font-size: 1.3em;
font-weight: 700;
}
}