bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
This commit is contained in:
Bachir Soussi Chiadmi 2019-06-22 16:13:47 +02:00
parent 625f6eb84b
commit 75b908ba26
21 changed files with 238 additions and 1334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config/sync/block.block.materiosapisearchblock.yml
View File

@ -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:

15
config/sync/block.block.pagetitle.yml
View File

@ -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: { }

4
config/sync/block.block.tabs.yml
View File

@ -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:

18
config/sync/core.entity_view_display.node.frontpage.default.yml
View File

@ -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:

1
web/themes/custom/materiotheme/assets/dist/3f2f1fc790d5507ed234.hot-update.json vendored
View File

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

15
web/themes/custom/materiotheme/assets/dist/main.3f2f1fc790d5507ed234.hot-update.js vendored
View File

@ -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");
/***/ })
})

1203
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

File diff suppressed because it is too large Load Diff

22
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

31
web/themes/custom/materiotheme/assets/scripts/main.js
View File

@ -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);
}

32
web/themes/custom/materiotheme/assets/styles/base/_layout.scss
View File

@ -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,16 +48,23 @@ 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;
@ -73,14 +83,20 @@ header[role="banner"]{
}
// __ __ _
// | \/ |__ _(_)_ _
// | |\/| / _` | | ' \
// |_| |_\__,_|_|_||_|
main[role="main"]{
flex:1 1 auto;
overflow-y: auto;
overflow-x: hidden;
&>.wrapper{
width:100vw;
&>*{
@extend %grided-width;
padding-top: $header_height+8px;
}
}
}

2
web/themes/custom/materiotheme/assets/styles/base/_variables.scss
View File

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

49
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -171,20 +171,19 @@ 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;
}
}
aside.messages{
padding: 0;
}
// content top
#content-top{
&:after{
content:"";
clear:both;
display: block;
}
}
#block-materiosapisearchblock{
float:right;
@ -220,11 +219,25 @@ aside.messages{
}
}
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{

1
web/themes/custom/materiotheme/materiotheme.info.yml
View File

@ -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'

2
web/themes/custom/materiotheme/materiotheme.libraries.yml
View File

@ -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

11
web/themes/custom/materiotheme/materiotheme.theme
View File

@ -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

21
web/themes/custom/materiotheme/templates/content/page-title.html.twig Normal file
View File

@ -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 }}

6
web/themes/custom/materiotheme/templates/layout/page.html.twig
View File

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

1
web/themes/custom/materiotheme/vuejs/components/Content/Base.vue
View File

@ -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>

2
web/themes/custom/materiotheme/vuejs/store/index.js
View File

@ -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
}

27
web/themes/custom/materiotheme/vuejs/store/modules/common.js Normal file
View File

@ -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 : {}
}

19
web/themes/custom/materiotheme/vuejs/store/modules/search.js
View File

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