fix(nostr-feed): Fix comment threading lines styling
- Change border-* to bg-* classes so threading lines actually display - Tighten spacing to match Lemmy-style threading (ml-0.5, pl-2, py-1) - Rename borderColor to depthColor for accuracy 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
8def8484b5
commit
c74ceaaf85
1 changed files with 14 additions and 14 deletions
|
|
@ -50,19 +50,19 @@ function formatTime(timestamp: number): string {
|
|||
return formatDistanceToNow(timestamp * 1000, { addSuffix: true })
|
||||
}
|
||||
|
||||
// Depth colors for threading lines
|
||||
// Depth colors for threading lines (using bg-* since we use width, not border)
|
||||
const depthColors = [
|
||||
'border-blue-400',
|
||||
'border-green-400',
|
||||
'border-yellow-400',
|
||||
'border-red-400',
|
||||
'border-purple-400',
|
||||
'border-pink-400',
|
||||
'border-orange-400',
|
||||
'border-cyan-400'
|
||||
'bg-blue-400',
|
||||
'bg-green-400',
|
||||
'bg-yellow-400',
|
||||
'bg-red-400',
|
||||
'bg-purple-400',
|
||||
'bg-pink-400',
|
||||
'bg-orange-400',
|
||||
'bg-cyan-400'
|
||||
]
|
||||
|
||||
const borderColor = computed(() => depthColors[props.depth % depthColors.length])
|
||||
const depthColor = computed(() => depthColors[props.depth % depthColors.length])
|
||||
|
||||
// Is own comment
|
||||
const isOwnComment = computed(() =>
|
||||
|
|
@ -74,7 +74,7 @@ const isOwnComment = computed(() =>
|
|||
<div
|
||||
:class="[
|
||||
'relative',
|
||||
depth > 0 ? 'ml-3' : ''
|
||||
depth > 0 ? 'ml-0.5' : ''
|
||||
]"
|
||||
>
|
||||
<!-- Threading line -->
|
||||
|
|
@ -82,7 +82,7 @@ const isOwnComment = computed(() =>
|
|||
v-if="depth > 0"
|
||||
:class="[
|
||||
'absolute left-0 top-0 bottom-0 w-0.5',
|
||||
borderColor,
|
||||
depthColor,
|
||||
'hover:w-1 transition-all cursor-pointer'
|
||||
]"
|
||||
@click="emit('toggle-collapse', comment.id)"
|
||||
|
|
@ -91,8 +91,8 @@ const isOwnComment = computed(() =>
|
|||
<!-- Comment content -->
|
||||
<div
|
||||
:class="[
|
||||
'py-2',
|
||||
depth > 0 ? 'pl-3' : '',
|
||||
'py-1',
|
||||
depth > 0 ? 'pl-2' : '',
|
||||
'hover:bg-accent/20 transition-colors'
|
||||
]"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue