Refactor indentation and styling in ThreadedPost component

- Adjusted margin and padding values for nested posts to improve visual hierarchy and readability.
- Updated styles for vertical lines and post containers to enhance the overall layout of threaded discussions.

These changes contribute to a more organized and user-friendly interface within the NostrFeed module.
This commit is contained in:
padreug 2025-09-20 11:46:57 +02:00
parent ebc7885f04
commit 791bdbe3eb

View file

@ -106,26 +106,26 @@ function getRideshareType(post: FeedPost): string {
<div <div
v-if="depth > 0" v-if="depth > 0"
class="absolute left-0 top-0 bottom-0 w-px bg-border/40" class="absolute left-0 top-0 bottom-0 w-px bg-border/40"
:style="{ marginLeft: `${(depth - 1) * 24 + 12}px` }" :style="{ marginLeft: `${(depth - 1) * 12 + 6}px` }"
/> />
<!-- Post container with indentation --> <!-- Post container with indentation -->
<div <div
:class="{ :class="{
'pl-6': depth > 0, 'pl-3': depth > 0,
'hover:bg-accent/50': true, 'hover:bg-accent/50': true,
'transition-colors': true, 'transition-colors': true,
'border-b': depth === 0, 'border-b': depth === 0,
'border-border/40': depth === 0 'border-border/40': depth === 0
}" }"
:style="{ marginLeft: `${depth * 24}px` }" :style="{ marginLeft: `${depth * 12}px` }"
> >
<div class="p-3 relative"> <div class="p-3 relative">
<!-- Horizontal line from vertical line to content (for nested replies) --> <!-- Horizontal line from vertical line to content (for nested replies) -->
<div <div
v-if="depth > 0" v-if="depth > 0"
class="absolute left-0 top-7 w-3 h-px bg-border/40" class="absolute left-0 top-7 w-2 h-px bg-border/40"
:style="{ marginLeft: `-${depth * 24}px` }" :style="{ marginLeft: `-${depth * 12}px` }"
/> />
<!-- Post Header --> <!-- Post Header -->