mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-03 02:10:55 +00:00
New thread primary note styling
This commit is contained in:
parent
5a9a062b64
commit
c847f355b9
@ -198,7 +198,7 @@
|
||||
outline: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
@ -11,14 +11,11 @@
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: 128px 128px 128px 128px;
|
||||
grid-template-columns: 128px 128px 128px 128px 1fr;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.context {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: none;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@ -154,6 +151,7 @@
|
||||
|
||||
.stat{
|
||||
min-width: 0px;
|
||||
padding-right: 12px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 12px;
|
||||
margin-right: 8px;
|
||||
|
||||
>a {
|
||||
text-decoration: none;
|
||||
@ -28,11 +28,13 @@
|
||||
}
|
||||
.postInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
height: 48px;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
.verification {
|
||||
max-width: 470px;
|
||||
@ -57,12 +59,8 @@
|
||||
margin-right: 2px;
|
||||
}
|
||||
.time{
|
||||
margin: 0px 2px;
|
||||
margin: 0px;
|
||||
min-width: 80px;
|
||||
&::before {
|
||||
content: "|";
|
||||
padding: 0px 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.replyingTo {
|
||||
@ -128,6 +126,14 @@
|
||||
|
||||
}
|
||||
|
||||
.ellipsisIcon {
|
||||
width: 11px;
|
||||
height: 14px;
|
||||
background-color: var(--text-tertiary);
|
||||
-webkit-mask: url(../../../assets/icons/ellipsis.svg) no-repeat center;
|
||||
mask: url(../../../assets/icons/ellipsis.svg) no-repeat center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
.header {
|
||||
width: calc(100vw - 160px);
|
||||
|
@ -14,7 +14,7 @@ import PrimalMenu from '../../PrimalMenu/PrimalMenu';
|
||||
import CustomZap from '../../CustomZap/CustomZap';
|
||||
import { broadcastEvent, sendNote } from '../../../lib/notes';
|
||||
import { useAccountContext } from '../../../contexts/AccountContext';
|
||||
import { reportUser } from '../../../lib/profile';
|
||||
import { isAccountVerified, reportUser } from '../../../lib/profile';
|
||||
import { APP_ID } from '../../../App';
|
||||
import ConfirmModal from '../../ConfirmModal/ConfirmModal';
|
||||
import { hexToNpub } from '../../../lib/keys';
|
||||
@ -203,7 +203,7 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
|
||||
>
|
||||
<Avatar
|
||||
user={props.note?.user}
|
||||
size="sm"
|
||||
size="vs"
|
||||
highlightBorder={isVerifiedByPrimal()}
|
||||
/>
|
||||
</A>
|
||||
@ -215,8 +215,18 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
|
||||
{authorName()}
|
||||
</span>
|
||||
|
||||
<VerificationCheck user={props.note.user} />
|
||||
<VerificationCheck
|
||||
user={props.note.user}
|
||||
fallback={<div class={styles.ellipsisIcon}></div>}
|
||||
/>
|
||||
|
||||
<span
|
||||
class={styles.time}
|
||||
title={date(props.note.post?.created_at).date.toLocaleString()}
|
||||
>
|
||||
{date(props.note.post?.created_at).label}
|
||||
</span>
|
||||
</div>
|
||||
<Show
|
||||
when={props.note.user?.nip05}
|
||||
>
|
||||
@ -227,52 +237,10 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
|
||||
{nip05Verification(props.note.user)}
|
||||
</span>
|
||||
</Show>
|
||||
|
||||
<span
|
||||
class={styles.time}
|
||||
title={date(props.note.post?.created_at).date.toLocaleString()}
|
||||
>
|
||||
{date(props.note.post?.created_at).label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class={styles.contextMenu}>
|
||||
<button
|
||||
class={styles.contextButton}
|
||||
onClick={openContextMenu}
|
||||
>
|
||||
<div class={styles.contextIcon} ></div>
|
||||
</button>
|
||||
<PrimalMenu
|
||||
id={`note_context_${props.note.post.id}`}
|
||||
items={noteContext}
|
||||
hidden={!showContext()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ConfirmModal
|
||||
open={confirmReportUser()}
|
||||
description={intl.formatMessage(tActions.reportUserConfirm, { name: authorName() })}
|
||||
onConfirm={() => {
|
||||
doReportUser();
|
||||
setConfirmReportUser(false);
|
||||
}}
|
||||
onAbort={() => setConfirmReportUser(false)}
|
||||
/>
|
||||
|
||||
<ConfirmModal
|
||||
open={confirmMuteUser()}
|
||||
description={intl.formatMessage(tActions.muteUserConfirm, { name: authorName() })}
|
||||
onConfirm={() => {
|
||||
doMuteUser();
|
||||
setConfirmMuteUser(false);
|
||||
}}
|
||||
onAbort={() => setConfirmMuteUser(false)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -6,16 +6,14 @@
|
||||
padding: 12px;
|
||||
padding-top: 0;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--devider);
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border: none;
|
||||
|
||||
.content {
|
||||
grid-area: content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 21px;
|
||||
margin-left: 60px;
|
||||
margin-top: 12px;
|
||||
margin-left: 12px;
|
||||
|
||||
|
||||
.message {
|
||||
@ -23,8 +21,9 @@
|
||||
grid-area: message;
|
||||
color: var(--text-primary);
|
||||
word-break: break-word;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-size: 17px;
|
||||
font-weight: 300;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
margin-bottom: 17px;
|
||||
|
||||
|
@ -25,7 +25,7 @@ const NotePrimary: Component<{ note: PrimalNote, id?: string }> = (props) => {
|
||||
<ParsedNote note={props.note} />
|
||||
</div>
|
||||
|
||||
<NoteFooter note={props.note}/>
|
||||
<NoteFooter note={props.note} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
@ -1,6 +1,6 @@
|
||||
import styles from "./VerificationCheck.module.scss";
|
||||
|
||||
import { Component, createSignal, onMount, Show } from "solid-js";
|
||||
import { Component, createSignal, JSXElement, onMount, Show } from "solid-js";
|
||||
import { PrimalUser } from "../../types/primal";
|
||||
import { isAccountVerified } from "../../lib/profile";
|
||||
import { hookForDev } from "../../lib/devTools";
|
||||
@ -9,6 +9,7 @@ import { hookForDev } from "../../lib/devTools";
|
||||
const VerificationCheck: Component<{
|
||||
user: PrimalUser | undefined,
|
||||
large?: boolean,
|
||||
fallback?: JSXElement,
|
||||
id?: string,
|
||||
}> = (props) => {
|
||||
|
||||
@ -40,7 +41,7 @@ const VerificationCheck: Component<{
|
||||
return (
|
||||
<Show
|
||||
when={isVerified()}
|
||||
fallback={<div class={styles.verificationFailed}></div>}
|
||||
fallback={props.fallback}
|
||||
>
|
||||
<Show
|
||||
when={props.large}
|
||||
|
@ -212,6 +212,8 @@ export const fetchKnownProfiles: (vanityName: string) => Promise<VanityProfiles>
|
||||
};
|
||||
|
||||
export const isAccountVerified: (domain: string | undefined) => Promise<nip19.ProfilePointer | null> = async (domain: string | undefined) => {
|
||||
if (!domain) return null;
|
||||
|
||||
try {
|
||||
const profile = await nip05.queryProfile(domain);
|
||||
|
||||
|
@ -185,7 +185,7 @@ const Thread: Component = () => {
|
||||
|
||||
<Show when={primaryNote()}>
|
||||
<div id="primary_note">
|
||||
<Note
|
||||
<NotePrimary
|
||||
note={primaryNote() as PrimalNote}
|
||||
/>
|
||||
<Show when={account?.hasPublicKey()}>
|
||||
|
Loading…
Reference in New Issue
Block a user