mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-18 19:23:40 +00:00
Beautify notes
This commit is contained in:
parent
1e48e46275
commit
6f75712e6e
@ -1,6 +1,5 @@
|
|||||||
# Current
|
# Current
|
||||||
|
|
||||||
- [ ] Try adding boxes/separation on feeds based on user feedback
|
|
||||||
- [ ] Strip zero width spaces from compose
|
- [ ] Strip zero width spaces from compose
|
||||||
- [ ] Fix iOS/safari/firefox
|
- [ ] Fix iOS/safari/firefox
|
||||||
- [ ] Add dynamic title tag
|
- [ ] Add dynamic title tag
|
||||||
|
@ -9,10 +9,11 @@
|
|||||||
<div
|
<div
|
||||||
on:click
|
on:click
|
||||||
in:fly={{y: 20}}
|
in:fly={{y: 20}}
|
||||||
class={cx($$props.class, "card py-2 px-3 text-white", {
|
class={cx($$props.class, "card p-3 text-white rounded-2xl bg-dark", {
|
||||||
|
'bg-dark': !invertColors,
|
||||||
|
'bg-medium': invertColors,
|
||||||
"cursor-pointer transition-all": interactive,
|
"cursor-pointer transition-all": interactive,
|
||||||
"hover:bg-dark": interactive && !invertColors,
|
"hover:bg-medium": interactive && !invertColors,
|
||||||
"hover:bg-medium": interactive && invertColors,
|
|
||||||
})}>
|
})}>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
@ -105,7 +105,7 @@
|
|||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div>
|
<div class="flex flex-col gap-4">
|
||||||
{#each notes as note (note.id)}
|
{#each notes as note (note.id)}
|
||||||
<Note depth={2} {note} />
|
<Note depth={2} {note} />
|
||||||
{/each}
|
{/each}
|
||||||
|
@ -53,6 +53,7 @@
|
|||||||
let showRelays = false
|
let showRelays = false
|
||||||
|
|
||||||
const {profile} = user
|
const {profile} = user
|
||||||
|
const borderColor = invertColors ? "medium" : "dark"
|
||||||
const links = extractUrls(note.content)
|
const links = extractUrls(note.content)
|
||||||
const showEntire = anchorId === note.id
|
const showEntire = anchorId === note.id
|
||||||
const interactive = !anchorId || !showEntire
|
const interactive = !anchorId || !showEntire
|
||||||
@ -302,11 +303,11 @@
|
|||||||
|
|
||||||
if (lastChild) {
|
if (lastChild) {
|
||||||
const height = (
|
const height = (
|
||||||
getHeight(noteContainer)
|
64
|
||||||
+ getHeight(replyContainer)
|
|
||||||
+ getHeight(childrenContainer)
|
+ getHeight(childrenContainer)
|
||||||
- getHeight(lastChild)
|
- getHeight(lastChild)
|
||||||
- getHeight(lastChild.nextElementSibling)
|
- getHeight(lastChild.nextElementSibling)
|
||||||
|
- (lastChild.nextElementSibling ? 16 : 0)
|
||||||
)
|
)
|
||||||
|
|
||||||
border.style = `height: ${height - 21}px`
|
border.style = `height: ${height - 21}px`
|
||||||
@ -328,10 +329,9 @@
|
|||||||
|
|
||||||
{#if $person}
|
{#if $person}
|
||||||
<div bind:this={noteContainer} class="note relative">
|
<div bind:this={noteContainer} class="note relative">
|
||||||
<div class="absolute w-px bg-light z-10 ml-8 mt-12 h-0" bind:this={border} />
|
|
||||||
<Card class="flex gap-4 relative" on:click={onClick} {interactive} {invertColors}>
|
<Card class="flex gap-4 relative" on:click={onClick} {interactive} {invertColors}>
|
||||||
{#if !showParent}
|
{#if !showParent}
|
||||||
<div class="absolute h-px w-3 bg-light z-10" style="left: 0px; top: 27px;" />
|
<div class={`absolute h-px -ml-4 w-4 bg-${borderColor} z-10`} style="left: 0px; top: 27px;" />
|
||||||
{/if}
|
{/if}
|
||||||
<div>
|
<div>
|
||||||
<Anchor class="text-lg font-bold" href={routes.person($person.pubkey)}>
|
<Anchor class="text-lg font-bold" href={routes.person($person.pubkey)}>
|
||||||
@ -430,7 +430,7 @@
|
|||||||
|
|
||||||
{#if reply}
|
{#if reply}
|
||||||
<div transition:slide class="note-reply relative z-10" bind:this={replyContainer}>
|
<div transition:slide class="note-reply relative z-10" bind:this={replyContainer}>
|
||||||
<div class="bg-medium border-light border border-solid" on:keydown={onReplyKeydown}>
|
<div class={`border border-${borderColor} border-solid rounded-t bg-dark`} on:keydown={onReplyKeydown}>
|
||||||
<Compose bind:this={reply} onSubmit={sendReply}>
|
<Compose bind:this={reply} onSubmit={sendReply}>
|
||||||
<button
|
<button
|
||||||
slot="addon"
|
slot="addon"
|
||||||
@ -442,7 +442,7 @@
|
|||||||
</Compose>
|
</Compose>
|
||||||
</div>
|
</div>
|
||||||
{#if replyMentions.length > 0}
|
{#if replyMentions.length > 0}
|
||||||
<div class="text-white text-sm p-2 rounded-b border-t-0 border border-solid border-light bg-black">
|
<div class={`text-white text-sm p-2 rounded-b border-t-0 border border-solid border-${borderColor} bg-black`}>
|
||||||
<div class="inline-block border-r border-solid border-medium pl-1 pr-3 mr-2">
|
<div class="inline-block border-r border-solid border-medium pl-1 pr-3 mr-2">
|
||||||
<i class="fa fa-at" />
|
<i class="fa fa-at" />
|
||||||
</div>
|
</div>
|
||||||
@ -458,17 +458,21 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
{#if visibleNotes.length > 0 && depth > 0}
|
{#if visibleNotes.length > 0 && depth > 0}
|
||||||
<div class="ml-8 note-children" bind:this={childrenContainer}>
|
<div class="relative">
|
||||||
{#if !showEntire && note.replies.length > visibleNotes.length}
|
<div class={`absolute w-px bg-${borderColor} z-10 -mt-4 ml-4 h-0`} bind:this={border} />
|
||||||
<button class="ml-5 py-2 text-light cursor-pointer" on:click={onClick}>
|
<div class="ml-8 note-children relative flex flex-col gap-4" bind:this={childrenContainer}>
|
||||||
<i class="fa fa-up-down text-sm pr-2" />
|
{#if !showEntire && note.replies.length > visibleNotes.length}
|
||||||
Show {quantify(note.replies.length - visibleNotes.length, 'other reply', 'more replies')}
|
<button class="ml-5 py-2 text-light cursor-pointer" on:click={onClick}>
|
||||||
</button>
|
<i class="fa fa-up-down text-sm pr-2" />
|
||||||
{/if}
|
Show {quantify(note.replies.length - visibleNotes.length, 'other reply', 'more replies')}
|
||||||
{#each visibleNotes as r (r.id)}
|
</button>
|
||||||
<svelte:self showParent={false} note={r} depth={depth - 1} {invertColors} {anchorId} {showContext} />
|
{/if}
|
||||||
{/each}
|
{#each visibleNotes as r (r.id)}
|
||||||
|
<svelte:self showParent={false} note={r} depth={depth - 1} {invertColors} {anchorId} {showContext} />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
@ -55,10 +55,8 @@
|
|||||||
</Content>
|
</Content>
|
||||||
</div>
|
</div>
|
||||||
{:else if note.pubkey}
|
{:else if note.pubkey}
|
||||||
<div in:fly={{y: 20}}>
|
<div in:fly={{y: 20}} class="flex flex-col gap-4 p-4">
|
||||||
<Content>
|
<Note showContext invertColors depth={6} anchorId={note.id} note={asDisplayEvent(note)} />
|
||||||
<Note showContext invertColors depth={6} anchorId={note.id} note={asDisplayEvent(note)} />
|
|
||||||
</Content>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user