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;
|
outline: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@ -11,14 +11,11 @@
|
|||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 128px 128px 128px 128px;
|
grid-template-columns: 128px 128px 128px 128px 1fr;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.context {
|
.context {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
background: none;
|
background: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
@ -154,6 +151,7 @@
|
|||||||
|
|
||||||
.stat{
|
.stat{
|
||||||
min-width: 0px;
|
min-width: 0px;
|
||||||
|
padding-right: 12px;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
margin-right: 12px;
|
margin-right: 8px;
|
||||||
|
|
||||||
>a {
|
>a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -28,11 +28,13 @@
|
|||||||
}
|
}
|
||||||
.postInfo {
|
.postInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
justify-content: space-around;
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
.verification {
|
.verification {
|
||||||
max-width: 470px;
|
max-width: 470px;
|
||||||
@ -57,12 +59,8 @@
|
|||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
.time{
|
.time{
|
||||||
margin: 0px 2px;
|
margin: 0px;
|
||||||
min-width: 80px;
|
min-width: 80px;
|
||||||
&::before {
|
|
||||||
content: "|";
|
|
||||||
padding: 0px 2px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.replyingTo {
|
.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) {
|
@media only screen and (max-width: 720px) {
|
||||||
.header {
|
.header {
|
||||||
width: calc(100vw - 160px);
|
width: calc(100vw - 160px);
|
||||||
|
@ -14,7 +14,7 @@ import PrimalMenu from '../../PrimalMenu/PrimalMenu';
|
|||||||
import CustomZap from '../../CustomZap/CustomZap';
|
import CustomZap from '../../CustomZap/CustomZap';
|
||||||
import { broadcastEvent, sendNote } from '../../../lib/notes';
|
import { broadcastEvent, sendNote } from '../../../lib/notes';
|
||||||
import { useAccountContext } from '../../../contexts/AccountContext';
|
import { useAccountContext } from '../../../contexts/AccountContext';
|
||||||
import { reportUser } from '../../../lib/profile';
|
import { isAccountVerified, reportUser } from '../../../lib/profile';
|
||||||
import { APP_ID } from '../../../App';
|
import { APP_ID } from '../../../App';
|
||||||
import ConfirmModal from '../../ConfirmModal/ConfirmModal';
|
import ConfirmModal from '../../ConfirmModal/ConfirmModal';
|
||||||
import { hexToNpub } from '../../../lib/keys';
|
import { hexToNpub } from '../../../lib/keys';
|
||||||
@ -203,7 +203,7 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
|
|||||||
>
|
>
|
||||||
<Avatar
|
<Avatar
|
||||||
user={props.note?.user}
|
user={props.note?.user}
|
||||||
size="sm"
|
size="vs"
|
||||||
highlightBorder={isVerifiedByPrimal()}
|
highlightBorder={isVerifiedByPrimal()}
|
||||||
/>
|
/>
|
||||||
</A>
|
</A>
|
||||||
@ -215,8 +215,18 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
|
|||||||
{authorName()}
|
{authorName()}
|
||||||
</span>
|
</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
|
<Show
|
||||||
when={props.note.user?.nip05}
|
when={props.note.user?.nip05}
|
||||||
>
|
>
|
||||||
@ -227,52 +237,10 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
|
|||||||
{nip05Verification(props.note.user)}
|
{nip05Verification(props.note.user)}
|
||||||
</span>
|
</span>
|
||||||
</Show>
|
</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>
|
||||||
</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: 12px;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: 1px solid var(--devider);
|
border: none;
|
||||||
border-top: none;
|
|
||||||
border-bottom: none;
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
grid-area: content;
|
grid-area: content;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-top: 21px;
|
margin-top: 12px;
|
||||||
margin-left: 60px;
|
margin-left: 12px;
|
||||||
|
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
@ -23,8 +21,9 @@
|
|||||||
grid-area: message;
|
grid-area: message;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
font-size: 16px;
|
font-size: 17px;
|
||||||
line-height: 24px;
|
font-weight: 300;
|
||||||
|
line-height: 20px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 17px;
|
margin-bottom: 17px;
|
||||||
|
|
||||||
|
@ -25,7 +25,7 @@ const NotePrimary: Component<{ note: PrimalNote, id?: string }> = (props) => {
|
|||||||
<ParsedNote note={props.note} />
|
<ParsedNote note={props.note} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<NoteFooter note={props.note}/>
|
<NoteFooter note={props.note} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import styles from "./VerificationCheck.module.scss";
|
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 { PrimalUser } from "../../types/primal";
|
||||||
import { isAccountVerified } from "../../lib/profile";
|
import { isAccountVerified } from "../../lib/profile";
|
||||||
import { hookForDev } from "../../lib/devTools";
|
import { hookForDev } from "../../lib/devTools";
|
||||||
@ -9,6 +9,7 @@ import { hookForDev } from "../../lib/devTools";
|
|||||||
const VerificationCheck: Component<{
|
const VerificationCheck: Component<{
|
||||||
user: PrimalUser | undefined,
|
user: PrimalUser | undefined,
|
||||||
large?: boolean,
|
large?: boolean,
|
||||||
|
fallback?: JSXElement,
|
||||||
id?: string,
|
id?: string,
|
||||||
}> = (props) => {
|
}> = (props) => {
|
||||||
|
|
||||||
@ -40,7 +41,7 @@ const VerificationCheck: Component<{
|
|||||||
return (
|
return (
|
||||||
<Show
|
<Show
|
||||||
when={isVerified()}
|
when={isVerified()}
|
||||||
fallback={<div class={styles.verificationFailed}></div>}
|
fallback={props.fallback}
|
||||||
>
|
>
|
||||||
<Show
|
<Show
|
||||||
when={props.large}
|
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) => {
|
export const isAccountVerified: (domain: string | undefined) => Promise<nip19.ProfilePointer | null> = async (domain: string | undefined) => {
|
||||||
|
if (!domain) return null;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const profile = await nip05.queryProfile(domain);
|
const profile = await nip05.queryProfile(domain);
|
||||||
|
|
||||||
|
@ -185,7 +185,7 @@ const Thread: Component = () => {
|
|||||||
|
|
||||||
<Show when={primaryNote()}>
|
<Show when={primaryNote()}>
|
||||||
<div id="primary_note">
|
<div id="primary_note">
|
||||||
<Note
|
<NotePrimary
|
||||||
note={primaryNote() as PrimalNote}
|
note={primaryNote() as PrimalNote}
|
||||||
/>
|
/>
|
||||||
<Show when={account?.hasPublicKey()}>
|
<Show when={account?.hasPublicKey()}>
|
||||||
|
Loading…
Reference in New Issue
Block a user