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

Further fix primary not display

Browse Source
This commit is contained in:
Bojan Mojsilovic 2024-01-15 17:23:48 +01:00
parent d739f45abb
commit 21bbb42e9a
5 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,10 +11,14 @@
.footer { .footer {
display: grid; display: grid;
grid-template-columns: 128px 128px 128px 128px 1fr; grid-template-columns: 128px 128px 128px 128px 16px;
position: relative; position: relative;
width: 100%; width: 100%;
&.wide {
grid-template-columns: 140px 140px 140px 138px 16px;
}
.context { .context {
background: none; background: none;
display: flex; display: flex;
@ -33,6 +37,7 @@
background-color: unset; background-color: unset;
width: fit-content; width: fit-content;
position: relative; position: relative;
padding-right: 48px;
.likeType { .likeType {
@include typeDiv; @include typeDiv;

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

@ -20,7 +20,7 @@ import NoteContextMenu from '../NoteContextMenu';
import { getScreenCordinates } from '../../../utils'; import { getScreenCordinates } from '../../../utils';
import ZapAnimation from '../../ZapAnimation/ZapAnimation'; import ZapAnimation from '../../ZapAnimation/ZapAnimation';
const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => { const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> = (props) => {
const account = useAccountContext(); const account = useAccountContext();
const toast = useToastContext(); const toast = useToastContext();
@ -220,8 +220,8 @@ const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
return; return;
} }
const newLeft = 24; const newLeft = props.wide ? 36 : 24;
const newTop = -35; const newTop = props.wide ? -28 : -28;
medZapAnimation.style.left = `${newLeft}px`; medZapAnimation.style.left = `${newLeft}px`;
medZapAnimation.style.top = `${newTop}px`; medZapAnimation.style.top = `${newTop}px`;
@ -298,7 +298,6 @@ const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
onTouchStart={opts.onTouchStart ?? (() => {})} onTouchStart={opts.onTouchStart ?? (() => {})}
onTouchEnd={opts.onTouchEnd ?? (() => {})} onTouchEnd={opts.onTouchEnd ?? (() => {})}
disabled={opts.disabled} disabled={opts.disabled}
title={opts.title || ''}
> >
<div class={`${buttonTypeClasses[opts.type]}`}> <div class={`${buttonTypeClasses[opts.type]}`}>
<div <div
@ -334,7 +333,7 @@ const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
} }
return ( return (
<div id={props.id} class={styles.footer} ref={footerDiv}> <div id={props.id} class={`${styles.footer} ${props.wide ? styles.wide : ''}`} ref={footerDiv}>
<Show when={showZapAnim()}> <Show when={showZapAnim()}>
<ZapAnimation <ZapAnimation

4
src/components/Note/NotePrimary/NotePrimary.tsx
View File

@ -22,10 +22,10 @@ const NotePrimary: Component<{ note: PrimalNote, id?: string }> = (props) => {
<div class={styles.content}> <div class={styles.content}>
<div class={styles.message}> <div class={styles.message}>
<ParsedNote note={props.note} /> <ParsedNote note={props.note} width={574} />
</div> </div>
<NoteFooter note={props.note} /> <NoteFooter note={props.note} wide={true} />
</div> </div>
</div> </div>
) )

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

@ -49,7 +49,7 @@ const NoteImage: Component<{
// if (!img || ratio() <= 1.2) return 'auto'; // if (!img || ratio() <= 1.2) return 'auto';
// // width of the note over the ratio of the preview image // // width of the note over the ratio of the preview image
// const h = 524 / ratio(); // const h = props.width || 524 / ratio();
// return `${h}px`; // return `${h}px`;
// }; // };
@ -73,7 +73,7 @@ const NoteImage: Component<{
}; };
const willBeTooBig = () => { const willBeTooBig = () => {
const maxW = 524; const maxW = props.width || 524;
const h = maxW / ratio(); const h = maxW / ratio();
@ -119,7 +119,7 @@ const NoteImage: Component<{
src={src()} src={src()}
class={klass()} class={klass()}
onerror={props.onError} onerror={props.onError}
width={willBeTooBig() ? undefined : '524px'} width={willBeTooBig() ? undefined : `${props.width || 524}px`}
/> />
</a> </a>
</Show> </Show>

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

@ -133,6 +133,7 @@ const ParsedNote: Component<{
noPreviews?: boolean, noPreviews?: boolean,
shorten?: boolean, shorten?: boolean,
isEmbeded?: boolean, isEmbeded?: boolean,
width?: number,
}> = (props) => { }> = (props) => {
const intl = useIntl(); const intl = useIntl();
@ -146,6 +147,8 @@ const ParsedNote: Component<{
return `note_${props.note.post.noteId}`; return `note_${props.note.post.noteId}`;
} }
const noteWidth = () => props.width || 514;
let thisNote: HTMLDivElement | undefined; let thisNote: HTMLDivElement | undefined;
const lightbox = new PhotoSwipeLightbox({ const lightbox = new PhotoSwipeLightbox({
@ -409,7 +412,7 @@ const ParsedNote: Component<{
src={url} src={url}
isDev={dev} isDev={dev}
media={image} media={image}
width={514} width={noteWidth()}
imageGroup={imageGroup} imageGroup={imageGroup}
shortHeight={props.shorten} shortHeight={props.shorten}
/> />
@ -455,8 +458,8 @@ const ParsedNote: Component<{
if (mVideo) { if (mVideo) {
const ratio = mVideo.w / mVideo.h; const ratio = mVideo.w / mVideo.h;
h = (524 / ratio); h = (noteWidth() / ratio);
w = h > 680 ? 680 * ratio : 524; w = h > 680 ? 680 * ratio : noteWidth();
h = h > 680 ? 680 : h; h = h > 680 ? 680 : h;
} }