mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-03 02:10:55 +00:00
Further fix primary not display
This commit is contained in:
parent
d739f45abb
commit
21bbb42e9a
@ -11,10 +11,14 @@
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: 128px 128px 128px 128px 1fr;
|
||||
grid-template-columns: 128px 128px 128px 128px 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&.wide {
|
||||
grid-template-columns: 140px 140px 140px 138px 16px;
|
||||
}
|
||||
|
||||
.context {
|
||||
background: none;
|
||||
display: flex;
|
||||
@ -33,6 +37,7 @@
|
||||
background-color: unset;
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
padding-right: 48px;
|
||||
|
||||
.likeType {
|
||||
@include typeDiv;
|
||||
|
@ -20,7 +20,7 @@ import NoteContextMenu from '../NoteContextMenu';
|
||||
import { getScreenCordinates } from '../../../utils';
|
||||
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 toast = useToastContext();
|
||||
@ -220,8 +220,8 @@ const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
|
||||
return;
|
||||
}
|
||||
|
||||
const newLeft = 24;
|
||||
const newTop = -35;
|
||||
const newLeft = props.wide ? 36 : 24;
|
||||
const newTop = props.wide ? -28 : -28;
|
||||
|
||||
medZapAnimation.style.left = `${newLeft}px`;
|
||||
medZapAnimation.style.top = `${newTop}px`;
|
||||
@ -298,7 +298,6 @@ const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
|
||||
onTouchStart={opts.onTouchStart ?? (() => {})}
|
||||
onTouchEnd={opts.onTouchEnd ?? (() => {})}
|
||||
disabled={opts.disabled}
|
||||
title={opts.title || ''}
|
||||
>
|
||||
<div class={`${buttonTypeClasses[opts.type]}`}>
|
||||
<div
|
||||
@ -334,7 +333,7 @@ const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
|
||||
}
|
||||
|
||||
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()}>
|
||||
<ZapAnimation
|
||||
|
@ -22,10 +22,10 @@ const NotePrimary: Component<{ note: PrimalNote, id?: string }> = (props) => {
|
||||
<div class={styles.content}>
|
||||
|
||||
<div class={styles.message}>
|
||||
<ParsedNote note={props.note} />
|
||||
<ParsedNote note={props.note} width={574} />
|
||||
</div>
|
||||
|
||||
<NoteFooter note={props.note} />
|
||||
<NoteFooter note={props.note} wide={true} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
@ -49,7 +49,7 @@ const NoteImage: Component<{
|
||||
// if (!img || ratio() <= 1.2) return 'auto';
|
||||
|
||||
// // width of the note over the ratio of the preview image
|
||||
// const h = 524 / ratio();
|
||||
// const h = props.width || 524 / ratio();
|
||||
|
||||
// return `${h}px`;
|
||||
// };
|
||||
@ -73,7 +73,7 @@ const NoteImage: Component<{
|
||||
};
|
||||
|
||||
const willBeTooBig = () => {
|
||||
const maxW = 524;
|
||||
const maxW = props.width || 524;
|
||||
|
||||
const h = maxW / ratio();
|
||||
|
||||
@ -119,7 +119,7 @@ const NoteImage: Component<{
|
||||
src={src()}
|
||||
class={klass()}
|
||||
onerror={props.onError}
|
||||
width={willBeTooBig() ? undefined : '524px'}
|
||||
width={willBeTooBig() ? undefined : `${props.width || 524}px`}
|
||||
/>
|
||||
</a>
|
||||
</Show>
|
||||
|
@ -133,6 +133,7 @@ const ParsedNote: Component<{
|
||||
noPreviews?: boolean,
|
||||
shorten?: boolean,
|
||||
isEmbeded?: boolean,
|
||||
width?: number,
|
||||
}> = (props) => {
|
||||
|
||||
const intl = useIntl();
|
||||
@ -146,6 +147,8 @@ const ParsedNote: Component<{
|
||||
return `note_${props.note.post.noteId}`;
|
||||
}
|
||||
|
||||
const noteWidth = () => props.width || 514;
|
||||
|
||||
let thisNote: HTMLDivElement | undefined;
|
||||
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
@ -409,7 +412,7 @@ const ParsedNote: Component<{
|
||||
src={url}
|
||||
isDev={dev}
|
||||
media={image}
|
||||
width={514}
|
||||
width={noteWidth()}
|
||||
imageGroup={imageGroup}
|
||||
shortHeight={props.shorten}
|
||||
/>
|
||||
@ -455,8 +458,8 @@ const ParsedNote: Component<{
|
||||
|
||||
if (mVideo) {
|
||||
const ratio = mVideo.w / mVideo.h;
|
||||
h = (524 / ratio);
|
||||
w = h > 680 ? 680 * ratio : 524;
|
||||
h = (noteWidth() / ratio);
|
||||
w = h > 680 ? 680 * ratio : noteWidth();
|
||||
h = h > 680 ? 680 : h;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user