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

fixed webpack prod, fixed language prefix negociation in vue-router

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-06-06 17:37:43 +02:00
parent 082e011fbb
commit f0120ba10b
10 changed files with 1141 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,16 @@
#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; }
@@ -996,10 +1009,13 @@ header[role="banner"] {
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; }
font-size: 16px;
text-align: left; }
main[role="main"] {
padding-top: 80px; }
@@ -1014,24 +1030,127 @@ body {
aside.messages {
border: none; }
header[role="banner"] #block-sitebranding h1 {
margin: 0; }
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; }
header[role="banner"] #block-userlogin h2 {
margin: 0; }
aside.messages {
padding: 0; }
header[role="banner"] #block-userlogin > section {
background-color: #fff;
overflow: hidden;
height: 1px;
padding: 0.01em 1em;
box-sizing: content-box;
transition: all 0.4s ease-in-out;
transition-delay: 2s; }
#materio-sapi-search-form .form-item, #materio-sapi-search-form input.button {
display: inline-block; }
header[role="banner"] #block-userlogin:hover > section {
transition-delay: 0s;
height: 16em;
padding: 1em 1em;
box-shadow: 0 0 10px #ccc; }
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; }

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

File diff suppressed because one or more lines are too long

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

@@ -43,9 +43,11 @@ import 'theme/assets/styles/main.scss'
router,
el: '#block-sitebranding',
methods: {
onclick(){
console.log("Clicked on logo");
this.$router.push({name:'home'})
onclick(event){
// console.log("Clicked on logo event", event);
let href = event.target.getAttribute('href');
// console.log("Clicked on logo href", href);
this.$router.push(href)
}
}
})

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

@@ -20,9 +20,6 @@ import { mapState, mapActions } from 'vuex'
export default {
name: "Base",
data: () => ({
}),
computed: {
...mapState({
items: state => state.Search.items
@@ -34,19 +31,17 @@ export default {
})
},
created() {
// laucnh a search if params exists in url query
// at first page load or first route entering launch a search if params exists in url query
console.log('Base created() location',window.location);
let params = new URLSearchParams(window.location.search)
if(params.has('keys')){
if(params.has('keys') || params.has('term')){
this.$store.commit('Search/setKeys', params.get('keys'))
this.$store.commit('Search/setTerm', params.get('term'))
this.newSearch()
}
},
// beforeRouteEnter (to, from, next) {
// console.log('Base beforeRouteEnter');//, to, from, next);
// next()
// },
beforeRouteUpdate (to, from, next) {
// when query change launch a new search
console.log('Base beforeRouteUpdate', to, from, next);
this.$store.commit('Search/setKeys', to.query.keys)
this.$store.commit('Search/setTerm', to.query.term)

5
web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue
View File

@@ -1,7 +1,8 @@
<template lang="html">
<div :id="id">
<router-view name="home" :html="home_template_src"></router-view>
<router-view name="base"></router-view>
<!-- <router-view name="home" :html="home_template_src"></router-view> -->
<!-- <router-view name="base"></router-view> -->
<router-view :html="home_template_src"/>
</div>
</template>

9
web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
View File

@@ -13,7 +13,8 @@ export default {
return {
template: null,
typed: null,
autocomplete: null
autocomplete: null,
// basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
}
},
computed: {
@@ -24,9 +25,13 @@ export default {
},
methods: {
submit() {
console.log("search clicked", this.keys, this.autocomplete);
console.log("search clicked", this.typed, this.autocomplete);
// New search is triggered by Base.vue with router (which will also fill the store)
this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
// this.$router.push({
// path:`${this.basePath}/base`,
// query:{keys:this.typed,term:this.autocomplete}
// })
},
onAutoCompleteSelect(event, ui){
event.preventDefault();

61
web/themes/custom/materiotheme/vuejs/route/index.js
View File

@@ -8,29 +8,44 @@ Vue.use(VueRouter)
// https://www.lullabot.com/articles/decoupled-hard-problems-routing
// We could use aliases to never reload the page on language changement
// BUT beforeupdate is not triggered when push alias instead of path or name
const languages = ['en', 'fr'];
console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
const routes = [
{
name: 'home',
path: basePath,
// path: '/',
// alias: (() => languages.map(l => `/${l}`))(),
component: Home
// components: {
// 'home': Home
// }
},
{
name:'base',
path: `${basePath}base`,
// path: `/base`,
// alias: (() => languages.map(l => `/${l}/base`))(),
component: Base,
// components: {
// 'base': Base
// }
},
// {
// path: '*',
// name: 'notfound',
// components: {
// 'notfound': NotFound
// }
// }
]
export default new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
components: {
'home': Home
}
},
{
path: '/base',
name:'base',
components: {
'base': Base
}
},
// {
// path: '*',
// name: 'notfound',
// components: {
// 'notfound': NotFound
// }
// }
]
routes: routes
})