nostr/primal-web-app
1
0
Fork 0
mirror of https://github.com/PrimalHQ/primal-web-app.git synced 2024-09-30 00:41:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix new layout

Browse Source
This commit is contained in:
Bojan Mojsilovic 2024-05-29 14:45:08 +02:00
parent d152ac47d7
commit f7e59e4f9b
15 changed files with 149 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/BookmarkNote/BookmarkNote.module.scss
View File

@ -37,3 +37,14 @@
}
}
}
.right {
display: flex;
justify-content: flex-end;
padding-left: 6px !important;
padding-right: 0px !important;
&.rightL {
width: 22px !important;
}
}

3
src/components/BookmarkNote/BookmarkNote.tsx
View File

@ -16,7 +16,7 @@ import styles from './BookmarkNote.module.scss';
import { saveBookmarks } from '../../lib/localStore';
import { importEvents, triggerImportEvents } from '../../lib/notes';
const BookmarkNote: Component<{ note: PrimalNote, large?: boolean }> = (props) => {
const BookmarkNote: Component<{ note: PrimalNote, large?: boolean, right?: boolean }> = (props) => {
const account = useAccountContext();
const app = useAppContext();
const intl = useIntl();
@ -136,6 +136,7 @@ const BookmarkNote: Component<{ note: PrimalNote, large?: boolean }> = (props) =
return (
<div class={styles.bookmark}>
<ButtonGhost
class={`${props.right ? styles.right : ''} ${props.large ? styles.rightL : ''}`}
onClick={(e: MouseEvent) => {
e.preventDefault();

1
src/components/EmbeddedNote/EmbeddedNote.tsx
View File

@ -118,6 +118,7 @@ const EmbeddedNote: Component<{
shorten={true}
isEmbeded={true}
width={noteContent?.getBoundingClientRect().width}
margins={2}
/>
</div>
</>

3
src/components/FeedSelect/FeedSelect.tsx
View File

@ -8,7 +8,7 @@ import { FeedOption, PrimalFeed, SelectionOption } from '../../types/primal';
import SelectBox from '../SelectBox/SelectBox';
import SelectionBox from '../SelectionBox/SelectionBox';
const FeedSelect: Component<{ isPhone?: boolean, id?: string}> = (props) => {
const FeedSelect: Component<{ isPhone?: boolean, id?: string, big?: boolean}> = (props) => {
const account = useAccountContext();
const home = useHomeContext();
@ -123,6 +123,7 @@ const FeedSelect: Component<{ isPhone?: boolean, id?: string}> = (props) => {
value={selectedValue()}
isSelected={isSelected}
isPhone={props.isPhone}
big={props.big}
/>
);
}

2
src/components/HomeHeader/HomeHeader.module.scss
View File

@ -155,7 +155,7 @@
outline: none;
padding-block: 21px;
padding-inline: 12px;
padding-inline: 20px;
border: none;
border-radius: 0;
justify-content: flex-start;

2
src/components/HomeHeader/HomeHeader.tsx
View File

@ -119,7 +119,7 @@ const HomeHeader: Component< {
<Show
when={settings?.availableFeeds && settings?.availableFeeds.length > 0 && home?.selectedFeed}
>
<FeedSelect />
<FeedSelect big={true} />
</Show>
<Show

3
src/components/NavLink/NavLink.module.scss
View File

@ -115,10 +115,11 @@
display: flex;
justify-content: center;
align-items: center;
width: 18px;
min-width: 18px;
height: 18px;
margin-left: 2px;
margin-top: -8px;
font-family: 'Roboto Condensed';
font-weight: 500;

17
src/components/Note/Note.module.scss
View File

@ -3,7 +3,7 @@
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px;
padding: 12px 20px;
margin: 0px;
text-decoration: none;
@ -361,12 +361,16 @@
background-color: var(--background-card);
display: flex;
flex-direction: column;
padding-inline: 12px;
padding-inline: 0px;
padding-top: 0;
padding-bottom: 12px;
border-radius: 0;
border: none;
.header {
padding-inline: 12px;
}
.content {
grid-area: content;
display: flex;
@ -386,6 +390,7 @@
line-height: 24px;
width: 100%;
margin-bottom: 12px;
padding-inline: 12px;
a:hover {
text-decoration: underline;
@ -406,6 +411,7 @@
.time {
padding-block: 20px;
padding-inline: 12px;
border-bottom: 1px solid var(--devider);
margin-bottom: 16px;
color: var(--text-tertiary);
@ -445,6 +451,13 @@
}
}
.topZaps {
padding-inline: 12px;
}
.footer {
padding-inline: 12px;
}
}
}

66
src/components/Note/Note.tsx
View File

@ -285,6 +285,7 @@ const Note: Component<{
state={reactionsState}
updateState={updateReactionsState}
customZapInfo={customZapInfo()}
size="short"
/>
</div>
</div>
@ -301,7 +302,9 @@ const Note: Component<{
>
<div class={styles.border}></div>
<NoteHeader note={props.note} primary={true} />
<div class={styles.header}>
<NoteHeader note={props.note} primary={true} />
</div>
<div class={styles.upRightFloater}>
<NoteContextTrigger
@ -313,14 +316,20 @@ const Note: Component<{
<div class={styles.content}>
<div class={styles.message}>
<ParsedNote note={props.note} width={Math.min(640, window.innerWidth)} />
<ParsedNote
note={props.note}
width={Math.min(640, window.innerWidth)}
margins={12}
/>
</div>
<NoteTopZaps
topZaps={reactionsState.topZaps}
zapCount={reactionsState.zapCount}
action={() => openReactionModal('zaps')}
/>
<div class={styles.topZaps}>
<NoteTopZaps
topZaps={reactionsState.topZaps}
zapCount={reactionsState.zapCount}
action={() => openReactionModal('zaps')}
/>
</div>
<div
class={styles.time}
@ -337,15 +346,17 @@ const Note: Component<{
</button>
</div>
<NoteFooter
note={props.note}
state={reactionsState}
updateState={updateReactionsState}
customZapInfo={customZapInfo()}
wide={true}
large={true}
onZapAnim={addTopZap}
/>
<div class={styles.footer}>
<NoteFooter
note={props.note}
state={reactionsState}
updateState={updateReactionsState}
customZapInfo={customZapInfo()}
size="wide"
large={true}
onZapAnim={addTopZap}
/>
</div>
</div>
</div>
</Match>
@ -390,6 +401,7 @@ const Note: Component<{
note={props.note}
shorten={props.shorten}
width={Math.min(640, window.innerWidth - 72)}
margins={20}
/>
</div>
@ -406,7 +418,6 @@ const Note: Component<{
updateState={updateReactionsState}
customZapInfo={customZapInfo()}
onZapAnim={addTopZapFeed}
wide={true}
/>
</A>
</Match>
@ -457,7 +468,8 @@ const Note: Component<{
<ParsedNote
note={props.note}
shorten={props.shorten}
width={Math.min(528, window.innerWidth - 72)}
width={Math.min(566, window.innerWidth - 72)}
margins={1}
/>
</div>
@ -468,13 +480,16 @@ const Note: Component<{
topZapLimit={4}
/>
<NoteFooter
note={props.note}
state={reactionsState}
updateState={updateReactionsState}
customZapInfo={customZapInfo()}
onZapAnim={addTopZapFeed}
/>
<div class={styles.footer}>
<NoteFooter
note={props.note}
state={reactionsState}
updateState={updateReactionsState}
customZapInfo={customZapInfo()}
onZapAnim={addTopZapFeed}
size="short"
/>
</div>
</div>
</div>
</A>
@ -515,6 +530,7 @@ const Note: Component<{
note={props.note}
shorten={props.shorten}
width={Math.min(528, window.innerWidth - 72)}
margins={12}
noLightbox={true}
altEmbeds={true}
/>

30
src/components/Note/NoteFooter/NoteFooter.module.scss
View File

@ -55,12 +55,34 @@
.footer {
display: grid;
grid-template-columns: 125px 125px 125px 125px auto;
grid-template-columns: 145px 145px 145px 145px auto;
position: relative;
width: 100%;
.bookmarkFoot {
display: flex;
justify-content: flex-end;
max-width: 20px;
}
&.wide {
grid-template-columns: 137px 137px 137px 135px auto;
grid-template-columns: 148px 148px 148px 148px auto;
.bookmarkFoot {
display: flex;
justify-content: flex-end;
max-width: 100%;
}
}
&.short {
grid-template-columns: 126px 126px 126px 126px auto;
.bookmarkFoot {
display: flex;
justify-content: flex-end;
max-width: 100%;
}
}
.context {
@ -172,10 +194,6 @@
}
}
.bookmarkFoot {
display: flex;
justify-content: flex-end;
}
}
.largeZapLottie {

17
src/components/Note/NoteFooter/NoteFooter.tsx
View File

@ -27,7 +27,7 @@ export const lottieDuration = () => zapMD.op * 1_000 / zapMD.fr;
const NoteFooter: Component<{
note: PrimalNote,
wide?: boolean,
size?: 'wide' | 'normal' | 'short',
id?: string,
state: NoteReactionsState,
updateState: SetStoreFunction<NoteReactionsState>,
@ -48,6 +48,8 @@ const NoteFooter: Component<{
let footerDiv: HTMLDivElement | undefined;
let repostMenu: HTMLDivElement | undefined;
const size = () => props.size || 'normal';
const repostMenuItems: MenuItem[] = [
{
action: () => doRepost(),
@ -61,6 +63,7 @@ const NoteFooter: Component<{
},
];
const onClickOutside = (e: MouseEvent) => {
if (
!document?.getElementById(`repost_menu_${props.note.post.id}`)?.contains(e.target as Node)
@ -222,8 +225,8 @@ const NoteFooter: Component<{
return;
}
let newLeft = props.wide ? 15 : 13;
let newTop = props.wide ? -6 : -6;
let newLeft = size() === 'wide' ? 15 : 13;
let newTop = size() === 'wide' ? -6 : -6;
if (props.large) {
newLeft = 2;
@ -318,7 +321,12 @@ const NoteFooter: Component<{
}
return (
<div id={props.id} class={`${styles.footer} ${props.wide ? styles.wide : ''}`} ref={footerDiv} onClick={(e) => {e.preventDefault();}}>
<div
id={props.id}
class={`${styles.footer} ${styles[size()]}`}
ref={footerDiv}
onClick={(e) => e.preventDefault() }
>
<Show when={props.state.showZapAnim}>
<ZapAnimation
@ -395,6 +403,7 @@ const NoteFooter: Component<{
<BookmarkNote
note={props.note}
large={props.large}
right={true}
/>
</div>

6
src/components/ParsedNote/ParsedNote.tsx
View File

@ -147,6 +147,7 @@ const ParsedNote: Component<{
shorten?: boolean,
isEmbeded?: boolean,
width?: number,
margins?: number,
noLightbox?: boolean,
altEmbeds?: boolean,
}> = (props) => {
@ -619,9 +620,10 @@ const ParsedNote: Component<{
let w: number | undefined = undefined;
if (mVideo) {
const margins = props.margins || 20
const ratio = mVideo.w / mVideo.h;
h = (noteWidth() / ratio);
w = h > 680 ? 680 * ratio : noteWidth();
h = ((noteWidth() - 2*margins) / ratio);
w = h > 680 ? 680 * ratio : noteWidth() - 2*margins;
h = h > 680 ? 680 : h;
}

32
src/components/SelectionBox/SelectionBox.module.scss
View File

@ -9,6 +9,32 @@
}
.selectionIcon {
width: 10px;
height: 10px;
display: inline-block;
margin-inline: 4px;
background-color: var(--text-secondary);
-webkit-mask: url(../../assets/icons/caret.svg) no-repeat 0 0/ 10px 10px;
mask: url(../../assets/icons/caret.svg) no-repeat 0 0/ 10px 10px;
}
.selectionBox {
position: relative;
}
.trigger {
background-color: var(--background-site);
margin: 0;
padding: 0;
border: none;
color: var(--text-secondary);
font-size: 18px;
font-weight: 600;
line-height: 20px;
}
.selectionIconBig {
width: 14px;
height: 14px;
display: inline-block;
@ -18,11 +44,7 @@
mask: url(../../assets/icons/caret.svg) no-repeat 0 / 14px;
}
.selectionBox {
position: relative;
}
.trigger {
.triggerBig {
background-color: var(--background-site);
margin: 0;
padding: 0;

5
src/components/SelectionBox/SelectionBox.tsx
View File

@ -18,6 +18,7 @@ const SelectionBox: Component<{
options: SelectionOption[],
onChange: (option: any) => void,
initialValue?: string | SelectionOption,
big?: boolean,
value?: string | SelectionOption,
id?: string,
}> = (props) => {
@ -55,12 +56,12 @@ const SelectionBox: Component<{
onChange={props.onChange}
gutter={8}
>
<Select.Trigger class={styles.trigger}>
<Select.Trigger class={props.big ? styles.triggerBig : styles.trigger}>
<Select.Value<SelectionOption>>
{state => state.selectedOption()?.label || ''}
</Select.Value>
<Select.Icon>
<div class={styles.selectionIcon}></div>
<div class={props.big ? styles.selectionIconBig : styles.selectionIcon}></div>
</Select.Icon>
</Select.Trigger>
<Select.Content>

4
src/index.scss
View File

@ -62,10 +62,10 @@
--warning-color: #FA3C3C;
--success-color: #66E205;
--left-col-w: 188px;
--left-col-w: 182px;
--center-col-w: 640px;
--right-col-w: 348px;
--full-site-w: 1177px;
--full-site-w: 1172px;
--header-height: 84px;
background-color: var(--background-site);