feat: media grid

This commit is contained in:
Anthony Fu 2022-11-14 11:33:09 +08:00
parent 10143fffec
commit c79902a04e
13 changed files with 142 additions and 39 deletions

View file

@ -0,0 +1,8 @@
<template>
<NuxtLink flex text-2xl gap-2 to="/">
<div i-logos-nuxt-icon />
<div>
Nuxtodon <sup text-sm italic op50 mt-1>Prototype</sup>
</div>
</NuxtLink>
</template>

View file

@ -0,0 +1,24 @@
<script setup lang="ts">
import type { Attachment } from 'masto'
const { attachment } = defineProps<{
attachment: Attachment
}>()
</script>
<template>
<template v-if="attachment.type === 'image'">
<img
class="status-attachment-image"
:src="attachment.previewUrl!"
:alt="attachment.description!"
border="~ gray/10"
object-cover rounded-lg
>
</template>
<template v-else>
<div>
TODO: {{ attachment }}
</div>
</template>
</template>

View file

@ -12,20 +12,22 @@ defineProps<{
<div class="status-body" v-html="sanitize(status.content)" /> <div class="status-body" v-html="sanitize(status.content)" />
</template> </template>
<style> <style lang="postcss">
.status-body a { .status-body {
--at-apply: text-primary hover:underline; a {
} --at-apply: text-primary hover:underline;
.status-body b { .invisible {
--at-apply: font-bold; --at-apply: hidden;
} }
.status-body p { .ellipsis {
--at-apply: my-1; --at-apply: truncate overflow-hidden ws-nowrap;
} }
.status-body a .invisible { }
--at-apply: hidden; b {
} --at-apply: font-bold;
.status-body a .ellipsis { }
--at-apply: truncate overflow-hidden ws-nowrap; p {
--at-apply: my-1;
}
} }
</style> </style>

View file

@ -7,8 +7,14 @@ const { status } = defineProps<{
const el = ref<HTMLElement>() const el = ref<HTMLElement>()
const router = useRouter() const router = useRouter()
function go(e: MouseEvent) { function go(e: MouseEvent) {
if (e.target === el.value) const path = e.composedPath() as HTMLElement[]
const hasButton = path.find(el => el.tagName === 'A' || el.tagName === 'BUTTON')
if (hasButton)
return
if (path.find(i => i === el.value))
router.push(`/@${status.account.acct}/${status.id}`) router.push(`/@${status.account.acct}/${status.id}`)
} }
@ -54,9 +60,10 @@ const timeago = useTimeAgo(() => status.createdAt, {
</div> </div>
</AccountInfo> </AccountInfo>
<StatusBody :status="status" /> <StatusBody :status="status" />
<template v-for="attachment of status.mediaAttachments" :key="attachment.id"> <StatusMedia
<StatusMedia :attachment="attachment" /> v-if="status.mediaAttachments?.length"
</template> :status="status"
/>
<StatusActions :status="status" /> <StatusActions :status="status" />
</div> </div>
</template> </template>

View file

@ -1,21 +1,42 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Attachment } from 'masto' import type { Status } from 'masto'
const { attachment } = defineProps<{ const { status } = defineProps<{
attachment: Attachment status: Status
}>() }>()
</script> </script>
<template> <template>
<template v-if="attachment.type === 'image'"> <div class="status-media-container" :class="`status-media-container-${status.mediaAttachments.length}`">
<img <template v-for="attachment of status.mediaAttachments" :key="attachment.id">
class="status-attachment-image" <StatusAttachment :attachment="attachment" class="w-full h-full" />
:src="attachment.previewUrl!" </template>
:alt="attachment.description!" </div>
rounded-lg border="~ gray/10"
>
</template>
<template v-else>
TODO: {{ attachment }}
</template>
</template> </template>
<style lang="postcss">
.status-media-container {
--at-apply: gap-0.5;
width: 100%;
overflow: hidden;
}
.status-media-container-1 {
display: grid;
grid-template-columns: 1fr;
}
.status-media-container-2 {
display: grid;
grid-template-columns: 1fr 1fr;
aspect-ratio: 2/1;
}
.status-media-container-3 {
display: grid;
aspect-ratio: 16/9;
grid-template-columns: 1fr 1fr;
}
.status-media-container-4 {
display: grid;
aspect-ratio: 16/9;
grid-template-columns: 1fr 1fr;
}
</style>

View file

@ -0,0 +1,13 @@
<script setup lang="ts">
import type { Status } from 'masto'
defineProps<{
timelines: Status[]
}>()
</script>
<template>
<template v-for="status of timelines" :key="status.id">
<StatusCard :status="status" border="t gray/10" pt-4 />
</template>
</template>

View file

@ -1,5 +1,6 @@
<template> <template>
<main class="py-10 px-10"> <main class="py-10 px-10">
<NavTitle />
<slot /> <slot />
</main> </main>
</template> </template>

View file

@ -16,4 +16,9 @@ export default defineNuxtConfig({
colorMode: { colorMode: {
classSuffix: '', classSuffix: '',
}, },
postcss: {
plugins: {
'postcss-nested': {},
},
},
}) })

View file

@ -12,6 +12,7 @@
"devDependencies": { "devDependencies": {
"@antfu/eslint-config": "^0.30.1", "@antfu/eslint-config": "^0.30.1",
"@iconify-json/carbon": "^1.1.9", "@iconify-json/carbon": "^1.1.9",
"@iconify-json/logos": "^1.1.18",
"@iconify-json/ri": "^1.1.3", "@iconify-json/ri": "^1.1.3",
"@iconify-json/twemoji": "^1.1.5", "@iconify-json/twemoji": "^1.1.5",
"@nuxtjs/color-mode": "^3.1.8", "@nuxtjs/color-mode": "^3.1.8",
@ -23,6 +24,7 @@
"masto": "^4.6.1", "masto": "^4.6.1",
"nuxt": "^3.0.0-rc.13", "nuxt": "^3.0.0-rc.13",
"pinia": "^2.0.23", "pinia": "^2.0.23",
"postcss-nested": "^6.0.0",
"sanitize-html": "^2.7.3", "sanitize-html": "^2.7.3",
"typescript": "^4.8.4" "typescript": "^4.8.4"
} }

View file

@ -4,10 +4,13 @@ const props = defineProps<{
}>() }>()
const params = useRoute().params const params = useRoute().params
const masto = await useMasto()
const { data: status } = await useAsyncData(() => masto.statuses.fetch(params.post as string))
</script> </script>
<template> <template>
<div> <div w-130>
{{ params }} <StatusCard :status="status" />
</div> </div>
</template> </template>

