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/img/search.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="27mm"
+   height="27mm"
+   viewBox="0 0 27 27"
+   version="1.1"
+   id="svg15680"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="search.svg">
+  <defs
+     id="defs15674" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="52.394301"
+     inkscape:cy="66.669529"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1145"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata15677">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g16420"
+       transform="translate(0.81150293,0.21087508)">
+      <line
+         fill="none"
+         stroke="#3a58d8"
+         stroke-width="3.57754"
+         stroke-linecap="round"
+         stroke-miterlimit="10"
+         x1="2.0436606"
+         y1="24.433916"
+         x2="9.4872026"
+         y2="16.990374"
+         id="line4584"
+         style="stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g4590"
+         transform="matrix(0.26458333,0,0,0.26458333,-374.5235,-647.7866)">
+        <path
+           d="m 1509.371,2489.129 c -0.039,6.196 -0.996,11.639 -2.869,16.326 -1.873,4.687 -4.421,8.607 -7.642,11.755 -3.223,3.149 -7.049,5.509 -11.479,7.083 -4.43,1.574 -9.188,2.346 -14.269,2.315 -4.944,-0.03 -9.603,-0.859 -13.979,-2.487 -4.377,-1.628 -8.192,-4.033 -11.444,-7.224 -3.253,-3.187 -5.804,-7.137 -7.655,-11.847 -1.851,-4.71 -2.757,-10.164 -2.721,-16.361 0.039,-6.195 1.045,-11.637 3.024,-16.324 1.978,-4.688 4.629,-8.621 7.957,-11.805 3.326,-3.182 7.169,-5.561 11.53,-7.137 4.361,-1.574 8.945,-2.346 13.749,-2.316 4.943,0.029 9.601,0.857 13.979,2.486 4.375,1.629 8.188,4.055 11.442,7.276 3.252,3.222 5.805,7.188 7.656,11.899 1.851,4.713 2.758,10.165 2.721,16.361 z m -55.244,-0.337 c -0.022,3.551 0.392,6.758 1.247,9.616 0.854,2.86 2.09,5.322 3.715,7.385 1.623,2.064 3.614,3.662 5.973,4.787 2.36,1.13 5.074,1.703 8.137,1.721 2.992,0.02 5.695,-0.52 8.103,-1.621 2.411,-1.099 4.437,-2.67 6.086,-4.715 1.649,-2.041 2.916,-4.488 3.805,-7.339 0.886,-2.848 1.343,-6.049 1.364,-9.601 0.021,-3.549 -0.396,-6.772 -1.247,-9.666 -0.854,-2.895 -2.092,-5.372 -3.714,-7.438 -1.624,-2.062 -3.631,-3.659 -6.029,-4.789 -2.395,-1.127 -5.091,-1.701 -8.082,-1.721 -3.064,-0.018 -5.784,0.539 -8.156,1.674 -2.374,1.135 -4.385,2.726 -6.033,4.768 -1.65,2.045 -2.917,4.509 -3.805,7.393 -0.89,2.885 -1.343,6.067 -1.364,9.546 z"
+           id="path4588" />
+      </g>
+      <circle
+         fill="#ff2326"
+         cx="15.244533"
+         cy="10.696454"
+         r="1.7219083"
+         id="circle4594"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.264583" />
+    </g>
+  </g>
+</svg>

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)
+    }
+  }
 
 }