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 {
|
.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;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -49,7 +49,7 @@ const Note: Component<{
|
|||||||
id?: string,
|
id?: string,
|
||||||
parent?: boolean,
|
parent?: boolean,
|
||||||
shorten?: boolean,
|
shorten?: boolean,
|
||||||
noteType?: 'feed' | 'primary' | 'notification' | 'reaction'
|
noteType?: 'feed' | 'primary' | 'notification' | 'reaction' | 'thread'
|
||||||
onClick?: () => void,
|
onClick?: () => void,
|
||||||
quoteCount?: number,
|
quoteCount?: number,
|
||||||
}> = (props) => {
|
}> = (props) => {
|
||||||
@ -313,7 +313,7 @@ const Note: Component<{
|
|||||||
<div class={styles.content}>
|
<div class={styles.content}>
|
||||||
|
|
||||||
<div class={styles.message}>
|
<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>
|
</div>
|
||||||
|
|
||||||
<NoteTopZaps
|
<NoteTopZaps
|
||||||
@ -351,7 +351,6 @@ const Note: Component<{
|
|||||||
</Match>
|
</Match>
|
||||||
|
|
||||||
<Match when={noteType() === 'feed'}>
|
<Match when={noteType() === 'feed'}>
|
||||||
|
|
||||||
<A
|
<A
|
||||||
id={props.id}
|
id={props.id}
|
||||||
class={`${styles.note} ${props.parent ? styles.parent : ''}`}
|
class={`${styles.note} ${props.parent ? styles.parent : ''}`}
|
||||||
@ -360,6 +359,67 @@ const Note: Component<{
|
|||||||
data-event={props.note.post.id}
|
data-event={props.note.post.id}
|
||||||
data-event-bech32={props.note.post.noteId}
|
data-event-bech32={props.note.post.noteId}
|
||||||
draggable={false}
|
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}>
|
<div class={styles.header}>
|
||||||
<Show when={repost()}>
|
<Show when={repost()}>
|
||||||
|
@ -187,7 +187,12 @@ const NoteThread: Component<{ noteId: string }> = (props) => {
|
|||||||
<For each={parentNotes()}>
|
<For each={parentNotes()}>
|
||||||
{note =>
|
{note =>
|
||||||
<div>
|
<div>
|
||||||
<Note note={note} parent={true} shorten={true} />
|
<Note
|
||||||
|
note={note}
|
||||||
|
parent={true}
|
||||||
|
shorten={true}
|
||||||
|
noteType="thread"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</For>
|
</For>
|
||||||
@ -224,7 +229,11 @@ const NoteThread: Component<{ noteId: string }> = (props) => {
|
|||||||
<For each={replyNotes()}>
|
<For each={replyNotes()}>
|
||||||
{note =>
|
{note =>
|
||||||
<div>
|
<div>
|
||||||
<Note note={note} shorten={true} />
|
<Note
|
||||||
|
note={note}
|
||||||
|
shorten={true}
|
||||||
|
noteType="thread"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</For>
|
</For>
|
||||||
|
Loading…
Reference in New Issue
Block a user