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

blabla article display and nav

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-07-25 21:23:23 +02:00
parent f2d8c15c25
commit f5e18e9c20
12 changed files with 454 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
config/sync/rest.resource.entity.entity_view_display.yml Normal file
View File

@@ -0,0 +1,17 @@
uuid: 3838a066-6532-40df-8bc0-28848bedab7d
langcode: en
status: false
dependencies:
module:
- serialization
- user
id: entity.entity_view_display
plugin_id: 'entity:entity_view_display'
granularity: resource
configuration:
methods:
- GET
formats:
- json
authentication:
- cookie

18
config/sync/rest.resource.entity.node_type.yml Normal file
View File

@@ -0,0 +1,18 @@
uuid: 6c0bad4c-4cb1-4203-ab2f-f0e35207286f
langcode: en
status: false
dependencies:
module:
- node
- serialization
- user
id: entity.node_type
plugin_id: 'entity:node_type'
granularity: resource
configuration:
methods:
- GET
formats:
- json
authentication:
- cookie

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

@@ -24,6 +24,27 @@ a, a:focus, a:active {
a:focus {
-moz-outline-style: none; }
ul {
margin: 0;
padding: 0; }
ul li {
margin: 0;
padding: 0;
list-style: none; }
h1, h2, h3, h4, h5, h6 {
margin: 0; }
p a {
position: relative; }
p a:after {
content: '';
position: absolute;
top: 1em;
left: 0;
width: 100%;
border-bottom: 1px dotted #000; }
.col-1, .small-col-1, .med-col-1, .large-col-1, .col-2, .small-col-2, .med-col-2, .large-col-2, .col-3, .small-col-3, .med-col-3, .large-col-3, .col-4, .small-col-4, .med-col-4, .large-col-4, .col-5, .small-col-5, .med-col-5, .large-col-5, .col-6, .small-col-6, .med-col-6, .large-col-6, .col-7, .small-col-7, .med-col-7, .large-col-7, .col-8, .small-col-8, .med-col-8, .large-col-8, .col-9, .small-col-9, .med-col-9, .large-col-9, .col-10, .small-col-10, .med-col-10, .large-col-10, .col-11, .small-col-11, .med-col-11, .large-col-11, .col-12, .small-col-12, .med-col-12, .large-col-12, .col-1-offset-1, .col-1-offset-2, .col-1-offset-3, .col-1-offset-4, .col-1-offset-5, .col-1-offset-6, .col-1-offset-7, .col-1-offset-8, .col-1-offset-9, .col-1-offset-10, .col-1-offset-11, .col-2-offset-1, .col-2-offset-2, .col-2-offset-3, .col-2-offset-4, .col-2-offset-5, .col-2-offset-6, .col-2-offset-7, .col-2-offset-8, .col-2-offset-9, .col-2-offset-10, .col-3-offset-1, .col-3-offset-2, .col-3-offset-3, .col-3-offset-4, .col-3-offset-5, .col-3-offset-6, .col-3-offset-7, .col-3-offset-8, .col-3-offset-9, .col-4-offset-1, .col-4-offset-2, .col-4-offset-3, .col-4-offset-4, .col-4-offset-5, .col-4-offset-6, .col-4-offset-7, .col-4-offset-8, .col-5-offset-1, .col-5-offset-2, .col-5-offset-3, .col-5-offset-4, .col-5-offset-5, .col-5-offset-6, .col-5-offset-7, .col-6-offset-1, .col-6-offset-2, .col-6-offset-3, .col-6-offset-4, .col-6-offset-5, .col-6-offset-6, .col-7-offset-1, .col-7-offset-2, .col-7-offset-3, .col-7-offset-4, .col-7-offset-5, .col-8-offset-1, .col-8-offset-2, .col-8-offset-3, .col-8-offset-4, .col-9-offset-1, .col-9-offset-2, .col-9-offset-3, .col-10-offset-1, .col-10-offset-2, .col-11-offset-1 {
width: 100%;
float: left;
@@ -1404,23 +1425,6 @@ 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; }
@@ -1463,7 +1467,7 @@ article.card {
article.card header h1 {
font-size: 1.3em;
font-weight: 700;
line-height: 0.8;
line-height: 0.85;
margin-bottom: 0.2em; }
article.card header h4 {
font-size: 0.882em;
@@ -1491,3 +1495,88 @@ article.card {
left: 0;
z-index: 20; }
#main-content > article.article section.taxonomy ul {
margin: 1em 0 0; }
#main-content > article.article section.taxonomy li {
display: inline-block;
padding: 0 0.5em 0 0; }
#main-content > article.article section.visuels {
width: calc(100% + 15px); }
#main-content > article.article section.visuels figure {
display: inline-block;
vertical-align: top;
width: 210px;
margin: 0 15px 0 0; }
#main-content > article.article section.visuels figure img {
width: 100%; }
#main-content > article.article aside.linked-materials ul {
width: calc(100% + 15px); }
#main-content > article.article aside.linked-materials ul li {
display: inline-block;
vertical-align: top;
width: 210px;
margin: 0 15px 0 0; }
#main-content > article.article aside.linked-materials h3.field__label {
font-size: 1em;
font-weight: 500;
margin: 2em 0 1em 0; }
#main-content > article.article aside.linked-materials h1.title {
font-size: 1em;
font-weight: 400; }
#main-content > article.article aside.linked-materials h3.ref {
font-size: 0.756em;
font-weight: 600; }
#main-content > article.article aside.linked-materials h2.description {
font-size: 0.756em;
font-weight: 400; }
#main-content > article.article nav.prevnext.bottom {
margin: 2em 0; }
#main-content > article.article nav.prevnext ul {
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr; }
#main-content > article.article nav.prevnext li {
padding: 0;
margin: 0;
list-style: none; }
#main-content > article.article nav.prevnext li a {
font-size: 0.756em;
font-weight: 700; }
#main-content > article.article nav.prevnext li:nth-child(1) {
grid-column: 1; }
#main-content > article.article nav.prevnext li:nth-child(1) a:before {
content: '< '; }
#main-content > article.article nav.prevnext li:nth-child(2) {
grid-column: 2;
text-align: right; }
#main-content > article.article nav.prevnext li:nth-child(2) a:after {
content: ' >'; }
#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%; }

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

