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

responsive: blabla ok, pricing first page ok

This commit is contained in:
Bachir Soussi Chiadmi 2021-03-30 16:43:56 +02:00
parent d72e102cc5
commit 5fb69e008d
4 changed files with 156 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19717,7 +19717,7 @@ header[role="banner"] {
padding: 1em 0 0; } padding: 1em 0 0; }
body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle { body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle {
display: none; } display: none; }
header[role="banner"] #block-pagetitle h2 { body.path-base header[role="banner"] #block-pagetitle h2 {
padding: 0.5em 1em 0 !important; } } padding: 0.5em 1em 0 !important; } }
header[role="banner"] #block-pagetitle h2 { header[role="banner"] #block-pagetitle h2 {
margin: 0; margin: 0;
@ -20175,20 +20175,20 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
width: 100%; width: 100%;
height: auto; height: auto;
box-shadow: none; } box-shadow: none; }
.cards-list > ul > li > article > section.images { #base .cards-list > ul > li > article > section.images {
height: auto; } height: auto; }
.cards-list > ul > li > article > section.images > figure { .cards-list > ul > li > article > section.images > figure {
position: relative; } position: relative; }
.cards-list > ul > li > article > section.images > figure:not(:first-child) { .cards-list > ul > li > article > section.images > figure:not(:first-child) {
display: none; } display: none; }
.cards-list > ul > li > article > section.images > figure img:not(.blank) { .cards-list > ul > li > article > section.images > figure img:not(.blank) {
width: 100%; width: 100%;
height: auto; } height: auto; }
.cards-list > ul > li > article > section.images > figure img.blank { .cards-list > ul > li > article > section.images > figure img.blank {
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; } } right: 0; } }
article.card { article.card {
position: relative; position: relative;
@ -20581,15 +20581,23 @@ article.card {
font-size: 0.756em; font-size: 0.756em;
font-weight: 400; } font-weight: 400; }
#main-content > article.article div.cols { @media (min-width: 655px) {
display: grid; #main-content > article.article div.cols {
grid-template-rows: 1fr; display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr;
grid-gap: 1em; } grid-template-columns: repeat(6, 1fr);
#main-content > article.article div.cols div.col-left { grid-gap: 1em; }
grid-column: 1; } #main-content > article.article div.cols div.col-left {
#main-content > article.article div.cols div.col-right { grid-column: 1; }
grid-column: 2/6; } #main-content > article.article div.cols div.col-right {
grid-column: 2/6; } }
@media (max-width: 654px) {
#main-content > article.article div.cols {
padding: 1em;
box-sizing: border-box; }
#main-content > article.article div.cols .accroche figure {
width: 100%; } }
#main-content > article.article section.accroche figure { #main-content > article.article section.accroche figure {
width: 423px; width: 423px;
@ -20612,13 +20620,24 @@ article.card {
height: 147.5px; height: 147.5px;
background-size: cover; } background-size: cover; }
#main-content > article.article aside.linked-materials ul { @media (max-width: 654px) {
width: calc(100% + 13px); } #main-content > article.article div.gallery-wrapper {
#main-content > article.article aside.linked-materials ul li { display: flex;
display: inline-block; flex-flow: row wrap;
vertical-align: top; justify-content: space-between; }
width: 205px; #main-content > article.article div.gallery-wrapper .image {
margin: 0 13px 13px 0; } display: block;
flex: 0 1 48%;
margin: 0 0 7.8px 0; } }
@media (min-width: 655px) {
#main-content > article.article aside.linked-materials ul {
width: calc(100% + 13px); }
#main-content > article.article aside.linked-materials ul li {
display: inline-block;
vertical-align: top;
width: 205px;
margin: 0 13px 13px 0; } }
#main-content > article.article aside.linked-materials h3.field__label { #main-content > article.article aside.linked-materials h3.field__label {
font-size: 1em; font-size: 1em;
@ -20637,6 +20656,10 @@ article.card {
font-size: 0.756em; font-size: 0.756em;
font-weight: 400; } font-weight: 400; }
@media (max-width: 654px) {
#main-content > article.article nav.prevnext {
padding: 0 1em; } }
#main-content > article.article nav.prevnext.bottom { #main-content > article.article nav.prevnext.bottom {
margin: 2em 0; } margin: 2em 0; }
@ -20652,16 +20675,24 @@ article.card {
list-style: none; } list-style: none; }
#main-content > article.article nav.prevnext li a { #main-content > article.article nav.prevnext li a {
font-size: 0.756em; font-size: 0.756em;
font-weight: 700; } font-weight: 700;
line-height: 1.3;
display: block;
position: relative;
padding: 0 1em; }
#main-content > article.article nav.prevnext li:nth-child(1) { #main-content > article.article nav.prevnext li:nth-child(1) {
grid-column: 1; } grid-column: 1; }
#main-content > article.article nav.prevnext li:nth-child(1) a:before { #main-content > article.article nav.prevnext li:nth-child(1) a:before {
content: '< '; } content: '\021A4';
position: absolute;
left: 0; }
#main-content > article.article nav.prevnext li:nth-child(2) { #main-content > article.article nav.prevnext li:nth-child(2) {
grid-column: 2; grid-column: 2;
text-align: right; } text-align: right; }
#main-content > article.article nav.prevnext li:nth-child(2) a:after { #main-content > article.article nav.prevnext li:nth-child(2) a:after {
content: ' >'; } content: '\021A6';
position: absolute;
right: 0; }
#showrooms { #showrooms {
width: calc(100% + 13px); } width: calc(100% + 13px); }
@ -20794,6 +20825,15 @@ article.card {
#main-content .view-pricing-products .view-content article.product:nth-child(2) aside .variation button, #main-content .view-pricing-products .view-content article.product:nth-child(2) aside .variation button,
#main-content .view-pricing-products .view-content .views-row:nth-child(2) aside .variation button { #main-content .view-pricing-products .view-content .views-row:nth-child(2) aside .variation button {
color: #ff9f50; } color: #ff9f50; }
@media (max-width: 654px) {
#main-content > #pricing,
#main-content .view-pricing-products .view-content {
flex-flow: column; }
#main-content > #pricing article.product,
#main-content > #pricing .views-row,
#main-content .view-pricing-products .view-content article.product,
#main-content .view-pricing-products .view-content .views-row {
flex: 0 1 auto; } }
.modal { .modal {
position: relative; } position: relative; }

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

