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

refactored the layout:

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

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

36
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,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;
}
}
}

4
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;
$column_goutiere: 15px;

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

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