Bläddra i källkod

responcive: home quite ok

bach 4 år sedan
förälder
incheckning
63fdc0061f

+ 30 - 1
web/themes/custom/materiotheme/assets/dist/main.css

@@ -19643,16 +19643,22 @@ header[role="banner"] {
       align-self: flex-end; }
     @media (max-width: 654px) {
       header[role="banner"] #header-bottom {
-        flex-direction: column-reverse; }
+        flex-direction: column-reverse;
+        justify-content: center; }
         header[role="banner"] #header-bottom #block-pagetitle {
           width: max-content; } }
   header[role="banner"] #block-pagetitle {
     padding: 1em 0; }
+    @media (max-width: 654px) {
+      body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle {
+        display: none; } }
     header[role="banner"] #block-pagetitle h2 {
       margin: 0;
       font-size: 1.512em;
       text-transform: capitalize;
       font-weight: 300; }
+      body.path-home header[role="banner"] #block-pagetitle h2 {
+        display: none; }
       body:not(.path-home) header[role="banner"] #block-pagetitle h2 {
         padding: 0.5em 1em; }
       body.path-blabla header[role="banner"] #block-pagetitle h2,
@@ -19740,6 +19746,9 @@ aside.messages {
 article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > h3, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-title {
   font-size: 3.5em;
   line-height: 1; }
+  @media (max-width: 654px) {
+    article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > h3, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-title {
+      font-size: 2em; } }
 
 article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-body {
   font-size: 0.9em;
@@ -19752,6 +19761,11 @@ article.node--type-frontpage .node__content > section.home-intro, article.node--
     width: 80%;
     margin: 0 auto;
     text-align: center; }
+    @media (max-width: 654px) {
+      article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1), article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) {
+        width: auto;
+        padding: 0 1em;
+        text-align: left; } }
 
 article.node--type-frontpage .node__content > section.home-database, article.node--type-frontpage .node__content > section.home-showrooms, article.node--type-frontpage .node__content > section.home-blabla {
   display: flex;
@@ -19766,6 +19780,11 @@ article.node--type-frontpage .node__content > section.home-database, article.nod
     flex: 1 1 auto;
     box-sizing: border-box;
     padding: 1em 0.5em; }
+  @media (max-width: 654px) {
+    article.node--type-frontpage .node__content > section.home-database, article.node--type-frontpage .node__content > section.home-showrooms, article.node--type-frontpage .node__content > section.home-blabla {
+      flex-direction: column; }
+      article.node--type-frontpage .node__content > section.home-database > div:nth-child(1), article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1), article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) {
+        flex: 0 0 auto; } }
 
 article.node--type-frontpage > h2 {
   display: none; }
@@ -19777,6 +19796,9 @@ article.node--type-frontpage .node__content > section.home-intro .field__item {
   article.node--type-frontpage .node__content > section.home-intro .field__item p {
     flex: 0 0 410px;
     padding: 1em; }
+  @media (max-width: 654px) {
+    article.node--type-frontpage .node__content > section.home-intro .field__item {
+      display: none; } }
 
 article.node--type-frontpage .node__content > section.home-database {
   background-color: #69cdcf; }
@@ -19942,6 +19964,13 @@ article.node--type-frontpage .node__content > section.home-blabla {
           article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li .card .field--name-title {
             font-size: 0.756em;
             line-height: 0.9; }
+    @media (max-width: 654px) {
+      article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
+        max-height: 386px; }
+        article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul {
+          justify-content: space-around; }
+          article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li {
+            flex: 0 3 45%; } }
 
 article.node--type-frontpage .node__content > section.home-pricing > h3 {
   text-align: center;

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 28
web/themes/custom/materiotheme/assets/dist/main.js


+ 1 - 1
web/themes/custom/materiotheme/assets/scripts/main.js

@@ -147,7 +147,7 @@ import { MA } from 'vuejs/api/ma-axios'
         document.querySelector('body').classList.remove(...classes_to_rm)
         // add new path classes to body
         const classes = []
-        if (to.path == '/') {
+        if (to.name == 'home') {
           classes.push('path-home')
         } else {
           const path_parts = to.path

+ 45 - 1
web/themes/custom/materiotheme/assets/styles/main.scss

@@ -440,7 +440,7 @@ header[role="banner"]{
     }
     @include col-mediaquery-max(3){
       flex-direction: column-reverse;
-      // justify-content: flex-start;
+      justify-content:center;
       #block-pagetitle{
         width: max-content;
       }
@@ -453,12 +453,21 @@ header[role="banner"]{
   #block-pagetitle{
     // float: left;
     padding:1em 0;
+
+    @include col-mediaquery-max(3){
+	    body.path-frontpage &, body.path-home & {
+	      display: none;
+	    }
+		}
     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;
       }
@@ -637,6 +646,9 @@ article.node--type-frontpage{
   %front-col-field__label{
     font-size: 3.5em;
     line-height: 1;
+		@include col-mediaquery-max(3){
+			font-size: 2em;
+		}
   }
   %front-col-description{
     font-size: 0.9em;
@@ -650,6 +662,11 @@ article.node--type-frontpage{
       width:80%;
       margin: 0 auto;
       text-align: center;
+			@include col-mediaquery-max(3){
+				width:auto;
+				padding:0 1em;
+				text-align: left;
+			}
       .field__label{
         @extend %front-col-field__label;
       }
@@ -700,6 +717,20 @@ article.node--type-frontpage{
       box-sizing: border-box;
       padding: 1em 0.5em;
     }
+		@include col-mediaquery-max(3){
+			flex-direction: column;
+	    >div:nth-child(1){
+	      flex: 0 0 auto;
+	      // box-sizing: border-box;
+	      // padding: 1em;
+	    }
+	    >div:nth-child(2){
+	      // flex: 1 1 auto;
+	      // box-sizing: border-box;
+	      // padding: 1em 0.5em;
+	    }
+		}
+
   }
 
   >h2{
@@ -719,6 +750,9 @@ article.node--type-frontpage{
             flex: 0 0 $column_width * 2;
             padding:1em;
           }
+					@include col-mediaquery-max(3){
+						display: none;
+					}
         }
       }
       &.home-database{
@@ -952,6 +986,16 @@ article.node--type-frontpage{
               }
             }
           }
+
+					@include col-mediaquery-max(3){
+						max-height: 386px;
+						ul{
+							justify-content: space-around;
+							li{
+								flex: 0 3 45%;
+							}
+						}
+					}
         }
       }
       &.home-pricing{

Vissa filer visades inte eftersom för många filer har ändrats