bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

big refactoring, opening flagcollection (folder) on the left of main-content

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-11-27 23:02:59 +01:00
parent 420a879a4e
commit 93c4707c45
19 changed files with 656 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@@ -1096,60 +1096,60 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
margin: 0 auto; }
@media only screen and (min-width: 226px) and (max-width: 450px) {
@media only screen and (min-width: 219px) and (max-width: 436px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 210px; } }
@media only screen and (min-width: 451px) and (max-width: 675px) {
width: 218px; } }
@media only screen and (min-width: 437px) and (max-width: 654px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 435px; } }
@media only screen and (min-width: 676px) and (max-width: 900px) {
width: 436px; } }
@media only screen and (min-width: 655px) and (max-width: 872px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 660px; } }
@media only screen and (min-width: 901px) and (max-width: 1125px) {
width: 654px; } }
@media only screen and (min-width: 873px) and (max-width: 1090px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 885px; } }
@media only screen and (min-width: 1126px) and (max-width: 1350px) {
width: 872px; } }
@media only screen and (min-width: 1091px) and (max-width: 1308px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 1110px; } }
@media only screen and (min-width: 1351px) and (max-width: 1575px) {
width: 1090px; } }
@media only screen and (min-width: 1309px) and (max-width: 1526px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 1335px; } }
@media only screen and (min-width: 1576px) and (max-width: 1800px) {
width: 1308px; } }
@media only screen and (min-width: 1527px) and (max-width: 1744px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 1560px; } }
@media only screen and (min-width: 1801px) and (max-width: 2025px) {
width: 1526px; } }
@media only screen and (min-width: 1745px) and (max-width: 1962px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 1785px; } }
@media only screen and (min-width: 2026px) and (max-width: 2250px) {
width: 1744px; } }
@media only screen and (min-width: 1963px) and (max-width: 2180px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 2010px; } }
@media only screen and (min-width: 2251px) and (max-width: 2475px) {
width: 1962px; } }
@media only screen and (min-width: 2181px) and (max-width: 2398px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 2235px; } }
@media only screen and (min-width: 2476px) and (max-width: 2700px) {
width: 2180px; } }
@media only screen and (min-width: 2399px) and (max-width: 2616px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 2460px; } }
@media only screen and (min-width: 2701px) and (max-width: 2925px) {
width: 2398px; } }
@media only screen and (min-width: 2617px) and (max-width: 2834px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 2685px; } }
@media only screen and (min-width: 2926px) and (max-width: 3150px) {
width: 2616px; } }
@media only screen and (min-width: 2835px) and (max-width: 3052px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 2910px; } }
@media only screen and (min-width: 3151px) and (max-width: 3375px) {
width: 2834px; } }
@media only screen and (min-width: 3053px) and (max-width: 3270px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 3135px; } }
@media only screen and (min-width: 3376px) and (max-width: 3600px) {
width: 3052px; } }
@media only screen and (min-width: 3271px) and (max-width: 3488px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 3360px; } }
@media only screen and (min-width: 3601px) and (max-width: 3825px) {
width: 3270px; } }
@media only screen and (min-width: 3489px) and (max-width: 3706px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 3585px; } }
@media only screen and (min-width: 3826px) and (max-width: 4050px) {
width: 3488px; } }
@media only screen and (min-width: 3707px) and (max-width: 3924px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 3810px; } }
@media only screen and (min-width: 4051px) and (max-width: 4275px) {
width: 3706px; } }
@media only screen and (min-width: 3925px) and (max-width: 4142px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 4035px; } }
width: 3924px; } }
header[role="banner"] {
flex: 0 0 auto;
@@ -1182,11 +1182,12 @@ main[role="main"] {
display: flex;
flex-direction: row-reverse; }
main[role="main"] > .scroller > .wrapper #content-left {
flex-basis: 435px; }
flex-basis: 218px;
flex-shrink: 0; }
main[role="main"] > .scroller > .wrapper #content-left > * {
width: 435px; }
width: 100%; }
main[role="main"] > .scroller > .wrapper #content-center {
flex-basis: 2235px; }
flex-basis: 110%; }
@keyframes rotating {
from {
@@ -1443,11 +1444,37 @@ aside.messages {
padding: 0; }
#content-left {
z-index: 5;
box-sizing: content-box;
max-width: 1px;
overflow-x: hidden;
transition: all 0.3s ease-in-out; }
#content-left.opened {
max-width: 500px; }
max-width: 500px;
padding: 0.3em; }
#content-left > * {
box-sizing: border-box;
background-color: #fff;
box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.2);
padding: 0.5em; }
#content-left .flag-collection > header {
display: flex;
flex-direction: row;
justify-content: space-between; }
#content-left .flag-collection > header .mdi-close {
cursor: pointer;
align-self: flex-end; }
#content-left .flag-collection > ul > li {
margin: 0 0 13px 0;
padding: 0; }
#content-left .flag-collection > ul > li article.card.minicard {
width: 100%; }
#content-left .flag-collection > ul > li article.card.minicard > header {
padding: 0.3em 0.3em 0.1em; }
#content-left .flag-collection > ul > li article.card.minicard > header h1 {
margin: 0; }
#content-left .flag-collection > ul > li article.card.minicard > nav.tools {
padding: 0 0.2em; }
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label {
font-size: 3.5em;
@@ -1515,12 +1542,12 @@ article.node--type-frontpage .node__content > section.home-showrooms {
position: relative;
display: grid;
grid-template-rows: 1fr; }
@media only screen and (max-width: 1575px) {
@media only screen and (max-width: 1526px) {
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
grid-template-columns: 1fr; }
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item {
grid-column: 1; } }
@media only screen and (min-width: 1576px) {
@media only screen and (min-width: 1527px) {
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
grid-template-columns: 1fr 1fr;
grid-gap: 1em; }
@@ -1559,10 +1586,10 @@ article.node--type-frontpage .node__content > section.home-blabla {
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
position: relative;
overflow-y: hidden; }
@media only screen and (max-width: 2610px) {
@media only screen and (max-width: 2538px) {
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
max-height: 630px; } }
@media only screen and (min-width: 2611px) {
@media only screen and (min-width: 2539px) {
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
max-height: 310px; } }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul {
@@ -1570,7 +1597,7 @@ article.node--type-frontpage .node__content > section.home-blabla {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 420px));
grid-template-columns: repeat(auto-fill, minmax(80px, 410px));
grid-gap: 1em;
justify-content: start; }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li {
@@ -1606,10 +1633,10 @@ article.node--type-frontpage .node__content > section.home-blabla {
.cards-list > ul {
margin: 0;
padding: 0;
width: calc(100% + 15px); }
width: calc(100% + 13px); }
.cards-list > ul > li {
list-style: none;
margin: 0 15px 15px 0;
margin: 0 13px 13px 0;
padding: 0;
display: inline-block;
vertical-align: top; }
@@ -1617,11 +1644,13 @@ article.node--type-frontpage .node__content > section.home-blabla {
article.card {
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
width: 210px;
width: 205px;
height: 295px; }
article.card.article {
width: 435px;
width: 423px;
height: 295px; }
article.card.minicard {
height: 100px; }
article.card header {
position: absolute;
bottom: 0;
@@ -1707,8 +1736,8 @@ article.card {
grid-column: 2/6; }
#main-content > article.article section.accroche figure {
width: 435px;
margin: 0 15px 0 0; }
width: 423px;
margin: 0 13px 0 0; }
#main-content > article.article section.accroche figure img {
width: 100%; }
@@ -1722,18 +1751,18 @@ article.card {
#main-content > article.article div.gallery-wrapper .image {
display: inline-block;
width: 210px;
margin: 0 15px 9px 0;
width: 205px;
margin: 0 13px 7.8px 0;
height: 147.5px;
background-size: cover; }
#main-content > article.article aside.linked-materials ul {
width: calc(100% + 15px); }
width: calc(100% + 13px); }
#main-content > article.article aside.linked-materials ul li {
display: inline-block;
vertical-align: top;
width: 210px;
margin: 0 15px 0 0; }
width: 205px;
margin: 0 13px 0 0; }
#main-content > article.article aside.linked-materials h3.field__label {
font-size: 1em;
@@ -1779,12 +1808,12 @@ article.card {
content: ' >'; }
#showrooms {
width: calc(100% + 15px); }
width: calc(100% + 13px); }
#showrooms article.showroom {
width: 435px;
width: 423px;
display: inline-block;
vertical-align: top;
margin: 0 15px 15px 0; }
margin: 0 13px 13px 0; }
#showrooms article.showroom h1 {
margin: 0;
font-weight: 4; }

151
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long