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

Browse Source
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
web/themes/custom/materiotheme/assets
dist
main.cssmain.css.gzreport.html
styles
base
_layout.scss
main.scss

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

File diff suppressed because one or more lines are too long

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

Binary file not shown.

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

File diff suppressed because one or more lines are too long

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

@ -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{

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

@ -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{