123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- <template>
- <div class="gallery-view wh-100">
- <div class="gallery-view-wrapper wh-100">
- <figure class="gallery-view-figure">
- <div class="h-100" />
- <div class="node-view-img-wrapper">
- <img :src="node.image.url" :alt="node.image.alt">
- <button-expand v-if="node.piece.url" v-b-modal="'modal-creation' + node.id" class="center" />
- <div class="btns-artwork">
- <b-button variant="depart" class="btn-shadow btn-artwork mr-2" @click="$emit('view-origin')">
- {{ $t('text.open-origin') }}
- </b-button>
- <b-button variant="creation" class="btn-shadow btn-artwork" v-b-toggle.gallery-text>
- {{ $t('text.open-artwork') }}
- </b-button>
- </div>
- </div>
- <figcaption class="gallery-view-caption">
- <node-view-title :node="node" tag="p" class="mb-0 mt-4" />
- </figcaption>
- </figure>
- <div
- v-for="(sibling, i) in node.creation_siblings" :key="sibling.id"
- class="gallery-view-btn-wrapper"
- :class="buttonClasses[i]"
- >
- <button-image :image="sibling.image" @click="$emit('open-creation', sibling.id)">
- <node-view-title
- :node="sibling"
- tag="span" link
- class="sr-only"
- />
- </button-image>
- </div>
- <side-view id="gallery-text" right no-cross>
- <template #default="{ hide }">
- <node-view
- :node="node"
- @close-node="hide"
- @open-node="$emit('view-origin')"
- force-type="ref" show-origin
- />
- </template>
- </side-view>
- </div>
- </div>
- </template>
- <script>
- import { NodeViewTitle, NodeView } from '@/components/nodes'
- import { SideView } from '@/components/layouts'
- import { trim, toCommaList, shuffle } from '@/helpers/common'
- export default {
- name: 'GalleryView',
- components: {
- NodeViewTitle,
- NodeView,
- SideView
- },
- props: {
- node: { type: Object, default: undefined }
- },
- data () {
- return {
- image: undefined,
- buttonClasses: [
- ['top', 'left'],
- ['top', 'right'],
- ['bottom', 'right'],
- ['bottom', 'left']
- ]
- }
- },
- methods: {
- trim,
- toCommaList
- },
- created () {
- this.buttonClasses = shuffle(this.buttonClasses)
- }
- }
- </script>
- <style lang="scss" scoped>
- .gallery-view {
- margin: auto;
- &-wrapper {
- display: flex;
- }
- &-figure {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- height: calc(100% - 4rem);
- margin: auto;
- width: calc(100% - 4rem);
- @media (orientation: landscape) {
- width: calc(100% - 270px);
- @include media-breakpoint-up($size-bp) {
- width: calc(100% - 500px);
- }
- }
- .node-view-img-wrapper {
- flex-basis: 100%;
- flex-grow: 2;
- height: calc(100% - 270px - 4rem);
- @media (orientation: landscape) {
- height: calc(100% - 270px);
- @include media-breakpoint-up($size-bp) {
- height: calc(100% - 450px);
- }
- }
- }
- img {
- object-fit: cover;
- object-position: center;
- width: 100%;
- height: 100%;
- }
- .btns-artwork {
- position: absolute;
- @include media-breakpoint-down($size-bp-down) {
- top: -50px;
- width: 100%;
- display: flex;
- justify-content: space-between;
- }
- @include media-breakpoint-up($size-bp) {
- right: $node-view-spacer-sm-x;
- bottom: $node-view-spacer-sm-y;
- }
- }
- }
- &-caption {
- height: 100%;
- text-align: center;
- font-family: $font-family-text;
- @include media-breakpoint-up($size-bp) {
- font-size: 1.5rem;
- }
- }
- .gallery-view-btn-wrapper {
- position: absolute;
- overflow: hidden;
- &.left {
- left: 0;
- }
- &.right {
- right: 0;
- }
- &.top {
- top: 0;
- }
- &.bottom {
- bottom: 0;
- }
- }
- }
- ::v-deep #gallery-text {
- @include media-breakpoint-up($size-bp) {
- width: 100%;
- }
- .node-view {
- min-height: 100%;
- &-wrapper {
- min-height: 100%;
- }
- }
- }
- </style>
|