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
2019-06-22 16:13:47 +02:00 · 2019-06-22 16:13:47 +02:00 · 75b908ba26
parent 625f6eb84b
commit 75b908ba26
21 changed files with 238 additions and 1334 deletions
--- a/config/sync/block.block.materiosapisearchblock.yml
+++ b/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:
--- a/config/sync/block.block.pagetitle.yml
+++ b/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: {  }
--- a/config/sync/block.block.tabs.yml
+++ b/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:
--- a/config/sync/core.entity_view_display.node.frontpage.default.yml
+++ b/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:
--- a/web/themes/custom/materiotheme/assets/dist/3f2f1fc790d5507ed234.hot-update.json
+++ b/web/themes/custom/materiotheme/assets/dist/3f2f1fc790d5507ed234.hot-update.json
@ -1 +0,0 @@
-{"h":"9b06c7ef8366e03bb4ea","c":{"main":true}}
--- a/web/themes/custom/materiotheme/assets/dist/main.3f2f1fc790d5507ed234.hot-update.js
+++ b/web/themes/custom/materiotheme/assets/dist/main.3f2f1fc790d5507ed234.hot-update.js
@ -1,15 +0,0 @@
-webpackHotUpdate("main",{
-
-/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Login.vue?vue&type=template&id=39c106f7&scoped=true&lang=html&":
-/*!******************************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Login.vue?vue&type=template&id=39c106f7&scoped=true&lang=html& ***!
-  \******************************************************************************************************************************************************************************************************************************************************/
-/*! exports provided: render, staticRenderFns */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"block-userlogin\" } }, [\n    _c(\"h2\", [_vm._v(\"Login Hello!\")]),\n    _vm._v(\" \"),\n    _c(\"section\", [\n      _c(\"input\", {\n        directives: [\n          {\n            name: \"model\",\n            rawName: \"v-model\",\n            value: _vm.mail,\n            expression: \"mail\"\n          }\n        ],\n        staticClass: \"form-email\",\n        attrs: {\n          id: \"edit-name\",\n          type: \"text\",\n          placeholder: \"Email\",\n          name: \"name\"\n        },\n        domProps: { value: _vm.mail },\n        on: {\n          keyup: function($event) {\n            if (\n              !$event.type.indexOf(\"key\") &&\n              _vm._k($event.keyCode, \"enter\", 13, $event.key, \"Enter\")\n            ) {\n              return null\n            }\n            return _vm.login($event)\n          },\n          input: function($event) {\n            if ($event.target.composing) {\n              return\n            }\n            _vm.mail = $event.target.value\n          }\n        }\n      }),\n      _vm._v(\" \"),\n      _c(\"input\", {\n        directives: [\n          {\n            name: \"model\",\n            rawName: \"v-model\",\n            value: _vm.password,\n            expression: \"password\"\n          }\n        ],\n        staticClass: \"form-text\",\n        attrs: {\n          id: \"edit-pass\",\n          type: \"password\",\n          placeholder: \"Password\",\n          name: \"pass\"\n        },\n        domProps: { value: _vm.password },\n        on: {\n          keyup: function($event) {\n            if (\n              !$event.type.indexOf(\"key\") &&\n              _vm._k($event.keyCode, \"enter\", 13, $event.key, \"Enter\")\n            ) {\n              return null\n            }\n            return _vm.login($event)\n          },\n          input: function($event) {\n            if ($event.target.composing) {\n              return\n            }\n            _vm.password = $event.target.value\n          }\n        }\n      }),\n      _vm._v(\" \"),\n      _c(\n        \"button\",\n        {\n          staticClass: \"button\",\n          attrs: { id: \"edit-submit\" },\n          on: {\n            click: function($event) {\n              $event.stopPropagation()\n              return _vm.login($event)\n            }\n          }\n        },\n        [_vm._v(\"\\n      login\\n    \")]\n      )\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Login.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
-
-/***/ })
-
-})
--- a/web/themes/custom/materiotheme/assets/dist/main.css
+++ b/web/themes/custom/materiotheme/assets/dist/main.css
--- a/web/themes/custom/materiotheme/assets/dist/main.js
+++ b/web/themes/custom/materiotheme/assets/dist/main.js
--- a/web/themes/custom/materiotheme/assets/scripts/main.js
+++ b/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);
      }

--- a/web/themes/custom/materiotheme/assets/styles/base/_layout.scss
+++ b/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;
+    }
+  }
 }
--- a/web/themes/custom/materiotheme/assets/styles/base/_variables.scss
+++ b/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;
--- a/web/themes/custom/materiotheme/assets/styles/main.scss
+++ b/web/themes/custom/materiotheme/assets/styles/main.scss
@ -171,59 +171,72 @@ header[role="banner"]{

  }

+
+  // 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;
+      }
+
+      #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;
+      }
+
+    }
+
+  }
 }

+
+
+// main
 aside.messages{
  padding: 0;
 }

 // content top
-#content-top{
-  &:after{
-    content:"";
-    clear:both;
-    display: block;
-  }
-}
+// #content-top{
+//   &:after{
+//     content:"";
+//     clear:both;
+//     display: block;
+//   }
+// }

-#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;
-    }
-
-    #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;
-    }
-
-  }
-
-}
-
-h1.page-title{
-  margin:0;
-}

 // front
 article.node--type-frontpage{
@ -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{
--- a/web/themes/custom/materiotheme/materiotheme.info.yml
+++ b/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'
--- a/web/themes/custom/materiotheme/materiotheme.libraries.yml
+++ b/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
--- a/web/themes/custom/materiotheme/materiotheme.theme
+++ b/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
--- a/web/themes/custom/materiotheme/templates/content/page-title.html.twig
+++ b/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 }}
--- a/web/themes/custom/materiotheme/templates/layout/page.html.twig
+++ b/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 %}
--- a/web/themes/custom/materiotheme/vuejs/components/Content/Base.vue
+++ b/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>
--- a/web/themes/custom/materiotheme/vuejs/store/index.js
+++ b/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
  }
--- a/web/themes/custom/materiotheme/vuejs/store/modules/common.js
+++ b/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 : {}
+
+}
--- a/web/themes/custom/materiotheme/vuejs/store/modules/search.js
+++ b/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()
        }
      }
    }
				`@ -1 +0,0 @@`
				`{"h":"9b06c7ef8366e03bb4ea","c":{"main":true}}`