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

added optional orientation attribute to mediaquery mixins, fixed modalecard in landscape mode

This commit is contained in:
Bachir Soussi Chiadmi 2021-06-01 13:37:39 +02:00
parent 72890c7ab0
commit 425eb7f58f
5 changed files with 100 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

Binary file not shown.

4
web/themes/custom/materiotheme/assets/dist/report.html vendored
View File

File diff suppressed because one or more lines are too long

37
web/themes/custom/materiotheme/assets/styles/base/_layout.scss
View File

@ -49,26 +49,45 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
// } // }
// } // }
@mixin col-mediaquery-min-max($min, $max) { @mixin col-mediaquery-min-max($min, $max, $orientation: false) {
$bp: ($column_width + $column_goutiere) * $min + 1px; $bp: ($column_width + $column_goutiere) * $min + 1px;
$upbp: ($column_width + $column_goutiere) * ($max); $upbp: ($column_width + $column_goutiere) * ($max);
@media (min-width: $bp) and (max-width: $upbp) { @if $orientation {
@content; @media (orientation: $orientation) and (min-width: $bp) and (max-width: $upbp) {
@content;
}
} @else {
@media (min-width: $bp) and (max-width: $upbp) {
@content;
}
} }
} }
@mixin col-mediaquery-min($i) { @mixin col-mediaquery-min($i, $orientation: false) {
$bp: ($column_width + $column_goutiere) * $i + 1px; $bp: ($column_width + $column_goutiere) * $i + 1px;
@media (min-width: $bp) { @if $orientation {
@content; @media (orientation: $orientation) and (min-width: $bp) {
@content;
}
} @else {
@media (min-width: $bp) {
@content;
}
} }
} }
@mixin col-mediaquery-max($i) { @mixin col-mediaquery-max($i, $orientation: false) {
$bp: ($column_width + $column_goutiere) * $i; $bp: ($column_width + $column_goutiere) * $i;
@media (max-width: $bp) { @if $orientation {
@content; @media (orientation: $orientation) and (max-width: $bp) {
@content;
}
} @else {
@media (max-width: $bp) {
@content;
}
} }
} }
// build break points for each multiple of cards row // build break points for each multiple of cards row
// cards will always be centered, using all available space // cards will always be centered, using all available space
%grided-width{ %grided-width{

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

@ -82,6 +82,11 @@ header[role="banner"]{
display: inline-block; display: inline-block;
} }
} }
@include col-mediaquery-max(4, landscape){
.slogan{
display: none;
}
}
} }
@include col-mediaquery-max(3){ @include col-mediaquery-max(3){
@ -524,11 +529,47 @@ header[role="banner"]{
} }
} }
@include col-mediaquery-max(4, landscape){
#block-materiosapisearchblock{
align-self: flex-start;
}
}
} }
#block-pagetitle{ #block-pagetitle{
// float: left; // float: left;
padding:1em 0; padding:1em 0;
h2{
margin:0;
font-size: 1.512em;
text-transform: capitalize;
font-weight: 300;
body.path-home & {
display: none;
}
body:not(.path-home) & {
padding:0.5em 1em;
}
body.path-blabla &,
body.path-checkout & {
color: #fff;
background-color: $color-blabla;
}
body.path-showrooms & {
color: #fff;
background-color: $color-showrooms;
}
body.path-base &,
body.path-thematique & {
color: #fff;
background-color: $color-base;
}
body.path-pricing & {
color: #fff;
background-color: $color-webshowroom;
}
}
@include col-mediaquery-max(3){ @include col-mediaquery-max(3){
body.path-frontpage &, body.path-home & { body.path-frontpage &, body.path-home & {
display: none; display: none;
@ -539,39 +580,15 @@ header[role="banner"]{
padding: 0.5em 1em 0!important; padding: 0.5em 1em 0!important;
} }
} }
} }
h2{ @include col-mediaquery-max(4, landscape){
margin:0; padding:0 0 1em;
font-size: 1.512em; h2{
text-transform: capitalize; body:not(.path-home) & {
font-weight: 300; padding:0 0.6em 0.1em;
}
body.path-home & { }
display: none; }
}
body:not(.path-home) & {
padding:0.5em 1em;
}
body.path-blabla &,
body.path-checkout & {
color: #fff;
background-color: $color-blabla;
}
body.path-showrooms & {
color: #fff;
background-color: $color-showrooms;
}
body.path-base &,
body.path-thematique & {
color: #fff;
background-color: $color-base;
}
body.path-pricing & {
color: #fff;
background-color: $color-webshowroom;
}
}
} }
#block-materiosapisearchblock{ #block-materiosapisearchblock{
@ -1306,6 +1323,9 @@ article.node--type-frontpage{
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
padding: 0 0 0.5em 0; padding: 0 0 0.5em 0;
@include col-mediaquery-max(4, landscape){
display:none;
}
} }
&>ul{ &>ul{
@ -1641,7 +1661,7 @@ article.card{
>.col{ >.col{
flex-basis: 50%; flex-basis: 50%;
} }
@include col-mediaquery-max(3){ @include col-mediaquery-max(3, portrait){
flex-flow: column; flex-flow: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -1653,6 +1673,19 @@ article.card{
flex:0 0 100%; flex:0 0 100%;
} }
} }
@include col-mediaquery-max(4, landscape){
// flex-flow: row-reverse ;
width: 100%;
height: 100%;
>.col-right{
height: 100%;
overflow-y: auto;
}
// >.col-left{
// flex:0 0 50%;
// }
}
section.col-right{ section.col-right{
>*:not(nav.tools){ >*:not(nav.tools){
position: relative; position: relative;
@ -1839,6 +1872,9 @@ article.card{
} }
} }
.vm--modale-card{
position: relative;
}
// vuejs-modale hack as maxWidth and maxHeight does not work :( // vuejs-modale hack as maxWidth and maxHeight does not work :(
@include col-mediaquery-min(3){ @include col-mediaquery-min(3){
.vm--modale-card{ .vm--modale-card{