|
@@ -0,0 +1,73 @@
|
|
|
+<template>
|
|
|
+ <figure class="node-view-figure mt-2 mb-4">
|
|
|
+ <div class="node-view-img-wrapper">
|
|
|
+ <img :src="image.url" :alt="image.alt">
|
|
|
+
|
|
|
+ <button-expand @click="onImageExpand" v-b-modal="'modal-image-' + node.id" />
|
|
|
+ <b-button variant="creation" class="btn-shadow btn-artwork" @click="onCreationClick">
|
|
|
+ {{ $t('text.read-artwork') }}
|
|
|
+ </b-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <figcaption class="mt-3">
|
|
|
+ <p class="m-0">
|
|
|
+ <strong>{{ toCommaList(node.authors) }}</strong>,
|
|
|
+ <em v-html="' ' + trim(node.title)" />
|
|
|
+ <br class="d-none d-md-inline">
|
|
|
+ {{ node.date.start }}
|
|
|
+ </p>
|
|
|
+ </figcaption>
|
|
|
+ </figure>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { trim, toCommaList } from '@/helpers/common'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'NodeViewFigure',
|
|
|
+
|
|
|
+ props: {
|
|
|
+ node: { type: Object, required: true }
|
|
|
+ },
|
|
|
+
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ image: undefined
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ trim,
|
|
|
+ toCommaList,
|
|
|
+
|
|
|
+ onImageExpand () {
|
|
|
+ this.$emit('expand-image', this.image)
|
|
|
+ },
|
|
|
+
|
|
|
+ onCreationClick () {
|
|
|
+ this.$store.dispatch('OPEN_CREATION', this.node.id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ created () {
|
|
|
+ if (this.node.images && this.node.images.length) {
|
|
|
+ const { url, alt, id } = this.node.images[0]
|
|
|
+ this.image = { alt, id, url: url.replace('api', 'api/sites/default/files') }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.node-view-figure {
|
|
|
+ .btn-artwork {
|
|
|
+ position: absolute;
|
|
|
+ right: $node-view-spacer-sm-x;
|
|
|
+ bottom: $node-view-spacer-sm-y;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|