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

Updated sticky footer component in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3354
This commit is contained in:
Peter Zimon 2023-06-07 13:04:38 +02:00
parent 6b444dabdc
commit 20eaff9e5c
2 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -87,35 +87,35 @@ const Modal: React.FC<ModalProps> = ({
modalClasses += ' max-w-[480px] ';
backdropClasses += ' p-[8vmin]';
padding = 'p-8';
footerContainerBottom = 'calc(-1 * 8vmin)';
footerContainerBottom = '-8vmin';
break;
case 'md':
modalClasses += ' max-w-[720px] ';
backdropClasses += ' p-[8vmin]';
padding = 'p-8';
footerContainerBottom = 'calc(-1 * 8vmin)';
footerContainerBottom = '-8vmin';
break;
case 'lg':
modalClasses += ' max-w-[1020px] ';
backdropClasses += ' p-[4vmin]';
padding = 'p-12';
footerContainerBottom = 'calc(-1 * 4vmin)';
footerContainerBottom = '-4vmin';
break;
case 'xl':
modalClasses += ' max-w-[1240px] ';
backdropClasses += ' p-[3vmin]';
padding = 'p-12';
footerContainerBottom = 'calc(-1 * 3vmin)';
footerContainerBottom = '-3vmin';
break;
case 'full':
modalClasses += ' h-full ';
backdropClasses += ' p-[2vmin]';
padding = 'p-12';
footerContainerBottom = 'calc(-1 * 2vmin)';
footerContainerBottom = '-2vmin';
break;
case 'bleed':
@ -125,7 +125,7 @@ const Modal: React.FC<ModalProps> = ({
default:
backdropClasses += ' p-[8vmin]';
footerContainerBottom = 'calc(-1 * 8vmin)';
footerContainerBottom = '-8vmin';
padding = 'p-8';
break;
}
@ -137,8 +137,6 @@ const Modal: React.FC<ModalProps> = ({
let footerClasses = clsx(
`${padding} ${stickyFooter ? 'py-6' : 'pt-0'}`,
'flex w-full items-center justify-between'
// `${padding} ${stickyFooter ? 'pt-8' : 'pt-0'} z-[101]`,
// stickyFooter && `sticky bottom-[-48px] rounded-b bg-white`
);
let contentClasses = `${padding} h-full`;

17
ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.tsx
View file

@ -11,15 +11,17 @@ interface StickyFooterProps {
}
const StickyFooter: React.FC<StickyFooterProps> = ({shiftY, bgTWColor = 'white', children, containerClasses, contentClasses}) => {
let footerContainerBottom = shiftY || '0';
const footerContainerBottom = shiftY ? `calc(${shiftY})` : '0';
const shadowBottom = shiftY ? `calc(${shiftY} + 72px)` : '72px';
let footerContainerClasses = clsx(
'w-100 sticky z-[100] mb-[-24px]',
`after:sticky after:bottom-[22px] after:mx-2 after:block after:h-[22px] after:rounded-full after:shadow-[0_0_0_1px_rgba(0,0,0,.025),0_-8px_16px_-3px_rgba(0,0,0,.08)] after:content-['']`,
const footerContainerClasses = clsx(
'w-100 sticky z-[100]',
containerClasses
);
let footerClasses = clsx(
const shadowClasses = `sticky bottom-[72px] mx-2 block h-[22px] rounded-full shadow-[0_0_0_1px_rgba(0,0,0,.025),0_-8px_16px_-3px_rgba(0,0,0,.08)]`;
const footerClasses = clsx(
`bg-${bgTWColor} sticky z-[101] mb-[-24px] flex min-h-[48px] items-center justify-between`,
contentClasses
);
@ -31,6 +33,11 @@ const StickyFooter: React.FC<StickyFooterProps> = ({shiftY, bgTWColor = 'white',
<div className={footerClasses}>
{children}
</div>
<div className={shadowClasses}
style={{
bottom: shadowBottom
}}
></div>
</div>
);
};