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,8 +25,10 @@
|
||||
</div>
|
||||
|
||||
<div class="fc-post-card__body">
|
||||
<div class="fc-post-card__media">
|
||||
<template v-if="images.length">
|
||||
<!-- 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
|
||||
@@ -53,8 +55,6 @@
|
||||
@click="openModalAtMore"
|
||||
>+{{ moreCount }}</button>
|
||||
</div>
|
||||
</template>
|
||||
<PostEmptyThumbs v-else />
|
||||
</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