File diff suppressed because one or more lines are too long

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

@@ -59,7 +59,20 @@ import 'theme/assets/styles/main.scss'
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)
let title = null;
switch (to.name) {
case 'home':
title = null
break;
case 'article':
title = false
break;
default:
title = to.name
}
if (title !== false) {
store.commit('Common/setPagetitle', title)
}
// remove all path related body classes
let body_classes = document.querySelector('body').classList;

25
web/themes/custom/materiotheme/assets/styles/base/_reset.scss
View File

@@ -8,3 +8,28 @@ a{
}
a, a:focus, a:active { outline: none; }
a:focus{ -moz-outline-style: none; }
ul{
margin:0;
padding:0;
li{
margin:0;
padding:0;
list-style: none;
}
}
h1,h2,h3,h4,h5,h6{
margin:0;
}
p a{
position: relative;
&:after{
content:'';
position: absolute;
top:1em; left:0;
width:100%;
border-bottom: 1px dotted #000;
}
}

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

@@ -209,8 +209,6 @@ header[role="banner"]{
text-transform: capitalize;
font-weight: 300;
body:not(.path-home) & {
padding:0.5em 1em;
}
@@ -229,7 +227,6 @@ header[role="banner"]{
}
}
#block-materiosapisearchblock{
float:right;
display:inline-block;
@@ -499,34 +496,6 @@ 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%;
}
}
}
}
// ___ _
// / __|__ _ _ _ __| |___
// | (__/ _` | '_/ _` (_-<
@@ -572,6 +541,10 @@ article.card{
// }
// focused
// box-shadow: 0 0 7px rgba(0,0,0,0.9);
// &.article{
// width: $column_width * 2 + $column_goutiere;
//
// }
header{
position: absolute;
bottom:0;
@@ -585,7 +558,7 @@ article.card{
h1{
font-size: 1.3em;
font-weight: 700;
line-height: 0.8;
line-height: 0.85;
margin-bottom: 0.2em;
}
h4{
@@ -622,3 +595,125 @@ article.card{
}
}
}
// ___ _ _ _
// | _ ) |__ _| |__| |__ _
// | _ \ / _` | '_ \ / _` |
// |___/_\__,_|_.__/_\__,_|
#blabla{
}
#main-content > article.article{
section.taxonomy{
ul{
margin:1em 0 0;
}
li{
display:inline-block;
padding:0 0.5em 0 0;
}
}
section.visuels{
width:calc(100% + #{$column_goutiere});
figure{
display: inline-block;
vertical-align: top;
width:$column_width;
margin:0 $column_goutiere 0 0;
img{
width:100%;
}
}
}
aside.linked-materials{
ul{
width:calc(100% + #{$column_goutiere});
li{
display: inline-block;
vertical-align: top;
width:$column_width;
margin:0 $column_goutiere 0 0;
}
}
h3.field__label{
font-size: 1em;
font-weight: 500;
margin: 2em 0 1em 0;
}
h1.title{
font-size: 1em;
font-weight: 400;
}
h3.ref{
font-size: 0.756em;
font-weight: 600;
}
h2.description{
font-size: 0.756em;
font-weight: 400;
}
}
nav.prevnext{
&.bottom{
margin:2em 0;
}
ul{
padding:0;
margin:0;
display: grid;
grid-template-columns: 1fr 1fr;
}
li{
padding:0;
margin:0;
list-style: none;
a{
font-size: 0.756em;
font-weight: 700;
}
&:nth-child(1){
grid-column: 1;
a:before{
content:'< ';
}
}
&:nth-child(2){
grid-column: 2;
text-align: right;
a:after{
content:' >';
}
}
}
}
}
// ___ _
// / __| |_ _____ __ ___ _ ___ ___ _ __ ___
// \__ \ ' \/ _ \ 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%;
}
}
}
}

