feat(posts): full-width body for image-less posts (drop dead 'no images' box)
CI / lint (push) Successful in 2s
CI / frontend-build (push) Successful in 28s
CI / backend-lint-and-test (push) Successful in 35s
CI / integration (push) Successful in 3m16s

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:
2026-06-15 00:42:14 -04:00
parent 976107bbe8
commit f897e2534b
2 changed files with 27 additions and 63 deletions
+27 -28
View File
@@ -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>