158 lines
4.1 KiB
Vue
158 lines
4.1 KiB
Vue
<template>
|
|
<div class="mosaic-modal theme-dark layout-grid-inner" @click="onClose">
|
|
<div class="meta">
|
|
<div v-if="item.dl?.length" class="window dl" @click.stop>
|
|
<dl-row v-for="row in item.dl" :row="row" />
|
|
</div>
|
|
|
|
<div class="window gif" @click.stop>
|
|
<strapi-media :image="item.image" fit="contain" />
|
|
|
|
<strapi-link class="h6" v-bind="item.image_attribution" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="window content" @click.stop data-lenis-prevent>
|
|
<lenis instance="mosaic-modal">
|
|
<button class="close mobile-only" @click="onClose">
|
|
Close X
|
|
</button>
|
|
|
|
<h1 class="title">{{ item.title }}</h1>
|
|
|
|
<strapi-map :items="item.content" mediaDS="42vw" />
|
|
</lenis>
|
|
</div>
|
|
|
|
<button class="window close desktop-only" @click="onClose">
|
|
Close X
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const props = defineProps({ item: Object })
|
|
|
|
const router = useRouter()
|
|
const onClose = () => router.push('/')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mosaic-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
align-items: flex-start;
|
|
padding-top: desktop-vw(27px);
|
|
|
|
.meta {
|
|
grid-column: 4 / span 2;
|
|
}
|
|
|
|
.window {
|
|
background: var(--theme-bg);
|
|
color: var(--theme-fg);
|
|
border-radius: desktop-vw(10px);
|
|
|
|
&.dl {
|
|
padding: desktop-vw(12px) desktop-vw(10px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: desktop-vw(8px);
|
|
margin-bottom: var(--layout-margin);
|
|
|
|
.dl-row:first-child {
|
|
border-top: none;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
&.gif {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
display: block;
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
&.content {
|
|
grid-column: 6 / span 9;
|
|
|
|
.lenis {
|
|
max-height: desktop-vh(950px);
|
|
overflow: auto;
|
|
padding: desktop-vw(34px) desktop-vw(24px);
|
|
}
|
|
.title {
|
|
text-align: center;
|
|
margin-bottom: 1em;
|
|
}
|
|
.strapi-media {
|
|
border-radius: desktop-vw(4px);
|
|
overflow: hidden;
|
|
}
|
|
.strapi-content {
|
|
max-width: columns(6);
|
|
margin: auto;
|
|
}
|
|
}
|
|
&.close {
|
|
padding: desktop-vw(9px);
|
|
border-radius: desktop-vw(16px);
|
|
cursor: pointer;
|
|
margin-right: auto;
|
|
@include label;
|
|
}
|
|
}
|
|
|
|
@include mobile() {
|
|
padding: var(--layout-margin);
|
|
height: calc(100 * var(--vh));
|
|
grid-template-rows: auto 1fr;
|
|
|
|
.meta {
|
|
grid-column: 1/-1;
|
|
grid-template-columns: 1fr 1fr;
|
|
display: grid;
|
|
gap: var(--layout-column-gap);
|
|
align-items: flex-start;
|
|
}
|
|
.window {
|
|
border-radius: mobile-vw(10px);
|
|
|
|
&.dl {
|
|
padding: mobile-vw(12px) mobile-vw(10px);
|
|
}
|
|
&.gif {
|
|
.strapi-media {
|
|
max-width: mobile-vw(80px);
|
|
max-height: mobile-vw(80px);
|
|
margin: auto;
|
|
}
|
|
}
|
|
&.content {
|
|
grid-column: 1/-1;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.lenis {
|
|
max-height: unset;
|
|
height: 100%;
|
|
padding: mobile-vw(54px) mobile-vw(24px) mobile-vw(34px);
|
|
}
|
|
.strapi-media {
|
|
border-radius: mobile-vw(8px);
|
|
}
|
|
.close {
|
|
position: absolute;
|
|
top: 1em;
|
|
right: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|