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/dist/main.css

@@ -1,1203 +0,0 @@
-
-
-#user-tools[data-v-4e9a834e]{
-  margin-right:0.5em;
-  padding-right:0.5em;
-  border-right:1px solid #222;
-}
-h4[data-v-4e9a834e]{
-  margin:0;
-  display:inline-block;
-  font-size:inherited;
-}
-
-body {
-  background: white; }
-
-a {
-  color: inherit;
-  text-decoration: none; }
-
-a, a:focus, a:active {
-  outline: none; }
-
-a:focus {
-  -moz-outline-style: none; }
-
-.col-1, .small-col-1, .med-col-1, .large-col-1, .col-2, .small-col-2, .med-col-2, .large-col-2, .col-3, .small-col-3, .med-col-3, .large-col-3, .col-4, .small-col-4, .med-col-4, .large-col-4, .col-5, .small-col-5, .med-col-5, .large-col-5, .col-6, .small-col-6, .med-col-6, .large-col-6, .col-7, .small-col-7, .med-col-7, .large-col-7, .col-8, .small-col-8, .med-col-8, .large-col-8, .col-9, .small-col-9, .med-col-9, .large-col-9, .col-10, .small-col-10, .med-col-10, .large-col-10, .col-11, .small-col-11, .med-col-11, .large-col-11, .col-12, .small-col-12, .med-col-12, .large-col-12, .col-1-offset-1, .col-1-offset-2, .col-1-offset-3, .col-1-offset-4, .col-1-offset-5, .col-1-offset-6, .col-1-offset-7, .col-1-offset-8, .col-1-offset-9, .col-1-offset-10, .col-1-offset-11, .col-2-offset-1, .col-2-offset-2, .col-2-offset-3, .col-2-offset-4, .col-2-offset-5, .col-2-offset-6, .col-2-offset-7, .col-2-offset-8, .col-2-offset-9, .col-2-offset-10, .col-3-offset-1, .col-3-offset-2, .col-3-offset-3, .col-3-offset-4, .col-3-offset-5, .col-3-offset-6, .col-3-offset-7, .col-3-offset-8, .col-3-offset-9, .col-4-offset-1, .col-4-offset-2, .col-4-offset-3, .col-4-offset-4, .col-4-offset-5, .col-4-offset-6, .col-4-offset-7, .col-4-offset-8, .col-5-offset-1, .col-5-offset-2, .col-5-offset-3, .col-5-offset-4, .col-5-offset-5, .col-5-offset-6, .col-5-offset-7, .col-6-offset-1, .col-6-offset-2, .col-6-offset-3, .col-6-offset-4, .col-6-offset-5, .col-6-offset-6, .col-7-offset-1, .col-7-offset-2, .col-7-offset-3, .col-7-offset-4, .col-7-offset-5, .col-8-offset-1, .col-8-offset-2, .col-8-offset-3, .col-8-offset-4, .col-9-offset-1, .col-9-offset-2, .col-9-offset-3, .col-10-offset-1, .col-10-offset-2, .col-11-offset-1 {
-  width: 100%;
-  float: left;
-  box-sizing: border-box; }
-
-.row {
-  position: relative; }
-  .row > * {
-    font-size: 16px; }
-
-.col-1 {
-  padding-left: 0em;
-  padding-right: 1em;
-  margin-left: 0%;
-  width: 8.33333%; }
-  .col-1:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-1 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 8.33333%; }
-    .small-col-1:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-1 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 8.33333%; }
-    .med-col-1:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-1 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 8.33333%; }
-    .large-col-1:last-child {
-      padding-right: 0; } }
-
-.col-2 {
-  padding-left: 0em;
-  padding-right: 1em;
-  margin-left: 0%;
-  width: 16.66667%; }
-  .col-2:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-2 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 16.66667%; }
-    .small-col-2:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-2 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 16.66667%; }
-    .med-col-2:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-2 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 16.66667%; }
-    .large-col-2:last-child {
-      padding-right: 0; } }
-
-.col-3 {
-  padding-left: 0em;
-  padding-right: 1em;
-  margin-left: 0%;
-  width: 25%; }
-  .col-3:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-3 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 25%; }
-    .small-col-3:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-3 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 25%; }
-    .med-col-3:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-3 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 25%; }
-    .large-col-3:last-child {
-      padding-right: 0; } }
-
-.col-4 {
-  padding-left: 0em;
-  padding-right: 1em;
-  margin-left: 0%;
-  width: 33.33333%; }
-  .col-4:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-4 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 33.33333%; }
-    .small-col-4:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-4 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 33.33333%; }
-    .med-col-4:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-4 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 33.33333%; }
-    .large-col-4:last-child {
-      padding-right: 0; } }
-
-.col-5 {
-  padding-left: 0em;
-  padding-right: 1em;
-  margin-left: 0%;
-  width: 41.66667%; }
-  .col-5:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-5 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 41.66667%; }
-    .small-col-5:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-5 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 41.66667%; }
-    .med-col-5:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-5 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 41.66667%; }
-    .large-col-5:last-child {
-      padding-right: 0; } }
-
-.col-6 {
-  padding-left: 0em;
-  padding-right: 1em;
-  margin-left: 0%;
-  width: 50%; }
-  .col-6:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-6 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 50%; }
-    .small-col-6:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-6 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 50%; }
-    .med-col-6:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-6 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 50%; }
-    .large-col-6:last-child {
-      padding-right: 0; } }
-
-.col-7 {
-  padding-left: 0em;
-  padding-right: 1em;
-  margin-left: 0%;
-  width: 58.33333%; }
-  .col-7:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-7 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 58.33333%; }
-    .small-col-7:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-7 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 58.33333%; }
-    .med-col-7:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-7 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 58.33333%; }
-    .large-col-7:last-child {
-      padding-right: 0; } }
-
-.col-8 {
-  padding-left: 0em;
-  padding-right: 1em;
-  margin-left: 0%;
-  width: 66.66667%; }
-  .col-8:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-8 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 66.66667%; }
-    .small-col-8:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-8 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 66.66667%; }
-    .med-col-8:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-8 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 66.66667%; }
-    .large-col-8:last-child {
-      padding-right: 0; } }
-
-.col-9 {
-  padding-left: 0em;
-  padding-right: 1em;
-  margin-left: 0%;
-  width: 75%; }
-  .col-9:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-9 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 75%; }
-    .small-col-9:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-9 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 75%; }
-    .med-col-9:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-9 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 75%; }
-    .large-col-9:last-child {
-      padding-right: 0; } }
-
-.col-10 {
-  padding-left: 0em;
-  padding-right: 1em;
-  margin-left: 0%;
-  width: 83.33333%; }
-  .col-10:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-10 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 83.33333%; }
-    .small-col-10:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-10 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 83.33333%; }
-    .med-col-10:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-10 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 83.33333%; }
-    .large-col-10:last-child {
-      padding-right: 0; } }
-
-.col-11 {
-  padding-left: 0em;
-  padding-right: 1em;
-  margin-left: 0%;
-  width: 91.66667%; }
-  .col-11:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-11 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 91.66667%; }
-    .small-col-11:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-11 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 91.66667%; }
-    .med-col-11:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-11 {
-    padding-left: 0em;
-    padding-right: 1em;
-    margin-left: 0%;
-    width: 91.66667%; }
-    .large-col-11:last-child {
-      padding-right: 0; } }
-
-.col-12 {
-  padding-left: 0em;
-  padding-right: 0;
-  margin-left: 0%;
-  width: 100%; }
-  .col-12:last-child {
-    padding-right: 0; }
-
-@media only screen and (max-width: 768px) {
-  .small-col-12 {
-    padding-left: 0em;
-    padding-right: 0;
-    margin-left: 0%;
-    width: 100%; }
-    .small-col-12:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 769px) and (max-width: 1080px) {
-  .med-col-12 {
-    padding-left: 0em;
-    padding-right: 0;
-    margin-left: 0%;
-    width: 100%; }
-    .med-col-12:last-child {
-      padding-right: 0; } }
-
-@media only screen and (min-width: 1081px) {
-  .large-col-12 {
-    padding-left: 0em;
-    padding-right: 0;
-    margin-left: 0%;
-    width: 100%; }
-    .large-col-12:last-child {
-      padding-right: 0; } }
-
-.col-1-offset-1 {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-left: 8.33333%;
-  width: 8.33333%; }
-  .col-1-offset-1:last-child {
-    padding-right: 0; }
-
-.col-1-offset-2 {
-  padding-left: 2em;
-  padding-right: 1em;
-  margin-left: 16.66667%;
-  width: 8.33333%; }
-  .col-1-offset-2:last-child {
-    padding-right: 0; }
-
-.col-1-offset-3 {
-  padding-left: 3em;
-  padding-right: 1em;
-  margin-left: 25%;
-  width: 8.33333%; }
-  .col-1-offset-3:last-child {
-    padding-right: 0; }
-
-.col-1-offset-4 {
-  padding-left: 4em;
-  padding-right: 1em;
-  margin-left: 33.33333%;
-  width: 8.33333%; }
-  .col-1-offset-4:last-child {
-    padding-right: 0; }
-
-.col-1-offset-5 {
-  padding-left: 5em;
-  padding-right: 1em;
-  margin-left: 41.66667%;
-  width: 8.33333%; }
-  .col-1-offset-5:last-child {
-    padding-right: 0; }
-
-.col-1-offset-6 {
-  padding-left: 6em;
-  padding-right: 1em;
-  margin-left: 50%;
-  width: 8.33333%; }
-  .col-1-offset-6:last-child {
-    padding-right: 0; }
-
-.col-1-offset-7 {
-  padding-left: 7em;
-  padding-right: 1em;
-  margin-left: 58.33333%;
-  width: 8.33333%; }
-  .col-1-offset-7:last-child {
-    padding-right: 0; }
-
-.col-1-offset-8 {
-  padding-left: 8em;
-  padding-right: 1em;
-  margin-left: 66.66667%;
-  width: 8.33333%; }
-  .col-1-offset-8:last-child {
-    padding-right: 0; }
-
-.col-1-offset-9 {
-  padding-left: 9em;
-  padding-right: 1em;
-  margin-left: 75%;
-  width: 8.33333%; }
-  .col-1-offset-9:last-child {
-    padding-right: 0; }
-
-.col-1-offset-10 {
-  padding-left: 10em;
-  padding-right: 1em;
-  margin-left: 83.33333%;
-  width: 8.33333%; }
-  .col-1-offset-10:last-child {
-    padding-right: 0; }
-
-.col-1-offset-11 {
-  padding-left: 11em;
-  padding-right: 1em;
-  margin-left: 91.66667%;
-  width: 8.33333%; }
-  .col-1-offset-11:last-child {
-    padding-right: 0; }
-
-.col-2-offset-1 {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-left: 16.66667%;
-  width: 16.66667%; }
-  .col-2-offset-1:last-child {
-    padding-right: 0; }
-
-.col-2-offset-2 {
-  padding-left: 2em;
-  padding-right: 1em;
-  margin-left: 33.33333%;
-  width: 16.66667%; }
-  .col-2-offset-2:last-child {
-    padding-right: 0; }
-
-.col-2-offset-3 {
-  padding-left: 3em;
-  padding-right: 1em;
-  margin-left: 50%;
-  width: 16.66667%; }
-  .col-2-offset-3:last-child {
-    padding-right: 0; }
-
-.col-2-offset-4 {
-  padding-left: 4em;
-  padding-right: 1em;
-  margin-left: 66.66667%;
-  width: 16.66667%; }
-  .col-2-offset-4:last-child {
-    padding-right: 0; }
-
-.col-2-offset-5 {
-  padding-left: 5em;
-  padding-right: 1em;
-  margin-left: 83.33333%;
-  width: 16.66667%; }
-  .col-2-offset-5:last-child {
-    padding-right: 0; }
-
-.col-2-offset-6 {
-  padding-left: 6em;
-  padding-right: 1em;
-  margin-left: 100%;
-  width: 16.66667%; }
-  .col-2-offset-6:last-child {
-    padding-right: 0; }
-
-.col-2-offset-7 {
-  padding-left: 7em;
-  padding-right: 1em;
-  margin-left: 116.66667%;
-  width: 16.66667%; }
-  .col-2-offset-7:last-child {
-    padding-right: 0; }
-
-.col-2-offset-8 {
-  padding-left: 8em;
-  padding-right: 1em;
-  margin-left: 133.33333%;
-  width: 16.66667%; }
-  .col-2-offset-8:last-child {
-    padding-right: 0; }
-
-.col-2-offset-9 {
-  padding-left: 9em;
-  padding-right: 1em;
-  margin-left: 150%;
-  width: 16.66667%; }
-  .col-2-offset-9:last-child {
-    padding-right: 0; }
-
-.col-2-offset-10 {
-  padding-left: 10em;
-  padding-right: 1em;
-  margin-left: 166.66667%;
-  width: 16.66667%; }
-  .col-2-offset-10:last-child {
-    padding-right: 0; }
-
-.col-3-offset-1 {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-left: 25%;
-  width: 25%; }
-  .col-3-offset-1:last-child {
-    padding-right: 0; }
-
-.col-3-offset-2 {
-  padding-left: 2em;
-  padding-right: 1em;
-  margin-left: 50%;
-  width: 25%; }
-  .col-3-offset-2:last-child {
-    padding-right: 0; }
-
-.col-3-offset-3 {
-  padding-left: 3em;
-  padding-right: 1em;
-  margin-left: 75%;
-  width: 25%; }
-  .col-3-offset-3:last-child {
-    padding-right: 0; }
-
-.col-3-offset-4 {
-  padding-left: 4em;
-  padding-right: 1em;
-  margin-left: 100%;
-  width: 25%; }
-  .col-3-offset-4:last-child {
-    padding-right: 0; }
-
-.col-3-offset-5 {
-  padding-left: 5em;
-  padding-right: 1em;
-  margin-left: 125%;
-  width: 25%; }
-  .col-3-offset-5:last-child {
-    padding-right: 0; }
-
-.col-3-offset-6 {
-  padding-left: 6em;
-  padding-right: 1em;
-  margin-left: 150%;
-  width: 25%; }
-  .col-3-offset-6:last-child {
-    padding-right: 0; }
-
-.col-3-offset-7 {
-  padding-left: 7em;
-  padding-right: 1em;
-  margin-left: 175%;
-  width: 25%; }
-  .col-3-offset-7:last-child {
-    padding-right: 0; }
-
-.col-3-offset-8 {
-  padding-left: 8em;
-  padding-right: 1em;
-  margin-left: 200%;
-  width: 25%; }
-  .col-3-offset-8:last-child {
-    padding-right: 0; }
-
-.col-3-offset-9 {
-  padding-left: 9em;
-  padding-right: 1em;
-  margin-left: 225%;
-  width: 25%; }
-  .col-3-offset-9:last-child {
-    padding-right: 0; }
-
-.col-4-offset-1 {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-left: 33.33333%;
-  width: 33.33333%; }
-  .col-4-offset-1:last-child {
-    padding-right: 0; }
-
-.col-4-offset-2 {
-  padding-left: 2em;
-  padding-right: 1em;
-  margin-left: 66.66667%;
-  width: 33.33333%; }
-  .col-4-offset-2:last-child {
-    padding-right: 0; }
-
-.col-4-offset-3 {
-  padding-left: 3em;
-  padding-right: 1em;
-  margin-left: 100%;
-  width: 33.33333%; }
-  .col-4-offset-3:last-child {
-    padding-right: 0; }
-
-.col-4-offset-4 {
-  padding-left: 4em;
-  padding-right: 1em;
-  margin-left: 133.33333%;
-  width: 33.33333%; }
-  .col-4-offset-4:last-child {
-    padding-right: 0; }
-
-.col-4-offset-5 {
-  padding-left: 5em;
-  padding-right: 1em;
-  margin-left: 166.66667%;
-  width: 33.33333%; }
-  .col-4-offset-5:last-child {
-    padding-right: 0; }
-
-.col-4-offset-6 {
-  padding-left: 6em;
-  padding-right: 1em;
-  margin-left: 200%;
-  width: 33.33333%; }
-  .col-4-offset-6:last-child {
-    padding-right: 0; }
-
-.col-4-offset-7 {
-  padding-left: 7em;
-  padding-right: 1em;
-  margin-left: 233.33333%;
-  width: 33.33333%; }
-  .col-4-offset-7:last-child {
-    padding-right: 0; }
-
-.col-4-offset-8 {
-  padding-left: 8em;
-  padding-right: 1em;
-  margin-left: 266.66667%;
-  width: 33.33333%; }
-  .col-4-offset-8:last-child {
-    padding-right: 0; }
-
-.col-5-offset-1 {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-left: 41.66667%;
-  width: 41.66667%; }
-  .col-5-offset-1:last-child {
-    padding-right: 0; }
-
-.col-5-offset-2 {
-  padding-left: 2em;
-  padding-right: 1em;
-  margin-left: 83.33333%;
-  width: 41.66667%; }
-  .col-5-offset-2:last-child {
-    padding-right: 0; }
-
-.col-5-offset-3 {
-  padding-left: 3em;
-  padding-right: 1em;
-  margin-left: 125%;
-  width: 41.66667%; }
-  .col-5-offset-3:last-child {
-    padding-right: 0; }
-
-.col-5-offset-4 {
-  padding-left: 4em;
-  padding-right: 1em;
-  margin-left: 166.66667%;
-  width: 41.66667%; }
-  .col-5-offset-4:last-child {
-    padding-right: 0; }
-
-.col-5-offset-5 {
-  padding-left: 5em;
-  padding-right: 1em;
-  margin-left: 208.33333%;
-  width: 41.66667%; }
-  .col-5-offset-5:last-child {
-    padding-right: 0; }
-
-.col-5-offset-6 {
-  padding-left: 6em;
-  padding-right: 1em;
-  margin-left: 250%;
-  width: 41.66667%; }
-  .col-5-offset-6:last-child {
-    padding-right: 0; }
-
-.col-5-offset-7 {
-  padding-left: 7em;
-  padding-right: 1em;
-  margin-left: 291.66667%;
-  width: 41.66667%; }
-  .col-5-offset-7:last-child {
-    padding-right: 0; }
-
-.col-6-offset-1 {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-left: 50%;
-  width: 50%; }
-  .col-6-offset-1:last-child {
-    padding-right: 0; }
-
-.col-6-offset-2 {
-  padding-left: 2em;
-  padding-right: 1em;
-  margin-left: 100%;
-  width: 50%; }
-  .col-6-offset-2:last-child {
-    padding-right: 0; }
-
-.col-6-offset-3 {
-  padding-left: 3em;
-  padding-right: 1em;
-  margin-left: 150%;
-  width: 50%; }
-  .col-6-offset-3:last-child {
-    padding-right: 0; }
-
-.col-6-offset-4 {
-  padding-left: 4em;
-  padding-right: 1em;
-  margin-left: 200%;
-  width: 50%; }
-  .col-6-offset-4:last-child {
-    padding-right: 0; }
-
-.col-6-offset-5 {
-  padding-left: 5em;
-  padding-right: 1em;
-  margin-left: 250%;
-  width: 50%; }
-  .col-6-offset-5:last-child {
-    padding-right: 0; }
-
-.col-6-offset-6 {
-  padding-left: 6em;
-  padding-right: 1em;
-  margin-left: 300%;
-  width: 50%; }
-  .col-6-offset-6:last-child {
-    padding-right: 0; }
-
-.col-7-offset-1 {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-left: 58.33333%;
-  width: 58.33333%; }
-  .col-7-offset-1:last-child {
-    padding-right: 0; }
-
-.col-7-offset-2 {
-  padding-left: 2em;
-  padding-right: 1em;
-  margin-left: 116.66667%;
-  width: 58.33333%; }
-  .col-7-offset-2:last-child {
-    padding-right: 0; }
-
-.col-7-offset-3 {
-  padding-left: 3em;
-  padding-right: 1em;
-  margin-left: 175%;
-  width: 58.33333%; }
-  .col-7-offset-3:last-child {
-    padding-right: 0; }
-
-.col-7-offset-4 {
-  padding-left: 4em;
-  padding-right: 1em;
-  margin-left: 233.33333%;
-  width: 58.33333%; }
-  .col-7-offset-4:last-child {
-    padding-right: 0; }
-
-.col-7-offset-5 {
-  padding-left: 5em;
-  padding-right: 1em;
-  margin-left: 291.66667%;
-  width: 58.33333%; }
-  .col-7-offset-5:last-child {
-    padding-right: 0; }
-
-.col-8-offset-1 {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-left: 66.66667%;
-  width: 66.66667%; }
-  .col-8-offset-1:last-child {
-    padding-right: 0; }
-
-.col-8-offset-2 {
-  padding-left: 2em;
-  padding-right: 1em;
-  margin-left: 133.33333%;
-  width: 66.66667%; }
-  .col-8-offset-2:last-child {
-    padding-right: 0; }
-
-.col-8-offset-3 {
-  padding-left: 3em;
-  padding-right: 1em;
-  margin-left: 200%;
-  width: 66.66667%; }
-  .col-8-offset-3:last-child {
-    padding-right: 0; }
-
-.col-8-offset-4 {
-  padding-left: 4em;
-  padding-right: 1em;
-  margin-left: 266.66667%;
-  width: 66.66667%; }
-  .col-8-offset-4:last-child {
-    padding-right: 0; }
-
-.col-9-offset-1 {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-left: 75%;
-  width: 75%; }
-  .col-9-offset-1:last-child {
-    padding-right: 0; }
-
-.col-9-offset-2 {
-  padding-left: 2em;
-  padding-right: 1em;
-  margin-left: 150%;
-  width: 75%; }
-  .col-9-offset-2:last-child {
-    padding-right: 0; }
-
-.col-9-offset-3 {
-  padding-left: 3em;
-  padding-right: 1em;
-  margin-left: 225%;
-  width: 75%; }
-  .col-9-offset-3:last-child {
-    padding-right: 0; }
-
-.col-10-offset-1 {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-left: 83.33333%;
-  width: 83.33333%; }
-  .col-10-offset-1:last-child {
-    padding-right: 0; }
-
-.col-10-offset-2 {
-  padding-left: 2em;
-  padding-right: 1em;
-  margin-left: 166.66667%;
-  width: 83.33333%; }
-  .col-10-offset-2:last-child {
-    padding-right: 0; }
-
-.col-11-offset-1 {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-left: 91.66667%;
-  width: 91.66667%; }
-  .col-11-offset-1:last-child {
-    padding-right: 0; }
-
-.col.float-right {
-  float: right;
-  padding-right: 0;
-  padding-left: 1em; }
-
-body, html {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  font-family: sans-serif;
-  font-style: normal;
-  margin: 0;
-  padding: 0; }
-
-body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs {
-  padding-top: 24px !important; }
-
-header[role="banner"] {
-  background-color: #fff;
-  overflow: visible;
-  position: fixed;
-  z-index: 10;
-  width: 100vw;
-  height: 80px; }
-  header[role="banner"] .wrapper .header-block {
-    min-height: 15px;
-    font-size: 0; }
-    header[role="banner"] .wrapper .header-block.header-right {
-      text-align: right; }
-    header[role="banner"] .wrapper .header-block > * {
-      display: inline-block;
-      vertical-align: top;
-      font-size: 16px;
-      text-align: left; }
-
-main[role="main"] {
-  padding-top: 80px; }
-
-body {
-  font-size: 16px;
-  font-family: "Ubuntu",Arial,"MS Trebuchet",sans-serif;
-  font-weight: 500;
-  font-style: normal;
-  line-height: 1.3; }
-
-aside.messages {
-  border: none; }
-
-header[role="banner"] {
-  padding: 0.2em 0 0 0; }
-  header[role="banner"] #block-sitebranding h1 {
-    margin: 0;
-    line-height: 1; }
-  header[role="banner"] #block-userlogin {
-    position: relative;
-    width: 8em;
-    overflow: visible; }
-    header[role="banner"] #block-userlogin h2 {
-      margin: 0;
-      font-size: 1em;
-      font-weight: 400; }
-    header[role="banner"] #block-userlogin > section {
-      background-color: #fff;
-      overflow: hidden;
-      width: 11em;
-      height: 1px;
-      padding: 0.01em 1em;
-      box-sizing: content-box;
-      transition: all 0.4s ease-in-out;
-      transition-delay: 2s;
-      position: absolute;
-      right: 0;
-      top: 1.7em;
-      box-sizing: content-box; }
-    header[role="banner"] #block-userlogin:hover > section {
-      transition-delay: 0s;
-      height: 12em;
-      padding: 1em 1em;
-      box-shadow: 0 0 10px #ccc; }
-    header[role="banner"] #block-userlogin .form-item {
-      margin: 0;
-      position: relative;
-      width: 100%; }
-      header[role="banner"] #block-userlogin .form-item.form-item-name {
-        margin: 2px 0 0.5em 0; }
-        header[role="banner"] #block-userlogin .form-item.form-item-name input {
-          width: 90%;
-          padding: 0;
-          box-sizing: content-box; }
-      header[role="banner"] #block-userlogin .form-item.form-item-pass {
-        margin: 0 0 0.5em 0; }
-        header[role="banner"] #block-userlogin .form-item.form-item-pass input {
-          width: 90%;
-          padding: 0;
-          box-sizing: content-box; }
-      header[role="banner"] #block-userlogin .form-item.form-item-persistent-login {
-        font-size: 0.756em; }
-        header[role="banner"] #block-userlogin .form-item.form-item-persistent-login label {
-          vertical-align: top; }
-    header[role="banner"] #block-userlogin #edit-actions {
-      margin: 0; }
-    header[role="banner"] #block-userlogin .item-list ul {
-      margin: 0; }
-      header[role="banner"] #block-userlogin .item-list ul li {
-        list-style: none;
-        margin: 0; }
-        header[role="banner"] #block-userlogin .item-list ul li a {
-          font-size: 0.756em; }
-  header[role="banner"] #block-languageswitcher h2 {
-    margin: 0.1em 0 0 0;
-    font-size: 0.756em;
-    font-weight: 400;
-    padding: 0.1em 0.4em 0.2em;
-    border-radius: 3px;
-    background-color: #444;
-    color: #fff;
-    display: inline-block;
-    vertical-align: top; }
-  header[role="banner"] #block-languageswitcher > ul.links {
-    overflow: hidden;
-    width: 5em;
-    height: 1px;
-    padding: 0.01em 0;
-    margin: 0;
-    box-sizing: content-box;
-    transition: all 0.4s ease-in-out; }
-  header[role="banner"] #block-languageswitcher:hover > ul.links {
-    transition-delay: 0s;
-    height: 2em;
-    padding: 0.3em 0; }
-  header[role="banner"] #block-languageswitcher li {
-    list-style: none;
-    padding: 0; }
-    header[role="banner"] #block-languageswitcher li.is-active {
-      display: none; }
-    header[role="banner"] #block-languageswitcher li a {
-      margin: 0;
-      font-size: 0.756em;
-      font-weight: 400;
-      padding: 0.2em 0.4em;
-      border-radius: 3px;
-      background-color: #444;
-      color: #fff; }
-
-aside.messages {
-  padding: 0; }
-
-#materio-sapi-search-form .form-item, #materio-sapi-search-form input.button {
-  display: inline-block; }
-
-article.node--type-frontpage .node__content .field--name-field-what-is-materio:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-a-database:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-showrooms:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-blabla:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-pricing:not(:nth-child(1)) {
-  margin-top: 1em; }
-
-article.node--type-frontpage .node__content .field--name-field-what-is-materio .field__label,
-article.node--type-frontpage .node__content .field--name-field-a-database .field__label,
-article.node--type-frontpage .node__content .field--name-field-showrooms .field__label,
-article.node--type-frontpage .node__content .field--name-field-blabla .field__label,
-article.node--type-frontpage .node__content .field--name-field-pricing .field__label {
-  font-size: 2.2em;
-  font-weight: bold; }
-
-article.node--type-frontpage .node__content .field--name-computed-materials-reference .field__item,
-article.node--type-frontpage .node__content .field--name-computed-showrooms-reference .field__item,
-article.node--type-frontpage .node__content .field--name-computed-articles-reference .field__item {
-  display: inline-block;
-  vertical-align: top;
-  max-width: 250px; }
-
-.cards-list > ul {
-  margin: 0;
-  padding: 0; }
-  .cards-list > ul > li {
-    list-style: none;
-    margin: 0 1em 1em 0;
-    padding: 0;
-    display: inline-block;
-    vertical-align: top; }
-
-.card {
-  position: relative;
-  width: 210px;
-  height: 295px; }
-  .card header {
-    position: absolute;
-    bottom: 0;
-    z-index: 10;
-    color: #fff;
-    background-color: rgba(0, 0, 0, 0.5);
-    width: 100%; }
-    .card header h1, .card header h4 {
-      margin: 0;
-      padding: 0; }
-    .card header h1 {
-      font-size: 1.5em; }
-    .card header h4 {
-      font-size: 1em;
-      font-weight: normal; }
-  .card section.images {
-    position: relative; }
-    .card section.images, .card section.images * {
-      width: 100%;
-      height: 100%; }
-    .card section.images figure {
-      margin: 0;
-      position: absolute;
-      top: 0;
-      left: 0; }
-      .card section.images figure:first-of-type {
-        z-index: 5; }
-      .card section.images figure img.blank {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 20; }
-

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