mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-09-30 00:41:09 +00:00
New feed note layout
This commit is contained in:
parent
f9b790ac58
commit
77494df791
@ -1,4 +1,115 @@
|
||||
.note {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
margin: 0px;
|
||||
|
||||
text-decoration: none;
|
||||
color: unset;
|
||||
background-color: var(--background-site);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--devider);
|
||||
border-radius: 0;
|
||||
|
||||
-webkit-user-select: text;
|
||||
-moz-select: text;
|
||||
-ms-select: text;
|
||||
user-select: text;
|
||||
|
||||
width: 100%;
|
||||
|
||||
&.parent {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.reactionNote {
|
||||
background: none;
|
||||
border-bottom: 1px solid var(--subtile-devider);
|
||||
}
|
||||
|
||||
.userHeader {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.repostedBy {
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
>span {
|
||||
>a {
|
||||
margin-inline: 5px;
|
||||
color: var(--text-tertiary);
|
||||
text-decoration: none;
|
||||
}
|
||||
color: var(--text-tertiary);
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
font-weight: 400;
|
||||
>span {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
color: var(--text-primary);
|
||||
word-break: break-word;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 12px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.replyingTo {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
margin-top: 6px;
|
||||
max-width: 518px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.label {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
a {
|
||||
max-width: 440px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.author {
|
||||
display: inline-block;
|
||||
color: var(--accent-links);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noteThread {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -49,7 +49,7 @@ const Note: Component<{
|
||||
id?: string,
|
||||
parent?: boolean,
|
||||
shorten?: boolean,
|
||||
noteType?: 'feed' | 'primary' | 'notification' | 'reaction'
|
||||
noteType?: 'feed' | 'primary' | 'notification' | 'reaction' | 'thread'
|
||||
onClick?: () => void,
|
||||
quoteCount?: number,
|
||||
}> = (props) => {
|
||||
@ -313,7 +313,7 @@ const Note: Component<{
|
||||
<div class={styles.content}>
|
||||
|
||||
<div class={styles.message}>
|
||||
<ParsedNote note={props.note} width={Math.min(574, window.innerWidth)} />
|
||||
<ParsedNote note={props.note} width={Math.min(640, window.innerWidth)} />
|
||||
</div>
|
||||
|
||||
<NoteTopZaps
|
||||
@ -351,7 +351,6 @@ const Note: Component<{
|
||||
</Match>
|
||||
|
||||
<Match when={noteType() === 'feed'}>
|
||||
|
||||
<A
|
||||
id={props.id}
|
||||
class={`${styles.note} ${props.parent ? styles.parent : ''}`}
|
||||
@ -360,6 +359,67 @@ const Note: Component<{
|
||||
data-event={props.note.post.id}
|
||||
data-event-bech32={props.note.post.noteId}
|
||||
draggable={false}
|
||||
>
|
||||
<div class={styles.header}>
|
||||
<Show when={repost()}>
|
||||
<NoteRepostHeader note={props.note} />
|
||||
</Show>
|
||||
</div>
|
||||
<div class={styles.userHeader}>
|
||||
<A href={`/p/${props.note.user.npub}`}>
|
||||
<Avatar user={props.note.user} size="vs" />
|
||||
</A>
|
||||
|
||||
<NoteAuthorInfo
|
||||
author={props.note.user}
|
||||
time={props.note.post.created_at}
|
||||
/>
|
||||
|
||||
<div class={styles.upRightFloater}>
|
||||
<NoteContextTrigger
|
||||
ref={noteContextMenu}
|
||||
onClick={onContextMenuTrigger}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NoteReplyToHeader note={props.note} />
|
||||
|
||||
<div class={styles.message}>
|
||||
<ParsedNote
|
||||
note={props.note}
|
||||
shorten={props.shorten}
|
||||
width={Math.min(640, window.innerWidth - 72)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<NoteTopZapsCompact
|
||||
note={props.note}
|
||||
action={() => openReactionModal('zaps')}
|
||||
topZaps={reactionsState.topZapsFeed}
|
||||
topZapLimit={4}
|
||||
/>
|
||||
|
||||
<NoteFooter
|
||||
note={props.note}
|
||||
state={reactionsState}
|
||||
updateState={updateReactionsState}
|
||||
customZapInfo={customZapInfo()}
|
||||
onZapAnim={addTopZapFeed}
|
||||
wide={true}
|
||||
/>
|
||||
</A>
|
||||
</Match>
|
||||
|
||||
<Match when={noteType() === 'thread'}>
|
||||
<A
|
||||
id={props.id}
|
||||
class={`${styles.noteThread} ${props.parent ? styles.parent : ''}`}
|
||||
href={`/e/${props.note?.post.noteId}`}
|
||||
onClick={() => navToThread(props.note)}
|
||||
data-event={props.note.post.id}
|
||||
data-event-bech32={props.note.post.noteId}
|
||||
draggable={false}
|
||||
>
|
||||
<div class={styles.header}>
|
||||
<Show when={repost()}>
|
||||
|
@ -187,7 +187,12 @@ const NoteThread: Component<{ noteId: string }> = (props) => {
|
||||
<For each={parentNotes()}>
|
||||
{note =>
|
||||
<div>
|
||||
<Note note={note} parent={true} shorten={true} />
|
||||
<Note
|
||||
note={note}
|
||||
parent={true}
|
||||
shorten={true}
|
||||
noteType="thread"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</For>
|
||||
@ -224,7 +229,11 @@ const NoteThread: Component<{ noteId: string }> = (props) => {
|
||||
<For each={replyNotes()}>
|
||||
{note =>
|
||||
<div>
|
||||
<Note note={note} shorten={true} />
|
||||
<Note
|
||||
note={note}
|
||||
shorten={true}
|
||||
noteType="thread"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</For>
|
||||
|
Loading…
Reference in New Issue
Block a user