refactored the layout:

removed fixed head, replaced with flex
moved pagetitle and searchform to headerbottom region
added Common store to vuejs with pagetitle data
added pagetitle vuejs component

config/sync/block.block.materiosapisearchblock.yml

@@ -8,8 +8,8 @@ dependencies:
     - materiotheme
 id: materiosapisearchblock
 theme: materiotheme
-region: content_top
-weight: 0
+region: header_bottom
+weight: -2
 provider: null
 plugin: materio_sapi_search_block
 settings:

config/sync/block.block.pagetitle.yml

@@ -1,15 +1,13 @@
-uuid: e24f300b-ad2d-47ff-851c-875b1c353ce0
+uuid: 6949aa34-9acf-49e4-b95a-8551fd26b6bc
 langcode: en
 status: true
 dependencies:
-  module:
-    - system
   theme:
     - materiotheme
 id: pagetitle
 theme: materiotheme
-region: content
-weight: -1
+region: header_bottom
+weight: -3
 provider: null
 plugin: page_title_block
 settings:
@@ -17,9 +15,4 @@ settings:
   label: 'Page title'
   provider: core
   label_display: '0'
-visibility:
-  request_path:
-    id: request_path
-    pages: '<front>'
-    negate: true
-    context_mapping: {  }
+visibility: {  }

config/sync/block.block.tabs.yml

@@ -8,8 +8,8 @@ dependencies:
     - materiotheme
 id: tabs
 theme: materiotheme
-region: content
-weight: -2
+region: content_top
+weight: -3
 provider: null
 plugin: local_tasks_block
 settings:

config/sync/core.entity_view_display.node.frontpage.default.yml

@@ -19,7 +19,7 @@ mode: default
 content:
   computed_articles_reference:
     label: hidden
-    weight: 6
+    weight: 7
     region: content
     settings:
       view_mode: teaser
@@ -27,7 +27,7 @@ content:
     third_party_settings: {  }
     type: entity_reference_entity_view
   computed_materials_reference:
-    weight: 2
+    weight: 3
     region: content
     settings:
       view_mode: teaser
@@ -37,7 +37,7 @@ content:
     label: hidden
   computed_showrooms_reference:
     label: hidden
-    weight: 4
+    weight: 5
     region: content
     settings:
       view_mode: default
@@ -45,35 +45,35 @@ content:
     third_party_settings: {  }
     type: entity_reference_entity_view
   field_a_database:
-    weight: 1
+    weight: 2
     label: above
     settings: {  }
     third_party_settings: {  }
     type: text_default
     region: content
   field_blabla:
-    weight: 5
+    weight: 6
     label: above
     settings: {  }
     third_party_settings: {  }
     type: text_default
     region: content
   field_pricing:
-    weight: 7
+    weight: 8
     label: above
     settings: {  }
     third_party_settings: {  }
     type: text_default
     region: content
   field_showrooms:
-    weight: 3
+    weight: 4
     label: above
     settings: {  }
     third_party_settings: {  }
     type: text_default
     region: content
   field_what_is_materio:
-    weight: 0
+    weight: 1
     label: above
     settings: {  }
     third_party_settings: {  }
@@ -81,7 +81,7 @@ content:
     region: content
   title:
     type: string
-    weight: 8
+    weight: 0
     region: content
     label: hidden
     settings:

web/themes/custom/materiotheme/assets/dist/3f2f1fc790d5507ed234.hot-update.json

@@ -1 +0,0 @@
-{"h":"9b06c7ef8366e03bb4ea","c":{"main":true}}

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

@@ -28,7 +28,7 @@ import 'theme/assets/styles/main.scss'
 
   var MaterioTheme = function(){
 
-    var _v_sitebranding_block, _v_user_block, _v_main_content, _v_search_block;
+    var _v_sitebranding_block, _v_pagetitle_block, _v_user_block, _v_main_content, _v_search_block;
     var _is_front = drupalSettings.path.isFront;
 
     console.log('drupalSettings', drupalSettings);
@@ -44,6 +44,7 @@ import 'theme/assets/styles/main.scss'
 
     function initVues(){
       initVSiteBrandingBlock()
+      initVPagetitleBlock()
       initVUserBlock()
       initVMainContent()
       initVSearchBlock()
@@ -60,11 +61,36 @@ import 'theme/assets/styles/main.scss'
             let href = event.target.getAttribute('href');
             // console.log("Clicked on logo href", href);
             this.$router.push(href)
+            this.$store.commit('Common/setPagetitle', null)
           }
         }
       })
     }
 
