Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Fixed modal padding bug

Browse source 
refs. https://github.com/TryGhost/Team/issues/3351
This commit is contained in:
Peter Zimon 2023-06-06 15:07:20 +02:00
parent c08723b7aa
commit 2fc3336dd2
1 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
View file

@ -75,7 +75,7 @@ const Modal: React.FC<ModalProps> = ({
let modalClasses = clsx('relative z-50 mx-auto flex w-full flex-col justify-between rounded bg-white shadow-xl'); let modalClasses = clsx('relative z-50 mx-auto flex w-full flex-col justify-between rounded bg-white shadow-xl');
let backdropClasses = clsx('fixed inset-0 z-40 h-[100vh] w-[100vw] overflow-y-scroll '); let backdropClasses = clsx('fixed inset-0 z-40 h-[100vh] w-[100vw] overflow-y-scroll ');
let padding; let padding = '';
let footerContainerBottom = ''; let footerContainerBottom = '';
@ -83,52 +83,52 @@ const Modal: React.FC<ModalProps> = ({
case 'sm': case 'sm':
modalClasses += ' max-w-[480px] '; modalClasses += ' max-w-[480px] ';
backdropClasses += ' p-[8vmin]'; backdropClasses += ' p-[8vmin]';
padding = 8; padding = 'p-8';
footerContainerBottom = 'calc(-1 * (8vmin + 48px)'; footerContainerBottom = 'calc(-1 * (8vmin + 48px)';
break; break;
case 'md': case 'md':
modalClasses += ' max-w-[720px] '; modalClasses += ' max-w-[720px] ';
backdropClasses += ' p-[8vmin]'; backdropClasses += ' p-[8vmin]';
padding = 8; padding = 'p-8';
footerContainerBottom = 'calc(-1 * (8vmin + 48px)'; footerContainerBottom = 'calc(-1 * (8vmin + 48px)';
break; break;
case 'lg': case 'lg':
modalClasses += ' max-w-[1020px] '; modalClasses += ' max-w-[1020px] ';
backdropClasses += ' p-[4vmin]'; backdropClasses += ' p-[4vmin]';
padding = 12; padding = 'p-12';
footerContainerBottom = 'calc(-1 * (4vmin + 68px)'; footerContainerBottom = 'calc(-1 * (4vmin + 68px)';
break; break;
case 'xl': case 'xl':
modalClasses += ' max-w-[1240px] '; modalClasses += ' max-w-[1240px] ';
backdropClasses += ' p-[3vmin]'; backdropClasses += ' p-[3vmin]';
padding = 14; padding = 'p-12';
footerContainerBottom = 'calc(-1 * (3vmin + 68px)'; footerContainerBottom = 'calc(-1 * (3vmin + 68px)';
break; break;
case 'full': case 'full':
modalClasses += ' h-full '; modalClasses += ' h-full ';
backdropClasses += ' p-[2vmin]'; backdropClasses += ' p-[2vmin]';
padding = 12; padding = 'p-12';
footerContainerBottom = 'calc(-1 * (2vmin + 68px)'; footerContainerBottom = 'calc(-1 * (2vmin + 68px)';
break; break;
case 'bleed': case 'bleed':
modalClasses += ' h-full '; modalClasses += ' h-full ';
padding = 12; padding = 'p-12';
break; break;
default: default:
backdropClasses += ' p-[8vmin]'; backdropClasses += ' p-[8vmin]';
footerContainerBottom = 'calc(-1 * (8vmin + 48px)'; footerContainerBottom = 'calc(-1 * (8vmin + 48px)';
padding = 8; padding = 'p-8';
break; break;
} }
if (noPadding) { if (noPadding) {
padding = 0; padding = 'p-0';
} }
let footerContainerClasses = clsx( let footerContainerClasses = clsx(
@ -139,11 +139,11 @@ const Modal: React.FC<ModalProps> = ({
); );
let footerClasses = clsx( let footerClasses = clsx(
`px-${padding} pb-${padding} ${stickyFooter && `pt-8`} z-[101] flex items-center justify-between`, `${padding} ${stickyFooter ? 'pt-8' : 'pt-0'} z-[101] flex items-center justify-between`,
stickyFooter && `sticky bottom-[-48px] rounded-b bg-white` stickyFooter && `sticky bottom-[-48px] rounded-b bg-white`
); );
let contentClasses = `p-${padding}`; let contentClasses = `${padding}`;
if (!customFooter) { if (!customFooter) {
contentClasses += ' pb-0 '; contentClasses += ' pb-0 ';