more respnsive: header hamburger done, started base

build/webpack.config.dev.js

@@ -33,7 +33,7 @@ module.exports = merge(baseConfig, {
           'sass-loader'
         ]
       }, {
-        test: /\.(png|jpg|gif)$/,
+        test: /\.(png|jpg|gif|svg)$/,
         use: [
           {
             loader: 'url-loader',

build/webpack.config.prod.js

@@ -34,7 +34,7 @@ module.exports = merge(baseConfig, {
           'sass-loader'
         ]
       }, {
-        test: /\.(png|jpg|gif)$/,
+        test: /\.(png|jpg|gif|svg)$/,
         use: [
           {
             loader: 'url-loader',

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -96,6 +96,7 @@ import { MA } from 'vuejs/api/ma-axios'
         initVSiteBrandingBlock()
         initVPagetitleBlock()
         initVHeaderMenu()
+        initHamburgerMenu()
         initVMainContent()
         initVSearchBlock()
         initVLeftContent()
@@ -167,6 +168,10 @@ import { MA } from 'vuejs/api/ma-axios'
         document.querySelector('body').classList.add(...classes)
 
         updateLanguageLinksBlock(to.path);
+
+        // close the hamburger menu
+        store.dispatch('Common/openCloseHamMenu', false)
+
         // trigger router
         next()
       })
@@ -300,6 +305,14 @@ import { MA } from 'vuejs/api/ma-axios'
       }).$mount('#' + id)
     }
 
+    function initHamburgerMenu(){
+      const input = document.querySelector('input#header-block-right-toggle')
+      input.addEventListener('change', (e) => {
+        console.log("block header right toggle", e, this);
+        store.dispatch('Common/openCloseHamMenu', e.currentTarget.checked)
+      })
+    }
+
     function initVMainContent () {
       const id = 'main-content'
       const $main_content = document.querySelector('#' + id)

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

@@ -151,21 +151,28 @@ header[role="banner"]{
             display:block;
           }
           // default position (hidden, translated right)
+          $w: 20em;
           .header-block-wrapper{
-            z-index: 10;
+            z-index: 100;
             position: absolute;
             top: $min-height;
-            $w: 300px;
-            width: $w;
-            right: - $w - 150px;
+            right:0;
+            // right: - $w - 150px;
             box-sizing: border-box;
-            // transform: translateX(150px);
-            transition: right 0.5s ease-in-out;
+            // transform: translateX(450px);
+
+            overflow: hidden;
+            width:0.1px;
+            box-shadow: 0 0 0 #fff;
+            padding:1em 0;
+            margin-top: 0.7em;
+            transition: all 0.5s ease-in-out;
 
             >*.block, >div#user-tools{
               display: block;
-              padding:0 0 0.5em 0!important;
-              margin:0 0 0.5em 0!important;
+              width: $w - 2em;
+              padding:0 0 1em 0!important;
+              margin:0 0 1em 0!important;
               text-align: right;
               border-left: none!important;
               border-right: none!important;
@@ -173,11 +180,20 @@ header[role="banner"]{
                 border-bottom: 1px solid #ccc!important;
               }
             }
+            #user-flags{
+              width: $w - 2em;
+              padding:1em 0 0 0!important;
+              margin:1em 0 0 0!important;
+              border-top: 1px solid #ccc!important;
+            }
           }
           // input checked, wrapper visible
           input#header-block-right-toggle:checked ~ div.header-block-wrapper {
             // transform: translateX(1px);
-            right:1px;
+            // right:1px;
+            width: $w;
+            padding:1em 1em;
+            box-shadow: -2px 2px 4px #ccc;
           }
         }
       }

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

@@ -11,9 +11,9 @@ $mdi-font-path: './mdi/fonts/';
 @import './base/fonts';
 // @import './base/responsive';
 
-html{
-  // background-color: red;
-}
+// .dialog-off-canvas-main-canvas{
+//   background-color: red;
+// }
 
 @mixin iconMDI($name) {
 	&::before {
@@ -54,6 +54,10 @@ header[role="banner"]{
     font-weight: 400;
   }
 
+	// @include col-mediaquery-max(3){
+	// 	overflow-x: hidden;
+	// }
+
   #block-sitebranding{
     h1{
       margin:0;
@@ -77,9 +81,11 @@ header[role="banner"]{
 	@include col-mediaquery-max(3){
 		.header-block.header-right{
 			.header-block-wrapper{
-				padding:1em 1em;
-				box-shadow: -2px 2px 4px #ccc;
-				background-color: #fff;
+				&, #user-flags ul{
+					// background-color: #222;
+					// color: #fff;
+					background-color: #fff;
+				}
 			}
 		}
 	}
@@ -496,13 +502,15 @@ header[role="banner"]{
       align-self: flex-end;
     }
     @include col-mediaquery-max(3){
-      flex-direction: column-reverse;
+      flex-direction: column;
       justify-content:center;
       #block-pagetitle{
-        width: max-content;
+        // width: max-content;
+				width:100%;
       }
       #block-materiosapisearchblock{
-
+				box-sizing: border-box;
+				width:100%;
       }
     }
 
@@ -513,8 +521,9 @@ header[role="banner"]{
 
     @include col-mediaquery-max(3){
 	    body.path-frontpage &, body.path-home & {
-	      display: none;
+			  display: none;
 	    }
+			padding: 1em 0 0;
 		}
     h2{
       margin:0;
@@ -574,13 +583,21 @@ header[role="banner"]{
         width:20px; height:20px;
         margin:0;
         // border-radius: 7px;
-        background-image: url('../img/search.png');
+        background-image: url('../img/search.svg');
         background-position: center;
         background-repeat: no-repeat;
         background-size: contain;
+				background-color: transparent
       }
 
     }
+	  @include col-mediaquery-max(3){
+			body:not(.path-base) &{
+				display: none;
+			}
+			padding: 0 1em;
+      background-color: $color-base;
+		}
 
   }
 }
