discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Modal height fix on author page

Browse Source
This commit is contained in:
kvakazyambra 2023-09-07 01:50:54 +03:00
parent 404de31301
commit 490af4cbbb
3 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Author/AuthorCard/AuthorCard.tsx
View File

@ -339,7 +339,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
</div> </div>
<Show when={props.followers}> <Show when={props.followers}>
<Modal variant="wide" name="followers"> <Modal variant="wide" name="followers" maxHeight>
<> <>
<h2>{t('Followers')}</h2> <h2>{t('Followers')}</h2>
<div class={styles.listWrapper}> <div class={styles.listWrapper}>
@ -366,7 +366,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
</Show> </Show>
<Show when={props.subscriptions}> <Show when={props.subscriptions}>
<Modal variant="wide" name="subscriptions"> <Modal variant="wide" name="subscriptions" maxHeight>
<> <>
<h2>{t('Subscriptions')}</h2> <h2>{t('Subscriptions')}</h2>
<ul class="view-switcher"> <ul class="view-switcher">

6
src/components/Nav/Modal/Modal.module.scss
View File

@ -74,3 +74,9 @@
.noPadding { .noPadding {
padding: 0 2rem; padding: 0 2rem;
} }
.maxHeight {
display: flex;
flex-direction: column;
height: 90vh;
}

4
src/components/Nav/Modal/Modal.tsx
View File

@ -13,6 +13,7 @@ interface ModalProps {
children: JSX.Element children: JSX.Element
onClose?: () => void onClose?: () => void
noPadding?: boolean noPadding?: boolean
maxHeight?: boolean
} }
export const Modal = (props: ModalProps) => { export const Modal = (props: ModalProps) => {
@ -39,7 +40,8 @@ export const Modal = (props: ModalProps) => {
<div <div
class={clsx(styles.modal, { class={clsx(styles.modal, {
[styles.narrow]: props.variant === 'narrow', [styles.narrow]: props.variant === 'narrow',
[styles.noPadding]: props.noPadding [styles.noPadding]: props.noPadding,
[styles.maxHeight]: props.maxHeight
})} })}
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
> >