blabla article display and nav
This commit is contained in:
parent
f2d8c15c25
commit
f5e18e9c20
|
@ -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
|
|
@ -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
|
|
@ -24,6 +24,27 @@ a, a:focus, a:active {
|
||||||
a:focus {
|
a:focus {
|
||||||
-moz-outline-style: none; }
|
-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 {
|
.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%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
|
@ -1404,23 +1425,6 @@ article.node--type-frontpage .node__content > section.home-blabla {
|
||||||
font-size: 0.756em;
|
font-size: 0.756em;
|
||||||
line-height: 0.9; }
|
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-"] {
|
.infinite-loading-container .infinite-status-prompt i[class^="loading-"] {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 15px; }
|
height: 15px; }
|
||||||
|
@ -1463,7 +1467,7 @@ article.card {
|
||||||
article.card header h1 {
|
article.card header h1 {
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 0.8;
|
line-height: 0.85;
|
||||||
margin-bottom: 0.2em; }
|
margin-bottom: 0.2em; }
|
||||||
article.card header h4 {
|
article.card header h4 {
|
||||||
font-size: 0.882em;
|
font-size: 0.882em;
|
||||||
|
@ -1491,3 +1495,88 @@ article.card {
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 20; }
|
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%; }
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -59,7 +59,20 @@ import 'theme/assets/styles/main.scss'
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
// console.log('router beforeEach to ', to);
|
// console.log('router beforeEach to ', to);
|
||||||
// commit new title to store
|
// 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
|
// remove all path related body classes
|
||||||
let body_classes = document.querySelector('body').classList;
|
let body_classes = document.querySelector('body').classList;
|
||||||
|
|
|
@ -8,3 +8,28 @@ a{
|
||||||
}
|
}
|
||||||
a, a:focus, a:active { outline: none; }
|
a, a:focus, a:active { outline: none; }
|
||||||
a:focus{ -moz-outline-style: 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -209,8 +209,6 @@ header[role="banner"]{
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
body:not(.path-home) & {
|
body:not(.path-home) & {
|
||||||
padding:0.5em 1em;
|
padding:0.5em 1em;
|
||||||
}
|
}
|
||||||
|
@ -229,7 +227,6 @@ header[role="banner"]{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#block-materiosapisearchblock{
|
#block-materiosapisearchblock{
|
||||||
float:right;
|
float:right;
|
||||||
display:inline-block;
|
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
|
// focused
|
||||||
// box-shadow: 0 0 7px rgba(0,0,0,0.9);
|
// box-shadow: 0 0 7px rgba(0,0,0,0.9);
|
||||||
|
// &.article{
|
||||||
|
// width: $column_width * 2 + $column_goutiere;
|
||||||
|
//
|
||||||
|
// }
|
||||||
header{
|
header{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom:0;
|
bottom:0;
|
||||||
|
@ -585,7 +558,7 @@ article.card{
|
||||||
h1{
|
h1{
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 0.8;
|
line-height: 0.85;
|
||||||
margin-bottom: 0.2em;
|
margin-bottom: 0.2em;
|
||||||
}
|
}
|
||||||
h4{
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
<article class="card">
|
<article class="card">
|
||||||
<header>
|
<header>
|
||||||
<h1>{{ item.title }}</h1>
|
<h1>{{ item.title }}</h1>
|
||||||
<h4>{{ item.description }}</h4>
|
<h4>{{ item.field_short_description }}</h4>
|
||||||
<span class="ref">{{ item.reference }}</span>
|
<span class="ref">{{ item.field_reference }}</span>
|
||||||
</header>
|
</header>
|
||||||
<section class="images" v-switcher>
|
<section class="images" v-switcher>
|
||||||
<figure
|
<figure
|
||||||
|
|
|
@ -1,16 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="loading" v-if="!content">
|
<div class="loading" v-if="!content || loading">
|
||||||
<span>Loading ...</span>
|
<span>Loading ...</span>
|
||||||
</div>
|
</div>
|
||||||
<article class="article" v-else>
|
<article class="article" v-else>
|
||||||
<header>
|
<nav class="prevnext top">
|
||||||
<h1>{{ content.title }}</h1>
|
<ul>
|
||||||
<nav v-if="index != -1">
|
<li>
|
||||||
<a @click.prevent="onPrev" href="#">prev : {{ prevnext.prev.title }}</a>
|
<a
|
||||||
<a @click.prevent="onNext" href="#">next : {{ prevnext.next.title }}</a>
|
@click.prevent="onPrev"
|
||||||
</nav>
|
href="#"
|
||||||
</header>
|
v-if="prevnext.prev"
|
||||||
<div class="taxonomy">
|
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">
|
<div class="thesaurus">
|
||||||
<ul>
|
<ul>
|
||||||
<li
|
<li
|
||||||
|
@ -25,20 +38,9 @@
|
||||||
>{{ term.name }}</li>
|
>{{ term.name }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<div class="body" v-html="content.body"></div>
|
<section class="body" v-html="content.body"></section>
|
||||||
<div class="linked-materials">
|
<section class="visuels">
|
||||||
<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">
|
|
||||||
<figure
|
<figure
|
||||||
v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
|
v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
|
||||||
>
|
>
|
||||||
|
@ -49,46 +51,77 @@
|
||||||
/>
|
/>
|
||||||
<caption></caption>
|
<caption></caption>
|
||||||
</figure>
|
</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>
|
</article>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import router from 'vuejs/route'
|
import router from 'vuejs/route'
|
||||||
|
import store from 'vuejs/store'
|
||||||
import { JSONAPI } from 'vuejs/api/json-axios'
|
import { JSONAPI } from 'vuejs/api/json-axios'
|
||||||
import qs from 'querystring'
|
import qs from 'querystring'
|
||||||
|
import Card from 'vuejs/components/Content/Card'
|
||||||
|
|
||||||
import { mapState, mapActions } from 'vuex'
|
import { mapState, mapActions } from 'vuex'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Article",
|
name: "Article",
|
||||||
router,
|
router,
|
||||||
|
store,
|
||||||
props: ['item'],
|
props: ['item'],
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
index:-1,
|
index:-1,
|
||||||
prevnext:{},
|
prevnext:{},
|
||||||
uuid:null,
|
uuid:null,
|
||||||
content:null
|
content:null,
|
||||||
|
loading:true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
items: state => state.Blabla.items
|
||||||
|
})
|
||||||
|
},
|
||||||
created(){
|
created(){
|
||||||
this.getArticle()
|
this.getArticle()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions({
|
...mapActions({
|
||||||
|
getItems: 'Blabla/getItems',
|
||||||
getItemIndex: 'Blabla/getItemIndex',
|
getItemIndex: 'Blabla/getItemIndex',
|
||||||
getPrevNextItems: 'Blabla/getPrevNextItems'
|
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(){
|
getArticle(){
|
||||||
console.log(this.$route);
|
console.log(this.$route);
|
||||||
// get the article uuid
|
// get the article uuid
|
||||||
|
@ -103,18 +136,39 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.uuid){
|
if(this.uuid){
|
||||||
this.getIndex()
|
|
||||||
this.loadArticle()
|
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{
|
}else{
|
||||||
// if for any reason we dont have the uuid
|
// if for any reason we dont have the uuid
|
||||||
// redirect to home
|
// redirect to home
|
||||||
this.$route.replace('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(){
|
loadArticle(){
|
||||||
console.log('loadArticle', this.uuid)
|
console.log('loadArticle', this.uuid)
|
||||||
|
this.loading = true;
|
||||||
let params = {
|
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)
|
let q = qs.stringify(params)
|
||||||
JSONAPI.get(`node/article/${this.uuid}?${q}`)
|
JSONAPI.get(`node/article/${this.uuid}?${q}`)
|
||||||
|
@ -144,19 +198,21 @@ export default {
|
||||||
// skip loop if the property is from prototype
|
// skip loop if the property is from prototype
|
||||||
if (!relations.hasOwnProperty(key)) continue;
|
if (!relations.hasOwnProperty(key)) continue;
|
||||||
|
|
||||||
let obj = relations[key]
|
let relation_obj = relations[key]
|
||||||
console.log('typeof obj.data', typeof obj.data);
|
console.log('typeof relation_obj.data', typeof relation_obj.data);
|
||||||
// skip obj if data is not array
|
// skip relation_obj if data is not array
|
||||||
if(!Array.isArray(obj.data)) continue
|
if(!Array.isArray(relation_obj.data)) continue
|
||||||
|
// create empty field array
|
||||||
this.content[key] = []
|
this.content[key] = []
|
||||||
// parse relationship values using included
|
// parse relationship values using included
|
||||||
let field = {}
|
let field = {}
|
||||||
obj.data.forEach((e) => {
|
// loop through all relation items
|
||||||
// get the included values
|
relation_obj.data.forEach((e) => {
|
||||||
|
// get the included values for each item using id
|
||||||
let included = inc.find((i) => { return i.id == e.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'){
|
if(typeof included != 'undefined'){
|
||||||
// fill the values
|
// fill the item values
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case 'field_visuel':
|
case 'field_visuel':
|
||||||
field = e.meta
|
field = e.meta
|
||||||
|
@ -164,6 +220,18 @@ export default {
|
||||||
field.src = included.links.card_medium.href
|
field.src = included.links.card_medium.href
|
||||||
break;
|
break;
|
||||||
case 'field_linked_materials':
|
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_thesaurus':
|
||||||
case 'field_tags':
|
case 'field_tags':
|
||||||
field = included.attributes
|
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);
|
console.log('article.content',this.content);
|
||||||
},
|
},
|
||||||
onNext(){
|
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, '')
|
let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
name:`article`,
|
name:`article`,
|
||||||
|
@ -192,7 +263,7 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onPrev(){
|
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, '')
|
let alias = this.prevnext.prev.view_node.replace(/^.?\/blabla\//g, '')
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
name:`article`,
|
name:`article`,
|
||||||
|
@ -201,6 +272,9 @@ export default {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
Card
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'$route' (to, from) {
|
'$route' (to, from) {
|
||||||
console.log('route change')
|
console.log('route change')
|
||||||
|
|
|
@ -8,6 +8,7 @@ export default {
|
||||||
|
|
||||||
// initial state
|
// initial state
|
||||||
state : {
|
state : {
|
||||||
|
contenttype:null,
|
||||||
items: [],
|
items: [],
|
||||||
page: 0,
|
page: 0,
|
||||||
// infinteState will come from vue-infinite-loading plugin
|
// infinteState will come from vue-infinite-loading plugin
|
||||||
|
@ -34,7 +35,17 @@ export default {
|
||||||
// actions
|
// actions
|
||||||
actions : {
|
actions : {
|
||||||
getItems({ dispatch, commit, state }){
|
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 }) => {
|
.then(({ data }) => {
|
||||||
console.log('blabla REST: data', data)
|
console.log('blabla REST: data', data)
|
||||||
if(data.length){
|
if(data.length){
|
||||||
|
@ -48,7 +59,7 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(( error ) => {
|
.catch(( error ) => {
|
||||||
console.warn('Issue with blabla', error)
|
console.warn('Issue with blabla getitems', error)
|
||||||
Promise.reject(error)
|
Promise.reject(error)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
|
@ -16,7 +16,7 @@ export default {
|
||||||
// mutations
|
// mutations
|
||||||
mutations : {
|
mutations : {
|
||||||
setPagetitle (state, title) {
|
setPagetitle (state, title) {
|
||||||
// console.log('Common, setPagetitle', title);
|
console.log('Common, setPagetitle', title);
|
||||||
state.pagetitle = title
|
state.pagetitle = title
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -142,9 +142,9 @@ export default {
|
||||||
let item = {
|
let item = {
|
||||||
uuid: uuid,
|
uuid: uuid,
|
||||||
title: attrs.title,
|
title: attrs.title,
|
||||||
description: attrs.field_short_description,
|
field_short_description: attrs.field_short_description,
|
||||||
body: attrs.body,
|
body: attrs.body,
|
||||||
reference: attrs.field_reference,
|
field_reference: attrs.field_reference,
|
||||||
}
|
}
|
||||||
|
|
||||||
// get images included values
|
// get images included values
|
||||||
|
|
Loading…
Reference in New Issue