+    function initVPagetitleBlock(){
+      let $blk = document.querySelector('#block-pagetitle')
+      let $h2 = $blk.querySelector('h2')
+      // get the loaded pagetitle
+      let title = $h2.innerText
+      // if not front recorde the loaded pagetitle in store
+      if (!_is_front) {
+        store.commit('Common/setPagetitle', title)
+      }
+      // replace in template the pagetitle by vue binding
+      $h2.innerText = '{{ pagetitle }}'
+      // create the vue
+      _v_pagetitle_block = new Vue({
+        store,
+        router,
+        el: $blk,
+        computed: {
+          ...mapState({
+            pagetitle: state => state.Common.pagetitle
+          })
+        },
+      })
+    }
+
     function initVUserBlock(){
       let mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';
       let props = {
@@ -126,7 +152,8 @@ import 'theme/assets/styles/main.scss'
         // else create the empty block to fill it later with async data
         $search_block = document.createElement('div')
         $search_block.setAttribute('id', id)
-        let $region = document.getElementById('content-top');
+        // TODO: get region by REST
+        let $region = document.getElementById('header-bottom');
         $region.appendChild($search_block);
       }
 

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

@@ -14,6 +14,9 @@ body{
 
 div.dialog-off-canvas-main-canvas{
   width: 100vw;
+  height:100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
@@ -45,17 +48,24 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
 // |_||_\___\__,_\__,_\___|_|
 
 header[role="banner"]{
-   
+  flex:0 0 auto;
   background-color: #fff;
-  overflow: visible;
-  position: fixed;
-  z-index: 20;
+  // overflow: visible;
+  // position: fixed;
+  // z-index: 20;
   width:100vw;
-  height: $header_height;
+  // height: $header_height;
   .wrapper{
     @extend %grided-width;
     // box-sizing:border-box;
-    
+    background-color: #fff;
+
+    &:after{
+      content:"";
+      clear:both;
+      display: block;
+    }
+
     .header-block{
       min-height: 15px;
       font-size: 0;
@@ -73,14 +83,20 @@ header[role="banner"]{
 }
 
 
+
 //  __  __      _
 // |  \/  |__ _(_)_ _
 // | |\/| / _` | | ' \
 // |_|  |_\__,_|_|_||_|
 
 main[role="main"]{
-  @extend %grided-width;
-
-  padding-top: $header_height+8px;
-  
+  flex:1 1 auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  &>.wrapper{
+    width:100vw;
+    &>*{
+      @extend %grided-width;
+    }
+  }
 }

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

@@ -1,6 +1,4 @@
 $base_font_size:16px;
 
-$header_height: 60px;
-
 $column_width: 210px;
-$column_goutiere: 15px;
+$column_goutiere: 15px;

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

@@ -171,60 +171,73 @@ header[role="banner"]{
 
   }
 
-}
-
-aside.messages{
-  padding: 0;
-}
 
-// content top
-#content-top{
-  &:after{
-    content:"";
-    clear:both;
-    display: block;
+  // header bottom
+  #block-pagetitle{
+    float: left;
+    padding:1em 0;
+    h2{
+      margin:0;
+      font-size: 1.512em;
+      text-transform: capitalize;
+      font-weight: 300;
+    }
   }
-}
 
-#block-materiosapisearchblock{
-  float:right;
-  display:inline-block;
-  // box-shadow: 0 0 5px rgba(0,0,0,0.2);
-  padding:0;
 
-  #materio-sapi-search-form{
-    .form-item, input.button{
-      display: inline-block;
-    }
+  #block-materiosapisearchblock{
+    float:right;
+    display:inline-block;
+    // box-shadow: 0 0 5px rgba(0,0,0,0.2);
+    padding:0;
 
-    #edit-search{
-      border:1px #BBB solid;
-      border-radius: 14px;
-      padding:0.3em;
-      color:#666;
-    }
+    #materio-sapi-search-form{
+      .form-item, input.button{
+        display: inline-block;
+      }
+
+      #edit-search{
+        border:1px #BBB solid;
+        border-radius: 14px;
+        padding:0.3em;
+        color:#666;
+      }
+
+      #edit-submit{
+        border:0;
+        text-indent: 50px;
+        overflow: hidden;
+        width:20px; height:20px;
+        margin:0;
+        // border-radius: 7px;
+        background-image: url('../img/search.png');
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+      }
 
-    #edit-submit{
-      border:0;
-      text-indent: 50px;
-      overflow: hidden;
-      width:20px; height:20px;
-      margin:0;
-      // border-radius: 7px;
-      background-image: url('../img/search.png');
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
     }
 
   }
