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 {
|
.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;
|
||||||
|
@ -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
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user