mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Thread modifications
This commit is contained in:
parent
65a254c6d9
commit
9b5e8fea5c
@ -71,7 +71,7 @@
|
|||||||
.message {
|
.message {
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
font-size: 15px;
|
font-size: 16px;
|
||||||
font-weight: 400px;
|
font-weight: 400px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
@ -57,6 +57,10 @@
|
|||||||
max-width: 460px;
|
max-width: 460px;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.time{
|
.time{
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
@ -2,7 +2,7 @@ import { Component, createEffect, createSignal, Show } from 'solid-js';
|
|||||||
import { MenuItem, NostrRelaySignedEvent, PrimalNote } from '../../../types/primal';
|
import { MenuItem, NostrRelaySignedEvent, PrimalNote } from '../../../types/primal';
|
||||||
|
|
||||||
import styles from './NoteHeader.module.scss';
|
import styles from './NoteHeader.module.scss';
|
||||||
import { date } from '../../../lib/dates';
|
import { date, longDate, shortDate } from '../../../lib/dates';
|
||||||
import { nip05Verification, truncateNpub, userName } from '../../../stores/profile';
|
import { nip05Verification, truncateNpub, userName } from '../../../stores/profile';
|
||||||
import { useIntl } from '@cookbook/solid-intl';
|
import { useIntl } from '@cookbook/solid-intl';
|
||||||
import { useToastContext } from '../../Toaster/Toaster';
|
import { useToastContext } from '../../Toaster/Toaster';
|
||||||
@ -20,7 +20,12 @@ import ConfirmModal from '../../ConfirmModal/ConfirmModal';
|
|||||||
import { hexToNpub } from '../../../lib/keys';
|
import { hexToNpub } from '../../../lib/keys';
|
||||||
import { hookForDev } from '../../../lib/devTools';
|
import { hookForDev } from '../../../lib/devTools';
|
||||||
|
|
||||||
const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?: string }> = (props) => {
|
const NoteHeader: Component<{
|
||||||
|
note: PrimalNote,
|
||||||
|
openCustomZap?: () => void,
|
||||||
|
id?: string,
|
||||||
|
primary?: boolean,
|
||||||
|
}> = (props) => {
|
||||||
|
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const toaster = useToastContext();
|
const toaster = useToastContext();
|
||||||
@ -211,7 +216,7 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
|
|||||||
<div class={styles.postInfo}>
|
<div class={styles.postInfo}>
|
||||||
<div class={styles.userInfo}>
|
<div class={styles.userInfo}>
|
||||||
|
|
||||||
<span class={styles.userName}>
|
<span class={`${styles.userName} ${props.primary ? styles.primary : ''}`}>
|
||||||
{authorName()}
|
{authorName()}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
@ -224,7 +229,9 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
|
|||||||
class={styles.time}
|
class={styles.time}
|
||||||
title={date(props.note.post?.created_at).date.toLocaleString()}
|
title={date(props.note.post?.created_at).date.toLocaleString()}
|
||||||
>
|
>
|
||||||
{date(props.note.post?.created_at).label}
|
{props.primary ?
|
||||||
|
longDate(props.note.post?.created_at) :
|
||||||
|
date(props.note.post?.created_at).label}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Show
|
<Show
|
||||||
|
@ -12,7 +12,6 @@
|
|||||||
grid-area: content;
|
grid-area: content;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-top: 12px;
|
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
cursor: text;
|
cursor: text;
|
||||||
|
|
||||||
@ -22,9 +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: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 20px;
|
line-height: 24px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 17px;
|
margin-bottom: 17px;
|
||||||
|
|
||||||
|
@ -18,7 +18,7 @@ const NotePrimary: Component<{ note: PrimalNote, id?: string }> = (props) => {
|
|||||||
data-event-bech32={props.note.post.noteId}
|
data-event-bech32={props.note.post.noteId}
|
||||||
>
|
>
|
||||||
<div class={styles.border}></div>
|
<div class={styles.border}></div>
|
||||||
<NoteHeader note={props.note} />
|
<NoteHeader note={props.note} primary={true} />
|
||||||
<div class={styles.content}>
|
<div class={styles.content}>
|
||||||
|
|
||||||
<div class={styles.message}>
|
<div class={styles.message}>
|
||||||
|
@ -191,6 +191,11 @@ a {
|
|||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.noteimage {
|
||||||
|
margin-block: 12px !important;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
.imageGrid {
|
.imageGrid {
|
||||||
margin-block: 12px !important;
|
margin-block: 12px !important;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
@ -8,6 +8,16 @@ export const shortDate = (timestamp: number | undefined) => {
|
|||||||
return dtf.format(date);
|
return dtf.format(date);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const longDate = (timestamp: number | undefined) => {
|
||||||
|
if (!timestamp || timestamp < 0) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const date = new Date(timestamp * 1000);
|
||||||
|
const dtf = new Intl.DateTimeFormat('en-US', { dateStyle: 'full', timeStyle: 'short'});
|
||||||
|
|
||||||
|
return dtf.format(date);
|
||||||
|
};
|
||||||
|
|
||||||
export const date = (postTimestamp: number, style: Intl.RelativeTimeFormatStyle = 'short', since?: number) => {
|
export const date = (postTimestamp: number, style: Intl.RelativeTimeFormatStyle = 'short', since?: number) => {
|
||||||
const today = since ?? Math.floor((new Date()).getTime() / 1000);
|
const today = since ?? Math.floor((new Date()).getTime() / 1000);
|
||||||
const date = new Date(postTimestamp * 1000);
|
const date = new Date(postTimestamp * 1000);
|
||||||
|
Loading…
Reference in New Issue
Block a user