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>
|
||||||
|
|
||||||
<div class="fc-post-card__body">
|
<div class="fc-post-card__body">
|
||||||
<div class="fc-post-card__media">
|
<!-- Media column only when the post HAS images. Text-only posts (the bulk
|
||||||
<template v-if="images.length">
|
of Patreon WIP/announcement/poll posts) let the body span the full
|
||||||
<!-- Images open the post-scoped image modal (look bigger + arrow
|
card width instead of padding a dead "no images" placeholder. -->
|
||||||
through ALL the post's images) — the card never expands. -->
|
<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
|
<button
|
||||||
type="button" class="fc-post-card__hero"
|
v-for="t in rail" :key="t.image_id" type="button"
|
||||||
aria-label="Open images" @click="openModal(hero.image_id)"
|
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>
|
</button>
|
||||||
<div
|
<button
|
||||||
v-if="rail.length || moreCount" class="fc-post-card__rail"
|
v-if="moreCount > 0" type="button"
|
||||||
:style="{ '--fc-rail-cols': railCols }"
|
class="fc-post-card__rail-more"
|
||||||
>
|
:aria-label="`Open ${moreCount} more images`"
|
||||||
<button
|
@click="openModalAtMore"
|
||||||
v-for="t in rail" :key="t.image_id" type="button"
|
>+{{ moreCount }}</button>
|
||||||
class="fc-post-card__rail-cell"
|
</div>
|
||||||
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 />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="fc-post-card__text">
|
<div class="fc-post-card__text">
|
||||||
@@ -128,7 +128,6 @@ import { RouterLink } from 'vue-router'
|
|||||||
import { useModalStore } from '../../stores/modal.js'
|
import { useModalStore } from '../../stores/modal.js'
|
||||||
import { usePostsStore } from '../../stores/posts.js'
|
import { usePostsStore } from '../../stores/posts.js'
|
||||||
import { toPlainText } from '../../utils/htmlSanitize.js'
|
import { toPlainText } from '../../utils/htmlSanitize.js'
|
||||||
import PostEmptyThumbs from './PostEmptyThumbs.vue'
|
|
||||||
import PostSeriesMenu from './PostSeriesMenu.vue'
|
import PostSeriesMenu from './PostSeriesMenu.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
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