Refactor indentation and styling in ThreadedPost component
- Adjusted margin and padding values for nested posts to improve visual hierarchy and readability. - Updated styles for 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:
parent
ba590d5a4a
commit
be8c7162b6
1 changed files with 5 additions and 5 deletions
|
|
@ -105,20 +105,20 @@ function getRideshareType(post: FeedPost): string {
|
|||
<!-- Vertical line connecting to parent (for nested replies) -->
|
||||
<div
|
||||
v-if="depth > 0"
|
||||
class="absolute left-0 top-0 bottom-0 w-px bg-border/40"
|
||||
:style="{ marginLeft: `${(depth - 1) * 12 + 6}px` }"
|
||||
class="absolute left-0 top-0 bottom-0 w-px bg-yellow-500/40"
|
||||
:style="{ marginLeft: `${(depth - 1) * 6 + 3}px` }"
|
||||
/>
|
||||
|
||||
<!-- Post container with indentation -->
|
||||
<div
|
||||
:class="{
|
||||
'pl-3': depth > 0,
|
||||
'pl-2': depth > 0,
|
||||
'hover:bg-accent/50': true,
|
||||
'transition-colors': true,
|
||||
'border-b': depth === 0,
|
||||
'border-border/40': depth === 0
|
||||
}"
|
||||
:style="{ marginLeft: `${depth * 12}px` }"
|
||||
:style="{ marginLeft: `${depth * 6}px` }"
|
||||
>
|
||||
<div class="p-3 relative">
|
||||
|
||||
|
|
@ -260,4 +260,4 @@ function getRideshareType(post: FeedPost): string {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue