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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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;
$upbp: ($column_width + $column_goutiere) * ($max);
@media (min-width: $bp) and (max-width: $upbp) {
@content;
@if $orientation {
@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;
@media (min-width: $bp) {
@content;
@if $orientation {
@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;
@media (max-width: $bp) {
@content;
@if $orientation {
@media (orientation: $orientation) and (max-width: $bp) {
@content;
}
} @else {
@media (max-width: $bp) {
@content;
}
}
}
// build break points for each multiple of cards row
// cards will always be centered, using all available space
%grided-width{

View File

@ -82,6 +82,11 @@ header[role="banner"]{
display: inline-block;
}
}
@include col-mediaquery-max(4, landscape){
.slogan{
display: none;
}
}
}
@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{
// float: left;
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){
body.path-frontpage &, body.path-home & {
display: none;
@ -539,39 +580,15 @@ header[role="banner"]{
padding: 0.5em 1em 0!important;
}
}
}
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(4, landscape){
padding:0 0 1em;
h2{
body:not(.path-home) & {
padding:0 0.6em 0.1em;
}
}
}
}
#block-materiosapisearchblock{
@ -1306,6 +1323,9 @@ article.node--type-frontpage{
font-weight: 500;
margin: 0;
padding: 0 0 0.5em 0;
@include col-mediaquery-max(4, landscape){
display:none;
}
}
&>ul{
@ -1641,7 +1661,7 @@ article.card{
>.col{
flex-basis: 50%;
}
@include col-mediaquery-max(3){
@include col-mediaquery-max(3, portrait){
flex-flow: column;
width: 100%;
height: 100%;
@ -1653,6 +1673,19 @@ article.card{
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{
>*:not(nav.tools){
position: relative;
@ -1839,6 +1872,9 @@ article.card{
}
}
.vm--modale-card{
position: relative;
}
// vuejs-modale hack as maxWidth and maxHeight does not work :(
@include col-mediaquery-min(3){
.vm--modale-card{