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

finished thematique layout, added mixin for columns media-query

This commit is contained in:
Bachir Soussi Chiadmi 2020-12-26 12:42:37 +01:00
parent 144ab7db26
commit 8527be2da9
3 changed files with 116 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1097,10 +1097,7 @@ 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: 219px) and (max-width: 436px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 218px; } }
@media only screen and (min-width: 437px) and (max-width: 654px) {
@media only screen and (max-width: 436px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
width: 436px; } }
@media only screen and (min-width: 655px) and (max-width: 872px) {
@ -1402,8 +1399,20 @@ header[role="banner"] {
border-radius: 3px;
background-color: #444;
color: #fff; }
header[role="banner"] #header-bottom {
display: flex;
flex-direction: row;
justify-content: space-between; }
header[role="banner"] #header-bottom:after {
content: none; }
header[role="banner"] #header-bottom #block-materiosapisearchblock {
align-self: flex-end; }
@media (max-width: 654px) {
header[role="banner"] #header-bottom {
flex-direction: column-reverse; }
header[role="banner"] #header-bottom #block-pagetitle {
width: max-content; } }
header[role="banner"] #block-pagetitle {
float: left;
padding: 1em 0; }
header[role="banner"] #block-pagetitle h2 {
margin: 0;
@ -1423,8 +1432,6 @@ header[role="banner"] {
color: #fff;
background-color: #69cdcf; }
header[role="banner"] #block-materiosapisearchblock {
float: right;
display: inline-block;
padding: 0; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form .form-item, header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form input.button {
display: inline-block; }
@ -1800,19 +1807,19 @@ article.card {
cursor: pointer; }
#main-content > article.thematique div.cols {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(12, 1fr);
grid-gap: 1em; }
display: flex;
flex-direction: row;
flex-wrap: nowrap; }
@media (max-width: 654px) {
#main-content > article.thematique div.cols {
flex-wrap: wrap; } }
#main-content > article.thematique div.cols div.col-left {
grid-column: 1; }
#main-content > article.thematique div.cols div.col-right {
grid-column: 2/12; }
padding: 0 13px 13px 0;
flex: 0 0 423px; }
#main-content > article.thematique div.col-left section.body {
background-color: #69cdcf;
padding: 0.5em 1em 1em;
width: 423px; }
padding: 0.5em 1em 1em; }
#main-content > article.thematique aside.linked-materials ul {
width: calc(100% + 13px); }

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

@ -23,19 +23,74 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
padding-top: 24px!important;
}
// define breakpoints media query for each card column number
// $i: 1;
// $colw: $column_width;
// $m: $column_goutiere;
// $bp: $colw + $m;
// @while $bp < 4096px {
// $upbp: $bp + $colw + $m;
// // @media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
// // width:$bp;
// // }
// breakpoint-#{$i}: ("bp":$bp, "upbp":$upbp);
// // @mixin col_breakpoint_#{$i}() {
// // @media (min-width: $bp + 1px) and (max-width: $upbp) {
// // @content;
// // }
// // }
// $bp: $upbp;
// $i: $i + 1;
// }
// @mixin col-mediaquery($i) {
// @media (min-width: map.get(#{$breakpoint-$i}, "bp") + 1px) and (max-width: map.get(#{$breakpoint-$i}, "upbp")) {
// @content;
// }
// }
@mixin col-mediaquery-min-max($i) {
$bp: ($column_width + $column_goutiere) * $i + 1px;
$upbp: ($column_width + $column_goutiere) * ($i + 1);
@media (min-width: $bp) and (max-width: $upbp) {
@content;
}
}
@mixin col-mediaquery-min($i) {
$bp: ($column_width + $column_goutiere) * $i;
@media (min-width: $bp) {
@content;
}
}
@mixin col-mediaquery-max($i) {
$bp: ($column_width + $column_goutiere) * $i;
@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{
margin:0 auto;
$m: $column_goutiere;
$colw: $column_width;
$bp: $colw + $m;
$bp: ($colw + $m) * 2;
$i: 2;
@while $bp < 4096px {
$upbp: $bp + $colw + $m;
@if $i == 2 {
@media only screen and (max-width: $bp) {
width:$bp;
}
}@else{
@media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
width:$bp;
}
}
$bp: $upbp;
$i: $i + 1;
}
// outline:1px blue solid;
// &>*{

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

@ -310,8 +310,29 @@ header[role="banner"]{
}
// header bottom
#header-bottom{
// disable the default wrapper behaviour
&:after{content: none;}
// apply flex for normal layout
display: flex;
flex-direction: row;
justify-content: space-between;
#block-pagetitle{}
#block-materiosapisearchblock{
align-self: flex-end;
}
@include col-mediaquery-max(3){
flex-direction: column-reverse;
// justify-content: flex-start;
#block-pagetitle{
float: left;
width: max-content;
}
#block-materiosapisearchblock{}
}
}
#block-pagetitle{
// float: left;
padding:1em 0;
h2{
margin:0;
@ -339,8 +360,8 @@ header[role="banner"]{
}
#block-materiosapisearchblock{
float:right;
display:inline-block;
// float:right;
// display:inline-block;
// box-shadow: 0 0 5px rgba(0,0,0,0.2);
padding:0;
@ -920,21 +941,23 @@ article.card{
// |_|
#main-content > article.thematique{
div.cols{
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(12, 1fr);
grid-gap: 1em;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
// @media only screen and (max-width: $small-bp) {
@include col-mediaquery-max(3){
flex-wrap: wrap;
}
// }
div.col-left{
grid-column: 1;
}
div.col-right{
grid-column: 2/12;
padding: 0 $column_goutiere $column_goutiere 0;
flex: 0 0 $column_width * 2 + $column_goutiere;
}
div.col-right{}
}
div.col-left section.body{
background-color: $color-base;
padding: 0.5em 1em 1em;
width:$column_width*2 + $column_goutiere;
}
aside.linked-materials{
ul{