feat(posts): full-width body for image-less posts (drop dead 'no images' box)
Text-only Patreon posts (WIP/announcement/poll — the bulk of a creator's feed) rendered a big empty 'No images attached to this post' placeholder taking half the card. Render the media column only when the post HAS images; image-less posts let the title + body span the full width. Removes the now-dead PostEmptyThumbs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -25,36 +25,36 @@
|
||||
</div>
|
||||
|
||||
<div class="fc-post-card__body">
|
||||
<div class="fc-post-card__media">
|
||||
<template v-if="images.length">
|
||||
<!-- Images open the post-scoped image modal (look bigger + arrow
|
||||
through ALL the post's images) — the card never expands. -->
|
||||
<!-- Media column only when the post HAS images. Text-only posts (the bulk
|
||||
of Patreon WIP/announcement/poll posts) let the body span the full
|
||||
card width instead of padding a dead "no images" placeholder. -->
|
||||
<div v-if="images.length" class="fc-post-card__media">
|
||||
<!-- Images open the post-scoped image modal (look bigger + arrow
|
||||
through ALL the post's images) — the card never expands. -->
|
||||
<button
|
||||
type="button" class="fc-post-card__hero"
|
||||
aria-label="Open images" @click="openModal(hero.image_id)"
|
||||
>
|
||||
<img :src="hero.thumbnail_url" alt="hero thumbnail" loading="lazy" />
|
||||
</button>
|
||||
<div
|
||||
v-if="rail.length || moreCount" class="fc-post-card__rail"
|
||||
:style="{ '--fc-rail-cols': railCols }"
|
||||
>
|
||||
<button
|
||||
type="button" class="fc-post-card__hero"
|
||||
aria-label="Open images" @click="openModal(hero.image_id)"
|
||||
v-for="t in rail" :key="t.image_id" type="button"
|
||||
class="fc-post-card__rail-cell"
|
||||
aria-label="Open image" @click="openModal(t.image_id)"
|
||||
>
|
||||
<img :src="hero.thumbnail_url" alt="hero thumbnail" loading="lazy" />
|
||||
<img :src="t.thumbnail_url" alt="thumbnail" loading="lazy" />
|
||||
</button>
|
||||
<div
|
||||
v-if="rail.length || moreCount" class="fc-post-card__rail"
|
||||
:style="{ '--fc-rail-cols': railCols }"
|
||||
>
|
||||
<button
|
||||
v-for="t in rail" :key="t.image_id" type="button"
|
||||
class="fc-post-card__rail-cell"
|
||||
aria-label="Open image" @click="openModal(t.image_id)"
|
||||
>
|
||||
<img :src="t.thumbnail_url" alt="thumbnail" loading="lazy" />
|
||||
</button>
|
||||
<button
|
||||
v-if="moreCount > 0" type="button"
|
||||
class="fc-post-card__rail-more"
|
||||
:aria-label="`Open ${moreCount} more images`"
|
||||
@click="openModalAtMore"
|
||||
>+{{ moreCount }}</button>
|
||||
</div>
|
||||
</template>
|
||||
<PostEmptyThumbs v-else />
|
||||
<button
|
||||
v-if="moreCount > 0" type="button"
|
||||
class="fc-post-card__rail-more"
|
||||
:aria-label="`Open ${moreCount} more images`"
|
||||
@click="openModalAtMore"
|
||||
>+{{ moreCount }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fc-post-card__text">
|
||||
@@ -128,7 +128,6 @@ import { RouterLink } from 'vue-router'
|
||||
import { useModalStore } from '../../stores/modal.js'
|
||||
import { usePostsStore } from '../../stores/posts.js'
|
||||
import { toPlainText } from '../../utils/htmlSanitize.js'
|
||||
import PostEmptyThumbs from './PostEmptyThumbs.vue'
|
||||
import PostSeriesMenu from './PostSeriesMenu.vue'
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div class="fc-post-empty">
|
||||
<v-icon size="48" class="fc-post-empty__icon">mdi-image-off-outline</v-icon>
|
||||
<div class="fc-post-empty__text">No images attached to this post</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// No props — pure presentational placeholder.
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fc-post-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 32px 16px;
|
||||
border: 1px dashed rgb(var(--v-theme-on-surface-variant));
|
||||
border-radius: 8px;
|
||||
background: rgba(20, 23, 26, 0.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
}
|
||||
.fc-post-empty__icon {
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
opacity: 0.6;
|
||||
}
|
||||
.fc-post-empty__text {
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user