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

added showrooms pages, made page-title color

This commit is contained in:
Bachir Soussi Chiadmi 2019-07-24 17:20:44 +02:00
parent 77154f04a3
commit f2d8c15c25
18 changed files with 1668 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1034
config/sync/views.view.showrooms.yml Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1174,7 +1174,10 @@ header[role="banner"] {
header[role="banner"] #block-header ul.menu {
margin: 0; }
header[role="banner"] #block-header ul.menu li {
padding: 0; }
padding: 0;
display: inline-block; }
header[role="banner"] #block-header ul.menu li:not(:first-of-type) {
margin-left: 0.5em; }
header[role="banner"] #block-languageswitcher {
text-align: right; }
header[role="banner"] #block-languageswitcher h2 {
@ -1221,6 +1224,17 @@ header[role="banner"] {
font-size: 1.512em;
text-transform: capitalize;
font-weight: 300; }
body:not(.path-home) header[role="banner"] #block-pagetitle h2 {
padding: 0.5em 1em; }
body.path-blabla header[role="banner"] #block-pagetitle h2 {
color: #fff;
background-color: #9458aa; }
body.path-showrooms header[role="banner"] #block-pagetitle h2 {
color: #fff;
background-color: #50aa3c; }
body.path-base header[role="banner"] #block-pagetitle h2 {
color: #fff;
background-color: #69cdcf; }
header[role="banner"] #block-materiosapisearchblock {
float: right;
display: inline-block;
@ -1390,6 +1404,23 @@ article.node--type-frontpage .node__content > section.home-blabla {
font-size: 0.756em;
line-height: 0.9; }
#showrooms {
width: calc(100% + 15px); }
#showrooms article.showroom {
width: 435px;
display: inline-block;
vertical-align: top;
margin: 0 15px 15px 0; }
#showrooms article.showroom h1 {
margin: 0;
font-weight: 4; }
#showrooms article.showroom p {
margin: 0; }
#showrooms article.showroom figure {
margin: 0; }
#showrooms article.showroom figure img {
max-width: 100%; }
.infinite-loading-container .infinite-status-prompt i[class^="loading-"] {
width: 15px;
height: 15px; }

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

File diff suppressed because one or more lines are too long

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