File diff suppressed because one or more lines are too long

107
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -527,9 +527,12 @@ header[role="banner"]{
display: none; display: none;
} }
padding: 1em 0 0; padding: 1em 0 0;
h2{ body.path-base &{
padding: 0.5em 1em 0!important; h2{
padding: 0.5em 1em 0!important;
}
} }
} }
h2{ h2{
margin:0; margin:0;
@ -1240,7 +1243,9 @@ article.node--type-frontpage{
height:auto; height:auto;
box-shadow: none; box-shadow: none;
>section.images{ >section.images{
height: auto; #base &{
height: auto;
}
>figure{ >figure{
position: relative; position: relative;
&:not(:first-child){ &:not(:first-child){
@ -1831,18 +1836,34 @@ article.card{
} }
#main-content > article.article{ #main-content > article.article{
div.cols{ // grid only on big screens
display: grid; @include col-mediaquery-min(3){
grid-template-rows: 1fr; div.cols{
grid-template-columns: repeat(6, 1fr); display: grid;
grid-gap: 1em; grid-template-rows: 1fr;
div.col-left{ grid-template-columns: repeat(6, 1fr);
grid-column: 1; grid-gap: 1em;
} div.col-left{
div.col-right{ grid-column: 1;
grid-column: 2/6; }
} div.col-right{
} grid-column: 2/6;
}
}
}
@include col-mediaquery-max(3){
div.cols{
padding:1em;
box-sizing: border-box;
.accroche{
figure{
width:100%;
}
}
}
}
section.accroche{ section.accroche{
figure{ figure{
width:$column_width*2 + $column_goutiere; width:$column_width*2 + $column_goutiere;
@ -1870,6 +1891,17 @@ article.card{
height:$card_height / 2; height:$card_height / 2;
background-size: cover; background-size: cover;
} }
@include col-mediaquery-max(3){
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.image{
// width: auto; height: auto;
display: block;
flex: 0 1 48%;
margin: 0 0 $column_goutiere*0.6 0;
}
}
} }
// section.videos{ // section.videos{
// ul{ // ul{
@ -1900,15 +1932,18 @@ article.card{
// } // }
// } // }
aside.linked-materials{ aside.linked-materials{
ul{
width:calc(100% + #{$column_goutiere}); @include col-mediaquery-min(3){
li{ ul{
display: inline-block; width:calc(100% + #{$column_goutiere});
vertical-align: top; li{
width:$column_width; display: inline-block;
margin:0 $column_goutiere $column_goutiere 0; vertical-align: top;
} width:$column_width;
} margin:0 $column_goutiere $column_goutiere 0;
}
}
}
h3.field__label{ h3.field__label{
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
@ -1928,6 +1963,10 @@ article.card{
} }
} }
nav.prevnext{ nav.prevnext{
@include col-mediaquery-max(3){
padding: 0 1em;
}
&.bottom{ &.bottom{
margin:2em 0; margin:2em 0;
} }
@ -1944,18 +1983,26 @@ article.card{
a{ a{
font-size: 0.756em; font-size: 0.756em;
font-weight: 700; font-weight: 700;
line-height: 1.3;
display: block;
position: relative;
padding: 0 1em;
} }
&:nth-child(1){ &:nth-child(1){
grid-column: 1; grid-column: 1;
a:before{ a:before{
content:'< '; content:'\021A4';
position: absolute;
left:0;
} }
} }
&:nth-child(2){ &:nth-child(2){
grid-column: 2; grid-column: 2;
text-align: right; text-align: right;
a:after{ a:after{
content:' >'; content:'\021A6';
position: absolute;
right: 0;
} }
} }
} }
@ -1998,6 +2045,7 @@ article.card{
#main-content .view-pricing-products .view-content{ #main-content .view-pricing-products .view-content{
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
article.product, article.product,
.views-row{ .views-row{
flex:0 0 50%; flex:0 0 50%;
@ -2059,6 +2107,13 @@ article.card{
} }
} }
} }
@include col-mediaquery-max(3){
flex-flow: column;
article.product,
.views-row{
flex:0 1 auto;
}
}
} }
.modal{ .modal{

2
web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue
View File

@ -81,7 +81,7 @@
</div> </div>
<aside class="linked-materials"> <aside class="linked-materials">
<h3 class="field__label">{{$t("materio.Linked Materials")}}</h3> <h3 class="field__label">{{$t("materio.Linked Materials")}}</h3>
<div class="card-list"> <div class="cards-list">
<ul class=""> <ul class="">
<li v-for="node in article.linked_materials" v-bind:key="node.id"> <li v-for="node in article.linked_materials" v-bind:key="node.id">
<Card :item="node" /> <Card :item="node" />