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

improve flex-table and flex-box

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-05-26 18:01:58 +02:00
parent 37996651c4
commit 6c8f1f77ff
6 changed files with 368 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
View File

@@ -71,75 +71,102 @@ div#header-accompanying_course-details {
/*
* FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
*/
div.flex-bloc,
div.flex-table {
h2, h3, h4, dl, p {
margin: 0;
}
h2, h3, h4 {
color: var(--chill-blue);
}
}
/// 1. bloc appearance
/*
* Bloc appearance
*/
div.flex-bloc {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
align-content: stretch;
&.right {
justify-content: flex-end;
div.item-bloc {
margin-left: 1em;
margin-right: 0;
}
}
div.item-bloc {
flex-grow: 0; flex-shrink: 1; flex-basis: 50%;
margin: 0;
border: 1px solid #000;
margin-bottom: 1em;
margin-right: 1em;
margin-left: 0;
padding: 1em;
padding-bottom: 0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 30%;
background-color: #e6e6e6;
border-top: 0;
&:nth-child(1), &:nth-child(2) {
border-top: 1px solid #000;
}
border-left: 0;
&:nth-child(odd) {
border-left: 1px solid #000;
}
//background-color: #e6e6e6;
display: flex;
flex-direction: column;
h5 {
margin-top: 0;
margin-bottom: 0.3em;
}
.content-bloc {
margin: 0;
font-size: 80%;
}
dd {
margin: 0.67em auto;
}
ul.record_actions {
margin-top: auto;
margin-bottom: 0;
div.item-row {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
flex-direction: column;
div.item-col {
&:first-child {
flex-grow: 0; flex-shrink: 0; flex-basis: auto;
}
&:last-child {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
.list-content { // ul, dl, or div
}
ul.record_actions {
margin: 0;
align-self: flex-end;
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
li {
margin-right: 5px;
}
}
}
}
}
}
@media only screen and (max-width: 1024px) {
div.item-bloc {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 45%;
}
}
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 945px) { margin: auto -0.2em; }
@media only screen and (max-width: 935px) { margin: auto -0.5em; }
@media only screen and (max-width: 920px) { margin: auto -0.9em; }
@media only screen and (max-width: 900px) {
flex-direction: column;
margin: auto 0;
div.item-bloc {
margin-right: 0;
}
&.right div.item-bloc {
margin-left: 0;
border-left: 1px solid #000;
&:nth-child(2) {
border-top: 0;
}
}
}
}
/// 2. table appearance
/*
* Table appearance
*/
div.flex-table {
display: flex;
flex-direction: column;
align-items: stretch;
align-content: stretch;
div.item-bloc {
display: flex;
flex-direction: column;
padding: 1em;
border: 1px solid #000;
border-top: 0;
&:first-child {
@@ -148,37 +175,51 @@ div.flex-table {
&:nth-child(even) {
background-color: #e6e6e6;
}
padding: 1em;
display: flex;
flex-direction: row;
& > h4, & > h5 {
margin-top: 0;
margin-bottom: 0.3em;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 33%;
}
& > .content-bloc {
margin: 0;
font-size: 80%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 50%;
dd {
margin: 0.67em auto;
div.item-row {
display: flex;
flex-direction: row;
&:not(:first-child) {
margin-top: 0.5em;
border-top: 1px dotted #0000004f;
padding-top: 0.5em;
flex-direction: column;
}
}
& > ul.record_actions {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;
margin-top: auto;
margin-bottom: 0;
div.item-col {
&:first-child {
flex-grow: 0; flex-shrink: 0; flex-basis: 33%;
}
&:last-child {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
justify-content: flex-end;
.list-content { // ul, dl, or div
}
ul.record_actions {
margin: 0;
align-self: flex-start;
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
li {
margin-right: 5px;
}
}
}
}
@media only screen and (max-width: 900px) {
flex-direction: column;
div.item-col {
&:last-child {
ul.record_actions {
align-self: flex-end;
}
}
}
}
// neutralize
div.chill_address div.chill_address_address p { text-indent: 0; }
}
}
@media only screen and (max-width: 768px) {
div.item-bloc {
flex-direction: column;
}
}
}
}