@ -55,9 +55,40 @@ import 'theme/assets/styles/main.scss'
}
function initVRouter(){
// we need this to update the title while using history nav
// we need this to update the title and body classes while using history nav
router.beforeEach((to, from, next) => {
// console.log('router beforeEach to ', to);
// commit new title to store
store.commit('Common/setPagetitle', to.name != 'home' ? to.name : null)
// remove all path related body classes
let body_classes = document.querySelector('body').classList;
let classes_to_rm = [];
for (var i = 0; i < body_classes.length; i++) {
if(body_classes[i].startsWith('path-')){
classes_to_rm.push(body_classes[i]);
}
}
document.querySelector('body').classList.remove(...classes_to_rm);
// add new path classes to body
let classes = [];
if(to.path == '/'){
classes.push('path-home');
}else{
let path_parts = to.path.replace(/^\//, '').split('/');
for (var i = 0; i < path_parts.length; i++) {
if(i == 0){
var c = "path-" + path_parts[i];
}else if (path_parts[i] !== ''){
var c = classes[i-1] +'-'+ path_parts[i];
}
classes.push(c)
}
}
document.querySelector('body').classList.add(...classes);
// trigger router
next();
})
}
@ -157,7 +188,7 @@ import 'theme/assets/styles/main.scss'
onclick(event){
// console.log("Clicked on header menu link", event);
let href = event.target.getAttribute('href');
let title = event.target.innerText;
// let title = event.target.innerText;
// console.log("Clicked on header menu link : href", href);
this.$router.push(href)
// replaced by router.beforeEach

4
web/themes/custom/materiotheme/assets/styles/base/_colors.scss
View File

@ -1 +1,5 @@
$transparent-bg: rgba(255,255,255, 0.95);
$color-base:#69cdcf;
$color-showrooms:#50aa3c;
$color-blabla:#9458aa;

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

@ -134,6 +134,10 @@ header[role="banner"]{
margin:0;
li{
padding:0;
display: inline-block;
&:not(:first-of-type){
margin-left: 0.5em;
}
a{
@extend %header-fs;
}
@ -204,6 +208,24 @@ header[role="banner"]{
font-size: 1.512em;
text-transform: capitalize;
font-weight: 300;
body:not(.path-home) & {
padding:0.5em 1em;
}
body.path-blabla & {
color: #fff;
background-color: $color-blabla;
}
body.path-showrooms & {
color: #fff;
background-color: $color-showrooms;
}
body.path-base & {
color: #fff;
background-color: $color-base;
}
}
}
@ -320,7 +342,7 @@ article.node--type-frontpage{
@extend %part-centered-layout;
}
&.home-database{
background-color: #69cdcf;
background-color: $color-base;
@extend %part-columned-layout;
.field--name-field-a-database{}
.cards-list-home{
@ -357,7 +379,7 @@ article.node--type-frontpage{
}
}
&.home-showrooms{
background-color: #50aa3c;
background-color: $color-showrooms;
@extend %part-columned-layout;
.field--name-field-showrooms{
}
@ -408,7 +430,7 @@ article.node--type-frontpage{
width:100%;
box-sizing:border-box;
padding:1em 0;
background-color:#50aa3c;
background-color:$color-showrooms;
color: #fff;
>*{
// display: inline-block;
@ -424,7 +446,7 @@ article.node--type-frontpage{
}
}
&.home-blabla{
background-color: #9458aa;
background-color: $color-blabla;
@extend %part-columned-layout;
.cards-list-home{
@ -477,6 +499,34 @@ article.node--type-frontpage{
}
// ___ _
// / __| |_ _____ __ ___ _ ___ ___ _ __ ___
// \__ \ ' \/ _ \ V V / '_/ _ \/ _ \ ' \(_-<
// |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
#showrooms{
width: calc(100% + #{$column_goutiere});
article.showroom{
width: $column_width * 2 + $column_goutiere;
display: inline-block;
vertical-align: top;
margin: 0 $column_goutiere $column_goutiere 0;
h1{
margin:0;
font-weight: 4;
}
p{ margin:0; }
figure{
margin:0;
img{
max-width: 100%;
}
}
}
}
// ___ _
// / __|__ _ _ _ __| |___
// | (__/ _` | '_/ _` (_-<

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

@ -11,7 +11,6 @@ libraries:
regions:
header: Header
header_left: 'Header left'
header_middle: 'Header middle'
header_right: 'Header right'
header_bottom: 'Header bottom'
content_top: 'Content Top'

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

@ -46,12 +46,7 @@
{{ page.header_left}}
{% endif %}
</div>
<div class="header-block header-middle col-4">
{% if page.header_middle %}
{{ page.header_middle}}
{% endif %}
</div>
<div class="header-block header-right col-4">
<div class="header-block header-right col-8">
{% if page.header_right %}
{{ page.header_right}}
{% endif %}

37
web/themes/custom/materiotheme/vuejs/components/Content/Showroom.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<article class="showroom">
<header>
<h1 v-html="item.name" />
</header>
<section class="images">
<figure v-html="item.field_visuels"></figure>
</section>
<section class="content">
<address v-html="item.field_public_address" />
<div class="phone" v-html="item.field_public_phone" />
<div class="email" v-html="item.field_public_email" />
</section>
</article>
</template>
<script>
import { JSONAPI } from 'vuejs/api/json-axios'
import router from 'vuejs/route'
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
export default {
name: "Showroom",
router,
props: ['item'],
// data(){
// return {
// alias: this.item.view_node.replace(/^.?\/showroom\//g, '')
// }
// },
// methods:{}
}
</script>
<style lang="scss" scoped>
</style>

2
web/themes/custom/materiotheme/vuejs/components/Content/Article.vue → web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue
View File

@ -155,6 +155,7 @@ export default {
obj.data.forEach((e) => {
// get the included values
let included = inc.find((i) => { return i.id == e.id })
if(typeof included != 'undefined'){
// fill the values
switch (key) {
case 'field_visuel':
@ -174,6 +175,7 @@ export default {
default:
}
this.content[key].push(field)
}
})
}

0
web/themes/custom/materiotheme/vuejs/components/Content/Base.vue → web/themes/custom/materiotheme/vuejs/components/Pages/Base.vue
View File

0
web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue → web/themes/custom/materiotheme/vuejs/components/Pages/Blabla.vue
View File

0
web/themes/custom/materiotheme/vuejs/components/Content/Home.vue → web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue
View File

48
web/themes/custom/materiotheme/vuejs/components/Pages/Showrooms.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div id="showrooms">
<div class="loading" v-if="!items.length">
<span>Loading ...</span>
</div>
<Showroom
v-else
v-for="item in items"
v-bind:key="item.uuid"
:item="item"
/>
</div>
</template>
<script>
import Showroom from 'vuejs/components/Content/Showroom'
import { mapState, mapActions } from 'vuex'
export default {
name: "Showrooms",
// data() {
// return {
// items:[],
// page:0
// }
// },
computed: {
...mapState({
items: state => state.Showrooms.items
})
},
created(){
if(!this.items.length)
this.getItems()
},
methods: {
...mapActions({
getItems: 'Showrooms/getItems'
})
},
components: {
Showroom
}
}
</script>
<style lang="scss" scoped>
</style>

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

@ -1,10 +1,11 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from 'vuejs/components/Content/Home'
import Base from 'vuejs/components/Content/Base'
import Blabla from 'vuejs/components/Content/Blabla'
import Article from 'vuejs/components/Content/Article'
import Home from 'vuejs/components/Pages/Home'
import Base from 'vuejs/components/Pages/Base'
import Blabla from 'vuejs/components/Pages/Blabla'
import Article from 'vuejs/components/Pages/Article'
import Showrooms from 'vuejs/components/Pages/Showrooms'
Vue.use(VueRouter)
@ -59,6 +60,12 @@ const routes = [
path: `${basePath}blabla/:alias`,
component: Article,
// meta: { uuid:null }
},
{
name:'showrooms',
path: `${basePath}showrooms`,
component: Showrooms,
// meta: { uuid:null }
}
// {
// path: '*',

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

@ -4,6 +4,7 @@ import Common from './modules/common'
import User from './modules/user'
import Search from './modules/search'
import Blabla from './modules/blabla'
import Showrooms from './modules/showrooms'
// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
@ -13,6 +14,7 @@ export default new Vuex.Store({
Common,
User,
Search,
Blabla
Blabla,
Showrooms
}
})

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

@ -16,7 +16,7 @@ export default {
// mutations
mutations : {
setPagetitle (state, title) {
console.log('Common, setPagetitle', title);
// console.log('Common, setPagetitle', title);
state.pagetitle = title
}
},

38
web/themes/custom/materiotheme/vuejs/store/modules/showrooms.js Normal file
View File

@ -0,0 +1,38 @@
import { JSONAPI } from 'vuejs/api/json-axios'
import { REST } from 'vuejs/api/rest-axios'
import { MA } from 'vuejs/api/ma-axios'
import qs from 'querystring'
export default {
namespaced: true,
// initial state
state : {
items: [],
},
// getters
getters : {},
// mutations
mutations : {
setItems (state, items) {
state.items = state.items.concat(items)
}
},
// actions
actions : {
getItems({ dispatch, commit, state }){
REST.get(`/showrooms_rest?_format=json`, {})
.then(({ data }) => {
console.log('showrooms REST: data', data)
commit('setItems',data)
})
.catch(( error ) => {
console.warn('Issue with showrooms', error)
Promise.reject(error)
})
}
}
}