-
 }
 
-h1.page-title{
-  margin:0;
+
+
+// main
+aside.messages{
+  padding: 0;
 }
 
+// content top
+// #content-top{
+//   &:after{
+//     content:"";
+//     clear:both;
+//     display: block;
+//   }
+// }
+
+
 // front
 article.node--type-frontpage{
   .node__content{
@@ -276,11 +289,13 @@ article.node--type-frontpage{
   }
 }
 
-
 .cards-list{
   position: relative;
   .search-info{
-    margin:0 0 1em 0;
+    font-size: 0.756em;
+    font-weight: 500;
+    margin: 0;
+    padding: 0 0 0.5em 0;
   }
 
   &>ul{

web/themes/custom/materiotheme/materiotheme.info.yml

@@ -13,6 +13,7 @@ regions:
   header_left: 'Header left'
   header_middle: 'Header middle'
   header_right: 'Header right'
+  header_bottom: 'Header bottom'
   content_top: 'Content Top'
   content: Content
   footer_left: 'Footer Left'

web/themes/custom/materiotheme/materiotheme.libraries.yml

@@ -4,7 +4,7 @@ global-css:
     theme:
       assets/fonts/ubuntu/ubuntu.css: {}
       assets/styles/mdi/css/materialdesignicons.min.css: {}
-      assets/dist/main.css: {}
+      # assets/dist/main.css: {}
 
 global-js:
   version: VERSION

web/themes/custom/materiotheme/materiotheme.theme

@@ -41,6 +41,12 @@ function materiotheme_preprocess_html(&$vars) {
   // ]);
   // $vars['head_title'] = $head_title;
 
+  // $title = "The new title";
+  // $request = \Drupal::request();
+  // if ($route = $request->attributes->get(\Symfony\Cmf\Component\Routing\RouteObjectInterface::ROUTE_OBJECT)) {
+  //   $route->setDefault('_title', $title);
+  // }
+
   global $base_url;
   $theme = \Drupal::theme()->getActiveTheme();
   $vars['#attached']['drupalSettings']['path']['themePath'] = $base_url .'/'. $theme->getPath();
@@ -67,6 +73,7 @@ function materiotheme_preprocess_html(&$vars) {
 
 function materiotheme_preprocess_page(&$vars){
   // dsm($vars, 'vars');
+
 }
 
 // function materiotheme_preprocess_node(&$vars){
@@ -79,10 +86,10 @@ function materiotheme_preprocess_page(&$vars){
 //   ));
 // }
 
-function materiotheme_preprocess_node_materiau_teaser(&$vars){
+// function materiotheme_preprocess_node_materiau_teaser(&$vars){
   // $vars['attributes']['class'] = 'card';
   // kint($vars['attributes']);
-}
+// }
 
 /**
  * Implements hook_form_alter

web/themes/custom/materiotheme/templates/content/page-title.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Default theme implementation for page titles.
+ *
+ * Available variables:
+ * - title_attributes: HTML attributes for the page title element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title: The page title, for use in the actual content.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @ingroup themeable
+ */
+#}
+{{ title_prefix }}
+{% if title %}
+  <h2{{ title_attributes }}>{{ title }}</h2>
+{% endif %}
+{{ title_suffix }}

web/themes/custom/materiotheme/templates/layout/page.html.twig

@@ -57,22 +57,26 @@
         {% endif %}
       </div>
     </div>
+    <div id="header-bottom" class="wrapper">
+      {{ page.header_bottom}}
+    </div>
   </header>
 
   <main role="main">
-    {% if page.content.messages %}
-      <aside class="messages">
-        {{ page.content.messages }}
-      </aside>
-    {% endif %}
+    <div class="wrapper">
+      {% if page.content.messages %}
+        <aside class="messages">
+          {{ page.content.messages }}
+        </aside>
+      {% endif %}
 
-    <div id="content-top">
-      {{ page.content_top }}
+      <div id="content-top">
+        {{ page.content_top }}
+      </div>
+      <div id="main-content">
+        {{ page.content|without('messages') }}
+      </div>{# /.layout-content #}
     </div>
-
-    <div id="main-content">
-      {{ page.content|without('messages') }}
-    </div>{# /.layout-content #}
   </main>
 
   {% if page.footer_left or page.footer_center or page.footer_right %}

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

@@ -1,6 +1,5 @@
 <template>
   <div id="Base">
-    <h1 class="page-title">{{ pagetitle }}</h1>
     <div class="loading" v-if="!items.length">
       <span>Loading ...</span>
     </div>

web/themes/custom/materiotheme/vuejs/store/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import Common from './modules/common'
 import User from './modules/user'
 import Search from './modules/search'
 
@@ -8,6 +9,7 @@ import Search from './modules/search'
 Vue.use(Vuex)
 export default new Vuex.Store({
   modules: {
+    Common,
     User,
     Search
   }

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

@@ -0,0 +1,27 @@
+import { REST } from 'vuejs/api/rest-axios'
+import { JSONAPI } from 'vuejs/api/json-axios'
+import qs from 'querystring'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state : {
+    pagetitle:null,
+  },
+
+  // getters
+  getters : {},
+
+  // mutations
+  mutations : {
+    setPagetitle (state, title) {
+      console.log('Common, setPagetitle', title);
+      state.pagetitle = title
+    }
+  },
+
+  // actions
+  actions : {}
+
+}

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

@@ -17,7 +17,7 @@ export default {
     count: 0,
     // infinteState will come from vue-infinite-loading plugin
     // implemented in vuejs/components/Content/Base.vue
-    infiniteState: null
+    infiniteLoadingState: null
   },
 
   // getters
@@ -55,8 +55,8 @@ export default {
     incrementOffset(state) {
       state.offset += state.limit
     },
-    setInfiniteState(state, s){
-      state.infiniteState = s
+    setInfiniteState(state, infiniteLoadingstate){
+      state.infiniteLoadingState = infiniteLoadingstate
     }
   },
 
@@ -67,12 +67,13 @@ export default {
       commit('resetUuids')
       commit('resetItems')
       commit('resetOffset')
+      this.commit('Common/setPagetitle', state.keys)
       dispatch('getResults')
     },
-    nextPage ({ dispatch, commit, state }, $state) {
-      console.log("Search nextPage", $state);
+    nextPage ({ dispatch, commit, state }, $infiniteLoadingstate) {
+      console.log("Search nextPage", $infiniteLoadingstate);
       commit('incrementOffset')
-      commit('setInfiniteState', $state)
+      commit('setInfiniteState', $infiniteLoadingstate)
       dispatch('getResults')
     },
     getResults ({ dispatch, commit, state }) {
@@ -161,15 +162,15 @@ export default {
       }
       console.log('items', items)
       commit('setItems', items)
-      if(state.infiniteState){
+      if(state.infiniteLoadingState){
         if (state.offset + state.limit > state.count) {
           console.log('Search infinite completed');
           // tell to vue-infinite-loading plugin that there si no new page
-          state.infiniteState.complete()
+          state.infiniteLoadingState.complete()
         }else{
           console.log('Search infinite loaded');
           // tell to vue-infinite-loading plugin that newpage is loaded
-          state.infiniteState.loaded()
+          state.infiniteLoadingState.loaded()
         }
       }
     }