modal tweaks
This commit is contained in:
nicwands
parent
a40ba93605
commit
41c42d5880
6 changed files with 70 additions and 22 deletions
|
|
@ -23,6 +23,9 @@ const props = defineProps({ row: Object })
|
|||
a {
|
||||
@include h6;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,28 @@
|
|||
class="mosaic-modal theme-dark layout-grid-inner"
|
||||
@click="emit('close')"
|
||||
>
|
||||
<div class="meta">
|
||||
<div class="window dl" @click.stop>
|
||||
<dl-row v-for="row in item.dl" :row="row" />
|
||||
</div>
|
||||
|
||||
<div class="window gif">
|
||||
<strapi-media :image="item.image" fit="contain" />
|
||||
|
||||
<a
|
||||
class="h6"
|
||||
href="https://web.archive.org/web/20090831003020/http://geocities.com/aizalonl/"
|
||||
target="_blank"
|
||||
>aizaloni</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="window content" @click.stop data-lenis-prevent>
|
||||
<lenis instance="mosaic-modal">
|
||||
<h1 class="title">{{ item.title }}</h1>
|
||||
|
||||
<strapi-map :items="item.content" />
|
||||
<strapi-map :items="item.content" mediaDS="42vw" />
|
||||
</lenis>
|
||||
</div>
|
||||
|
||||
|
|
@ -21,6 +34,7 @@
|
|||
|
||||
<script setup>
|
||||
const props = defineProps({ item: Object })
|
||||
console.log(props.item)
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
</script>
|
||||
|
|
@ -32,29 +46,42 @@ const emit = defineEmits(['close'])
|
|||
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);
|
||||
border-radius: desktop-vw(10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: desktop-vw(8px);
|
||||
grid-column: 4 / span 2;
|
||||
|
||||
.dl-row:first-child {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
&.gif {
|
||||
margin-top: var(--layout-margin);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
&.content {
|
||||
border-radius: desktop-vw(10px);
|
||||
grid-column: 6 / span 7;
|
||||
|
||||
.lenis {
|
||||
max-height: desktop-vh(900px);
|
||||
max-height: desktop-vh(950px);
|
||||
overflow: auto;
|
||||
padding: desktop-vw(34px) desktop-vw(24px);
|
||||
}
|
||||
|
|
@ -62,17 +89,15 @@ const emit = defineEmits(['close'])
|
|||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.strapi-media {
|
||||
border-radius: desktop-vw(4px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&.close {
|
||||
padding: desktop-vw(9px);
|
||||
border-radius: desktop-vw(16px);
|
||||
cursor: pointer;
|
||||
/* position: absolute;
|
||||
right: calc(
|
||||
(var(--layout-column-width) * 3) +
|
||||
(var(--layout-column-gap) * 3) + var(--layout-margin)
|
||||
);
|
||||
top: desktop-vw(40px); */
|
||||
margin-right: auto;
|
||||
@include label;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import _shuffle from 'lodash/shuffle'
|
||||
import { useMosaicLayout } from '@/composables/useMosaicLayout'
|
||||
|
||||
|
|
@ -20,12 +21,23 @@ const props = defineProps({
|
|||
items: Array,
|
||||
})
|
||||
|
||||
// Initialize mosaic layout generator
|
||||
const itemIndex = ref(0)
|
||||
const shuffledItems = ref(_shuffle(props.items))
|
||||
|
||||
const { generateLayout, populateCells } = useMosaicLayout()
|
||||
|
||||
const generateCellContent = () => {
|
||||
const itemIndex = Math.floor(Math.random() * props.items.length)
|
||||
return props.items[itemIndex]
|
||||
if (itemIndex.value >= shuffledItems.value.length - 1) {
|
||||
itemIndex.value = 0
|
||||
shuffledItems.value = _shuffle(props.items)
|
||||
return generateCellContent()
|
||||
}
|
||||
|
||||
const item = shuffledItems.value[itemIndex.value]
|
||||
|
||||
itemIndex.value++
|
||||
|
||||
return item
|
||||
}
|
||||
|
||||
// Generate mosaic content for each viewport
|
||||
|
|
|
|||
|
|
@ -25,5 +25,11 @@ const props = defineProps({
|
|||
> *:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--grey);
|
||||
border-radius: desktop-vw(2px);
|
||||
padding: desktop-vw(20px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
v-for="item in items"
|
||||
v-bind="item"
|
||||
:is="MAP[item.__component]"
|
||||
:desktopSize="mediaDS"
|
||||
:mobileSize="mediaMS"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -19,6 +21,8 @@ const MAP = {
|
|||
|
||||
const props = defineProps({
|
||||
items: Array,
|
||||
mediaDS: String,
|
||||
mediaMS: String,
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -26,6 +30,6 @@ const props = defineProps({
|
|||
.strapi-map {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: desktop-vw(40px);
|
||||
gap: desktop-vw(30px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
>
|
||||
<div class="image-sizer">
|
||||
<img
|
||||
:src="addURLBase(image.url)"
|
||||
:src="image.url"
|
||||
:srcset="srcset"
|
||||
:sizes="sizes"
|
||||
:alt="image.alternativeText || ''"
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<video
|
||||
v-if="video?.url"
|
||||
:src="addURLBase(video.url)"
|
||||
:src="video.url"
|
||||
muted
|
||||
autoplay
|
||||
playsinline
|
||||
|
|
@ -57,8 +57,6 @@ const props = defineProps({
|
|||
},
|
||||
})
|
||||
|
||||
const addURLBase = (path) => `${import.meta.env.VITE_STRAPI_URL}${path}`
|
||||
|
||||
const formats = computed(() => props.image?.formats || {})
|
||||
const ratio = computed(() => {
|
||||
if (!props.image) return 1
|
||||
|
|
@ -77,7 +75,7 @@ const aspect = computed(() => {
|
|||
const styles = computed(() => ({ '--aspect': aspect.value + '%' }))
|
||||
const srcset = computed(() =>
|
||||
Object.values(formats.value)
|
||||
.map((f) => `${addURLBase(f.url)} ${f.width}w`)
|
||||
.map((f) => `${f.url} ${f.width}w`)
|
||||
.join(', '),
|
||||
)
|
||||
const sizes = computed(
|
||||
|
|
|
|||
Loading…
Reference in a new issue