View file

@ -4,9 +4,7 @@ const { data: timelines } = await useAsyncData('public-timelines', () => masto.t
</script> </script>
<template> <template>
<div w-150> <div w-120>
<template v-for="status of timelines" :key="status.id"> <TimelineList :timelines="timelines" />
<StatusCard :status="status" border="t gray/10" pt-4 />
</template>
</div> </div>
</template> </template>

View file

@ -3,6 +3,7 @@ lockfileVersion: 5.4
specifiers: specifiers:
'@antfu/eslint-config': ^0.30.1 '@antfu/eslint-config': ^0.30.1
'@iconify-json/carbon': ^1.1.9 '@iconify-json/carbon': ^1.1.9
'@iconify-json/logos': ^1.1.18
'@iconify-json/ri': ^1.1.3 '@iconify-json/ri': ^1.1.3
'@iconify-json/twemoji': ^1.1.5 '@iconify-json/twemoji': ^1.1.5
'@nuxtjs/color-mode': ^3.1.8 '@nuxtjs/color-mode': ^3.1.8
@ -14,12 +15,14 @@ specifiers:
masto: ^4.6.1 masto: ^4.6.1
nuxt: ^3.0.0-rc.13 nuxt: ^3.0.0-rc.13
pinia: ^2.0.23 pinia: ^2.0.23
postcss-nested: ^6.0.0
sanitize-html: ^2.7.3 sanitize-html: ^2.7.3
typescript: ^4.8.4 typescript: ^4.8.4
devDependencies: devDependencies:
'@antfu/eslint-config': 0.30.1_rmayb2veg2btbq6mbmnyivgasy '@antfu/eslint-config': 0.30.1_rmayb2veg2btbq6mbmnyivgasy
'@iconify-json/carbon': 1.1.9 '@iconify-json/carbon': 1.1.9
'@iconify-json/logos': 1.1.18
'@iconify-json/ri': 1.1.3 '@iconify-json/ri': 1.1.3
'@iconify-json/twemoji': 1.1.5 '@iconify-json/twemoji': 1.1.5
'@nuxtjs/color-mode': 3.1.8 '@nuxtjs/color-mode': 3.1.8
@ -31,6 +34,7 @@ devDependencies:
masto: 4.6.1 masto: 4.6.1
nuxt: 3.0.0-rc.13_rmayb2veg2btbq6mbmnyivgasy nuxt: 3.0.0-rc.13_rmayb2veg2btbq6mbmnyivgasy
pinia: 2.0.23_typescript@4.8.4 pinia: 2.0.23_typescript@4.8.4
postcss-nested: 6.0.0
sanitize-html: 2.7.3 sanitize-html: 2.7.3
typescript: 4.8.4 typescript: 4.8.4
@ -624,6 +628,12 @@ packages:
'@iconify/types': 2.0.0 '@iconify/types': 2.0.0
dev: true dev: true
/@iconify-json/logos/1.1.18:
resolution: {integrity: sha512-Ra8BV3fJhE/5omYOY2UlDhgggyxxzMTppGH3n9EfFYh9Rpx4+HtE6zp7s+i3glYOqs2Me5HNcDEOkU63kcHqvg==}
dependencies:
'@iconify/types': 2.0.0
dev: true
/@iconify-json/ri/1.1.3: /@iconify-json/ri/1.1.3:
resolution: {integrity: sha512-YQ45kQNpuHc2bso4fDGhooWou43qy7njD/I5l7vpjcujb+P/K2BfLASbWYTTUKu6lMersuFmO8F7NdGzy6eGWw==} resolution: {integrity: sha512-YQ45kQNpuHc2bso4fDGhooWou43qy7njD/I5l7vpjcujb+P/K2BfLASbWYTTUKu6lMersuFmO8F7NdGzy6eGWw==}
dependencies: dependencies:
@ -5527,6 +5537,15 @@ packages:
postcss-selector-parser: 6.0.10 postcss-selector-parser: 6.0.10
dev: true dev: true
/postcss-nested/6.0.0:
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
engines: {node: '>=12.0'}
peerDependencies:
postcss: ^8.2.14
dependencies:
postcss-selector-parser: 6.0.10
dev: true
/postcss-normalize-charset/5.1.0_postcss@8.4.18: /postcss-normalize-charset/5.1.0_postcss@8.4.18:
resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==} resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
engines: {node: ^10 || ^12 || >=14.0} engines: {node: ^10 || ^12 || >=14.0}