4
web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
View File

@@ -2,8 +2,8 @@
<article class="card">
<header>
<h1>{{ item.title }}</h1>
<h4>{{ item.description }}</h4>
<span class="ref">{{ item.reference }}</span>
<h4>{{ item.field_short_description }}</h4>
<span class="ref">{{ item.field_reference }}</span>
</header>
<section class="images" v-switcher>
<figure

168
web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue
View File

@@ -1,16 +1,29 @@
<template>
<div class="loading" v-if="!content">
<div class="loading" v-if="!content || loading">
<span>Loading ...</span>
</div>
<article class="article" v-else>
<header>
<h1>{{ content.title }}</h1>
<nav v-if="index != -1">
<a @click.prevent="onPrev" href="#">prev : {{ prevnext.prev.title }}</a>
<a @click.prevent="onNext" href="#">next : {{ prevnext.next.title }}</a>
</nav>
</header>
<div class="taxonomy">
<nav class="prevnext top">
<ul>
<li>
<a
@click.prevent="onPrev"
href="#"
v-if="prevnext.prev"
v-html="prevnext.prev.title"
/>
</li>
<li>
<a
@click.prevent="onNext"
href="#"
v-if="prevnext.next"
v-html="prevnext.next.title"
/>
</li>
</ul>
</nav>
<section class="taxonomy">
<div class="thesaurus">
<ul>
<li
@@ -25,20 +38,9 @@
>{{ term.name }}</li>
</ul>
</div>
</div>
<div class="body" v-html="content.body"></div>
<div class="linked-materials">
<ul>
<li v-for="node in content.field_linked_materials" v-bind:key="node.id">
<section :uuid="node.id">
<h1>{{ node.title }}</h1>
<h3>{{ node.field_reference }}</h3>
<h2>{{ node.field_short_description }}</h2>
</section>
</li>
</ul>
</div>
<div class="visuels">
</section>
<section class="body" v-html="content.body"></section>
<section class="visuels">
<figure
v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
>
@@ -49,46 +51,77 @@
/>
<caption></caption>
</figure>
</div>
</section>
<aside class="linked-materials">
<h3 class="field__label">Linked Materials</h3>
<div class="card-list">
<ul class="">
<li v-for="node in content.field_linked_materials" v-bind:key="node.id">
<Card :item="node" />
</li>
</ul>
</div>
</aside>
<nav class="prevnext bottom">
<ul>
<li>
<a
@click.prevent="onPrev"
href="#"
v-if="prevnext.prev"
v-html="prevnext.prev.title"
/>
</li>
<li>
<a
@click.prevent="onNext"
href="#"
v-if="prevnext.next"
v-html="prevnext.next.title"
/>
</li>
</ul>
</nav>
</article>
</template>
<script>
import router from 'vuejs/route'
import store from 'vuejs/store'
import { JSONAPI } from 'vuejs/api/json-axios'
import qs from 'querystring'
import Card from 'vuejs/components/Content/Card'
import { mapState, mapActions } from 'vuex'
export default {
name: "Article",
router,
store,
props: ['item'],
data(){
return {
index:-1,
prevnext:{},
uuid:null,
content:null
content:null,
loading:true,
}
},
computed: {
...mapState({
items: state => state.Blabla.items
})
},
created(){
this.getArticle()
},
methods: {
...mapActions({
getItems: 'Blabla/getItems',
getItemIndex: 'Blabla/getItemIndex',
getPrevNextItems: 'Blabla/getPrevNextItems'
}),
getIndex(){
console.log("Article getIndex");
this.getItemIndex(this.uuid).then((index) => {
this.index = index
// console.log('article index', index, this);
this.getPrevNextItems(index).then((pn) => {
this.prevnext = pn
})
})
},
getArticle(){
console.log(this.$route);
// get the article uuid
@@ -103,18 +136,39 @@ export default {
}
if(this.uuid){
this.getIndex()
this.loadArticle()
// get the prev next items
if(!this.items.length){
// if items list not yet loaded preload them
this.getItems().then(() => {
// then get the index
this.getIndex()
})
}else{
// or directly get the index
this.getIndex()
}
}else{
// if for any reason we dont have the uuid
// redirect to home
this.$route.replace('home')
}
},
getIndex(){
console.log("Article getIndex");
this.getItemIndex(this.uuid).then((index) => {
this.index = index
// console.log('article index', index, this);
this.getPrevNextItems(index).then((pn) => {
this.prevnext = pn
})
})
},
loadArticle(){
console.log('loadArticle', this.uuid)
this.loading = true;
let params = {
include:'field_linked_materials,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
}
let q = qs.stringify(params)
JSONAPI.get(`node/article/${this.uuid}?${q}`)
@@ -144,19 +198,21 @@ export default {
// skip loop if the property is from prototype
if (!relations.hasOwnProperty(key)) continue;
let obj = relations[key]
console.log('typeof obj.data', typeof obj.data);
// skip obj if data is not array
if(!Array.isArray(obj.data)) continue
let relation_obj = relations[key]
console.log('typeof relation_obj.data', typeof relation_obj.data);
// skip relation_obj if data is not array
if(!Array.isArray(relation_obj.data)) continue
// create empty field array
this.content[key] = []
// parse relationship values using included
let field = {}
obj.data.forEach((e) => {
// get the included values
// loop through all relation items
relation_obj.data.forEach((e) => {
// get the included values for each item using id
let included = inc.find((i) => { return i.id == e.id })
// if we not found an included item skip the item
if(typeof included != 'undefined'){
// fill the values
// fill the item values
switch (key) {
case 'field_visuel':
field = e.meta
@@ -164,6 +220,18 @@ export default {
field.src = included.links.card_medium.href
break;
case 'field_linked_materials':
field = included.attributes
field.id = included.id
// get the linked material included images
field.images = [];
included.relationships.images.data.forEach((img) => {
// console.log('href', img.meta.imageDerivatives.links.card_medium.href);
field.images.push({
title:img.meta.title,
url:img.meta.imageDerivatives.links.card_medium.href
})
})
break;
case 'field_thesaurus':
case 'field_tags':
field = included.attributes
@@ -179,11 +247,14 @@ export default {
})
}
// update main page title
this.$store.commit('Common/setPagetitle', this.content.title)
this.loading = false;
console.log('article.content',this.content);
},
onNext(){
console.log('clicked on next', this.prevnext.next);
// console.log('clicked on next', this.prevnext.next);
let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
this.$router.push({
name:`article`,
@@ -192,7 +263,7 @@ export default {
})
},
onPrev(){
console.log('clicked on prev', this.prevnext.next);
// console.log('clicked on prev', this.prevnext.next);
let alias = this.prevnext.prev.view_node.replace(/^.?\/blabla\//g, '')
this.$router.push({
name:`article`,
@@ -201,6 +272,9 @@ export default {
})
}
},
components: {
Card
},
watch: {
'$route' (to, from) {
console.log('route change')

15
web/themes/custom/materiotheme/vuejs/store/modules/blabla.js
View File

@@ -8,6 +8,7 @@ export default {
// initial state
state : {
contenttype:null,
items: [],
page: 0,
// infinteState will come from vue-infinite-loading plugin
@@ -34,7 +35,17 @@ export default {
// actions
actions : {
getItems({ dispatch, commit, state }){
REST.get(`/blabla_rest?_format=json&page=${state.page}`, {})
// if(!state.contenttype){
// REST.get('/entity/node_type/article?_format=json', {})
// .then(({ data }) => {
// console.log('blabla REST contenttype : data', data);
// })
// .catch(( error ) => {
// console.warn('Issue with blabla contenttype', error)
// Promise.reject(error)
// })
// }
return REST.get(`/blabla_rest?_format=json&page=${state.page}`, {})
.then(({ data }) => {
console.log('blabla REST: data', data)
if(data.length){
@@ -48,7 +59,7 @@ export default {
}
})
.catch(( error ) => {
console.warn('Issue with blabla', error)
console.warn('Issue with blabla getitems', error)
Promise.reject(error)
})
},

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

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

@@ -142,9 +142,9 @@ export default {
let item = {
uuid: uuid,
title: attrs.title,
description: attrs.field_short_description,
field_short_description: attrs.field_short_description,
body: attrs.body,
reference: attrs.field_reference,
field_reference: attrs.field_reference,
}
// get images included values