blog added
This commit is contained in:
thomas
+45
-41
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div v-if="checkout.lineItems.length === 0">
|
||||
<div class="column">
|
||||
<h1 class="is-size-1">
|
||||
@@ -11,51 +11,55 @@
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h1 class="is-size-1">
|
||||
Panier
|
||||
Cart
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<b-table :data="checkout.lineItems">
|
||||
<template slot-scope="props">
|
||||
<b-table-column field="image" label="Image">
|
||||
<figure class="image is-96x96">
|
||||
<img class="is-rounded" :src="props.row.variant.image.src" :alt="props.row.description">
|
||||
</figure>
|
||||
</b-table-column>
|
||||
<b-table-column field="title" label="Title">
|
||||
<p class="title">
|
||||
{{ props.row.title }}
|
||||
</p>
|
||||
</b-table-column>
|
||||
<b-table-column field="price" label="Price">
|
||||
{{ props.row.variant.price }}€
|
||||
</b-table-column>
|
||||
<b-table-column field="quantity" label="Quantity">
|
||||
{{ props.row.quantity }}
|
||||
</b-table-column>
|
||||
<b-table-column field="total" label="Total">
|
||||
{{ getItemTotal(props.row) }} €
|
||||
</b-table-column>
|
||||
<b-table-column field="delete" label="Delete">
|
||||
<b-button
|
||||
class="is-danger"
|
||||
icon-left="delete"
|
||||
@click="deleteItem(props.row.id)"
|
||||
>
|
||||
Delete
|
||||
</b-button>
|
||||
</b-table-column>
|
||||
</template>
|
||||
</b-table>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
</div>
|
||||
<div class="column is-2 is-pulled-right">
|
||||
<p class="subtitle">
|
||||
Subtotal : {{ checkout.subtotalPrice }} €
|
||||
</p>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<b-table :data="checkout.lineItems">
|
||||
<template slot-scope="props">
|
||||
<b-table-column field="image" label="Image">
|
||||
<figure class="image is-96x96">
|
||||
<img class="is-rounded" :src="props.row.variant.image.src" :alt="props.row.description">
|
||||
</figure>
|
||||
</b-table-column>
|
||||
<b-table-column field="title" label="Title">
|
||||
<p class="title">
|
||||
{{ props.row.title }}
|
||||
</p>
|
||||
</b-table-column>
|
||||
<b-table-column field="price" label="Price">
|
||||
{{ props.row.variant.price }}€
|
||||
</b-table-column>
|
||||
<b-table-column field="quantity" label="Quantity">
|
||||
{{ props.row.quantity }}
|
||||
</b-table-column>
|
||||
<b-table-column field="total" label="Total">
|
||||
{{ getItemTotal(props.row) }} €
|
||||
</b-table-column>
|
||||
<b-table-column field="delete" label="Delete">
|
||||
<b-button
|
||||
class="is-danger"
|
||||
icon-left="delete"
|
||||
@click="deleteItem(props.row.id)"
|
||||
>
|
||||
Delete
|
||||
</b-button>
|
||||
</b-table-column>
|
||||
</template>
|
||||
</b-table>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
</div>
|
||||
<div class="column is-2 is-pulled-right">
|
||||
<p class="subtitle">
|
||||
Subtotal : {{ checkout.subtotalPrice }} €
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,28 +1,54 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
Article {{ params }}
|
||||
{{ article }}
|
||||
<div>
|
||||
<section class="hero is-info is-medium is-bold">
|
||||
<div
|
||||
class="hero-body"
|
||||
:style="{
|
||||
backgroundImage: (article.image === null) ? '' : `url(${article.image.originalSrc})`,
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: 'cover'
|
||||
}"
|
||||
/>
|
||||
</section>
|
||||
<div class="container">
|
||||
<section class="articles">
|
||||
<div class="card article">
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content has-text-centered">
|
||||
<p class="title article-title">{{ article.title }}</p>
|
||||
<div class="tags has-addons level-item">
|
||||
<span class="tag is-rounded is-info">@{{ article.authorV2.name }}</span>
|
||||
<span class="tag is-rounded">{{ $moment(article.publishedAt).format('DD MMMM Y') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content article-body">
|
||||
<p v-html="article.contentHtml" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Index',
|
||||
layout: 'noContainer',
|
||||
asyncData ({ app, params }) {
|
||||
return app.$axios({
|
||||
method: 'POST',
|
||||
data: {
|
||||
query: `query {
|
||||
blogByHandle (handle:"${params.handle}") {
|
||||
title,
|
||||
handle
|
||||
articleByHandle (handle: "${params.articleHandle}") {
|
||||
title,
|
||||
publishedAt,
|
||||
contentHtml
|
||||
authorV2 {
|
||||
bio,
|
||||
firstName,
|
||||
lastName
|
||||
name
|
||||
},
|
||||
image (maxWidth: 2000) {
|
||||
altText,
|
||||
@@ -42,4 +68,24 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.articles {
|
||||
margin: -200px 0 5rem;
|
||||
}
|
||||
.articles .content p {
|
||||
line-height: 1.9;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.media-content {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.article {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
.article-body {
|
||||
line-height: 1.4;
|
||||
margin: 0 6rem;
|
||||
}
|
||||
.hero-body {
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,57 +1,19 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>{{ blog.title }}</h1>
|
||||
<div class="columns is-multiline">
|
||||
<div
|
||||
v-for="article in blog.articles.edges"
|
||||
:key="article.node.id"
|
||||
class="column is-full-mobile is-half-tablet is-one-third-desktop"
|
||||
>
|
||||
<nuxt-link :to="`/blog/${blog.handle}/article/${article.node.handle}`">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure v-if="article.node.image !== null">
|
||||
<img
|
||||
:src="article.node.image.originalSrc"
|
||||
:alt="article.node.image.altText"
|
||||
>
|
||||
</figure>
|
||||
<figure v-else class="is-flex">
|
||||
<img
|
||||
src="/img/no-image.jpg"
|
||||
alt="image-not-found"
|
||||
>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
{{ article.node.title }}
|
||||
</p>
|
||||
<p class="subtitle is-6">{{ article.node.excerpt }}</p>
|
||||
<div class="content">
|
||||
<b-taglist class="is-marginless">
|
||||
<b-tag
|
||||
v-for="tag in article.node.tags"
|
||||
:key="tag"
|
||||
href="#"
|
||||
type="is-primary"
|
||||
>
|
||||
#{{ tag }}
|
||||
</b-tag>
|
||||
</b-taglist>
|
||||
<time datetime="2016-1-1">{{ article.node.publishedAt }}</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<blog-card-list
|
||||
:blog="blog"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BlogCardList from '../../../components/BlogCardList'
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
BlogCardList
|
||||
},
|
||||
asyncData ({ app, params }) {
|
||||
return app.$axios({
|
||||
method: 'POST',
|
||||
@@ -89,13 +51,4 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.subtitle {
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
figure.is-flex {
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class="hero is-primary" style="margin-bottom: 2rem">
|
||||
<section class="hero is-medium is-primary" style="margin-bottom: 2rem">
|
||||
<div
|
||||
class="hero-body"
|
||||
:style="{
|
||||
@@ -17,27 +17,23 @@
|
||||
</div>
|
||||
</section>
|
||||
<div class="container">
|
||||
<section class="articles">
|
||||
<div class="card article">
|
||||
<div class="card-content">
|
||||
<div class="content article-body">
|
||||
<p v-html="collection.descriptionHtml" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p
|
||||
class="subtitle"
|
||||
v-html="collection.descriptionHtml"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="hr" />
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h2 class="is-2">Products in this collection</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<product-card-list
|
||||
:products="collection.products"
|
||||
/>
|
||||
<h2 class="is-size-4">Products in this collection</h2>
|
||||
</div>
|
||||
</div>
|
||||
<product-card-list
|
||||
:products="collection.products"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -60,4 +56,27 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.articles {
|
||||
margin: -200px 0 5rem;
|
||||
}
|
||||
.articles .content p {
|
||||
line-height: 1.9;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.media-content {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.article {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
.article-body {
|
||||
line-height: 1.4;
|
||||
margin: 0 6rem;
|
||||
}
|
||||
.hero-body {
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
+2
-1
@@ -4,7 +4,7 @@
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h1 class="is-size-2">My home page</h1>
|
||||
<p>ceci est la page d'acceuil, ce texte ne changera pas car c'est une boutique</p>
|
||||
<p>This website is for developpement purpose, please don't try to buy something here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,6 +43,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
layout: 'noContainer',
|
||||
asyncData ({ app }) {
|
||||
return app.$axios({
|
||||
method: 'POST',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Policy id</h1>
|
||||
<h1>Policy</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user