@@ -1202,6 +1219,38 @@ article.node--type-frontpage{
       vertical-align: top;
     }
   }
+	@include col-mediaquery-max(3){
+		&>ul{
+			display: flex;
+			flex-flow: row wrap;
+			justify-content: space-around;
+			width:100%;
+			>li{
+				flex: 0 1 48%;
+				margin:0 0 0.5em 0;
+				>article{
+					width:100%;
+					height:auto;
+					>section.images{
+						height: auto;
+						>figure{
+							position: relative;
+							&:not(:first-child){
+								display:none;
+							}
+							img:not(.blank){
+								width:100%;
+								height:auto;
+							}
+							img.blank{
+								top:0; bottom:0; left:0; right:0;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 }
 
 article.card{

web/themes/custom/materiotheme/materiotheme.theme

@@ -61,6 +61,16 @@ function materiotheme_preprocess_html(&$vars) {
 
   $vars['page']['#attached']['html_head'][] = [$description, 'description'];
 
+  $viewport = array(
+    '#tag' => 'meta',
+    '#attributes' => array(
+      'name' => 'viewport',
+      'content' => 'width=device-width, initial-scale=1, maximum-scale=1',
+    ),
+  );
+  $vars['page']['#attached']['html_head'][] = [$viewport, 'viewport'];
+  // drupal_add_html_head($viewport, 'viewport');
+
   // $gv = [
   //   '#tag' => 'meta',
   //   '#attributes' => [

web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue

@@ -22,7 +22,8 @@ export default {
   },
   methods: {
     ...mapActions({
-      userLogin: 'User/userLogin'
+      userLogin: 'User/userLogin',
+      openCloseHamMenu: 'Common/openCloseHamMenu'
     }),
     login () {
       this.userLogin({
@@ -30,6 +31,7 @@ export default {
         pass: this.password
       }).then(() => {
         console.log("LoginBlock user logged-in")
+        this.openCloseHamMenu(false)
         this.$router.push({
           name: 'base'
         })

web/themes/custom/materiotheme/vuejs/components/Content/HeaderMenu.vue

@@ -34,6 +34,9 @@ export default {
     }
   },
   methods: {
+    // ...mapActions({
+    //   openCloseHamMenu: 'Common/openCloseHamMenu'
+    // }),
     compileTemplate(){
       this.template = Vue.compile(this.html)
     },
@@ -50,6 +53,7 @@ export default {
     onclick (event) {
       // console.log("Clicked on header menu link", event);
       const href = event.target.getAttribute('href')
+      // this.openCloseHamMenu(false)
       this.$router.push(href)
     }
   },

web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue

@@ -73,7 +73,8 @@ export default {
     ...mapActions({
       createFlagColl: 'User/createFlagColl',
       deleteFlagColl: 'User/deleteFlagColl',
-      openFlagColl: 'User/openFlagColl'
+      openFlagColl: 'User/openFlagColl',
+      openCloseHamMenu: 'Common/openCloseHamMenu'
     }),
     onCreateFlagColl () {
       console.log("UserFlags onCreateFlagColl", this.new_folder_name)
@@ -136,6 +137,7 @@ export default {
     onOpenFlagColl (flagcollid) {
       // const flagcollid = e.target.getAttribute('flagcollid');
       console.log("UserFlags onOpenFlagColl", flagcollid);
+      this.openCloseHamMenu(false)
       this.openFlagColl(flagcollid)
         .then(() => {
           // console.log("onDeleteFlagColl then", data);

web/themes/custom/materiotheme/vuejs/store/modules/common.js

@@ -7,7 +7,8 @@ export default {
 
   // initial state
   state: {
-    pagetitle: null
+    pagetitle: null,
+    hamburgerMenuToggle: document.querySelector('input#header-block-right-toggle')
   },
 
   // getters
@@ -18,10 +19,18 @@ export default {
     setPagetitle (state, title) {
       console.log('Common, setPagetitle', title)
       state.pagetitle = title
+    },
+    setHamMenuState (state, s){
+      state.hamburgerMenuToggle.checked = s
     }
   },
 
   // actions
-  actions: {}
+  actions: {
+    openCloseHamMenu ({ dispatch, commit, state }, s) {
+      console.log('openCloseHamMenu', s)
+      commit('setHamMenuState', s)
+    }
+  }
 
 }