added showrooms pages, made page-title color
This commit is contained in:
parent
77154f04a3
commit
f2d8c15c25
File diff suppressed because it is too large
Load Diff
|
@ -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; }
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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
|
||||
|
|
|
@ -1 +1,5 @@
|
|||
$transparent-bg: rgba(255,255,255, 0.95);
|
||||
|
||||
$color-base:#69cdcf;
|
||||
$color-showrooms:#50aa3c;
|
||||
$color-blabla:#9458aa;
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ___ _
|
||||
// / __|__ _ _ _ __| |___
|
||||
// | (__/ _` | '_/ _` (_-<
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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>
|
|
@ -155,25 +155,27 @@ export default {
|
|||
obj.data.forEach((e) => {
|
||||
// get the included values
|
||||
let included = inc.find((i) => { return i.id == e.id })
|
||||
// fill the values
|
||||
switch (key) {
|
||||
case 'field_visuel':
|
||||
field = e.meta
|
||||
field.id = e.id
|
||||
field.src = included.links.card_medium.href
|
||||
break;
|
||||
case 'field_linked_materials':
|
||||
case 'field_thesaurus':
|
||||
case 'field_tags':
|
||||
field = included.attributes
|
||||
field.id = included.id
|
||||
break;
|
||||
// case 'field_showroom':
|
||||
// field = included.attributes
|
||||
// break
|
||||
default:
|
||||
if(typeof included != 'undefined'){
|
||||
// fill the values
|
||||
switch (key) {
|
||||
case 'field_visuel':
|
||||
field = e.meta
|
||||
field.id = e.id
|
||||
field.src = included.links.card_medium.href
|
||||
break;
|
||||
case 'field_linked_materials':
|
||||
case 'field_thesaurus':
|
||||
case 'field_tags':
|
||||
field = included.attributes
|
||||
field.id = included.id
|
||||
break;
|
||||
// case 'field_showroom':
|
||||
// field = included.attributes
|
||||
// break
|
||||
default:
|
||||
}
|
||||
this.content[key].push(field)
|
||||
}
|
||||
this.content[key].push(field)
|
||||
})
|
||||
}
|
||||
|
|
@ -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>
|
|
@ -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,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
|
||||
}
|
||||
})
|
||||
|
|
|
@ -16,7 +16,7 @@ export default {
|
|||
// mutations
|
||||
mutations : {
|
||||
setPagetitle (state, title) {
|
||||
console.log('Common, setPagetitle', title);
|
||||
// console.log('Common, setPagetitle', title);
|
||||
state.pagetitle = title
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue