OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed udpated banner z-index (#19822)

Browse Source 
refs.
https://linear.app/tryghost/issue/DES-168/z-index-is-really-messed-up-in-settings

The update banner's z-index was conflicting with settings.
This commit is contained in:
Peter Zimon 2024-03-07 14:46:48 +01:00 committed by GitHub
parent 57c5e24f5b
commit ad491ea4f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/admin-x-settings/src/MainContent.tsx
View File

@ -11,7 +11,7 @@ import {useRouting} from '@tryghost/admin-x-framework/routing';
const Page: React.FC<{children: ReactNode}> = ({children}) => {
return <>
<div className='sticky top-0 z-30 bg-white px-[5vmin] py-4 dark:bg-grey-975 tablet:fixed tablet:bg-transparent tablet:px-6 dark:tablet:bg-transparent xl:p-12'>
<div className='sticky top-0 z-30 bg-white px-[5vmin] py-4 dark:bg-grey-975 tablet:fixed tablet:bg-transparent tablet:px-6 dark:tablet:bg-transparent xl:p-12' id="done-button-container">
<ExitSettingsButton />
</div>
<div className="w-full dark:bg-grey-975 tablet:fixed tablet:left-0 tablet:top-0 tablet:flex tablet:h-full" id="admin-x-settings-content">
@ -53,7 +53,7 @@ const MainContent: React.FC = () => {
return (
<Page>
{loadingModal && <div className={`fixed inset-0 z-40 h-[calc(100vh-55px)] w-[100vw] tablet:h-[100vh] ${topLevelBackdropClasses}`} />}
<div className="no-scrollbar fixed inset-x-0 top-[52px] z-[999] flex-1 basis-[320px] bg-white px-8 pb-8 dark:bg-grey-975 tablet:relative tablet:inset-x-auto tablet:top-auto tablet:h-full tablet:overflow-y-scroll tablet:bg-grey-50 tablet:pb-0 dark:tablet:bg-black" id="admin-x-settings-sidebar-scroller">
<div className="no-scrollbar fixed inset-x-0 top-[52px] z-[35] flex-1 basis-[320px] bg-white px-8 pb-8 dark:bg-grey-975 tablet:relative tablet:inset-x-auto tablet:top-auto tablet:h-full tablet:overflow-y-scroll tablet:bg-grey-50 tablet:pb-0 dark:tablet:bg-black" id="admin-x-settings-sidebar-scroller">
<div className="relative w-full">
<Sidebar />
</div>

2
apps/admin-x-settings/src/components/ExitSettingsButton.tsx
View File

@ -9,7 +9,7 @@ const ExitSettingsButton: React.FC = () => {
};
return (
<Button data-testid="exit-settings" label='&larr; Done' link={true} onClick={() => confirmIfDirty(isDirty, navigateAway)} />
<Button data-testid="exit-settings" id="done-button" label='&larr; Done' link={true} onClick={() => confirmIfDirty(isDirty, navigateAway)} />
);
};

20
apps/admin-x-settings/src/styles/index.css
View File

@ -1 +1,21 @@
@import '@tryghost/admin-x-design-system/styles.css';
/* Only settings related overrides */
.gh-update-banner ~ * #admin-x-settings-content {
top: 48px;
}
.gh-update-banner ~ * #done-button-container {
top: 48px;
}
@media (max-width: 860px) {
.gh-update-banner ~ * #admin-x-settings-sidebar-scroller {
position: sticky;
margin-bottom: -60px;
}
.gh-update-banner ~ * #done-button-container {
top: 0;
}
}

1
ghost/admin/app/styles/components/notifications.css
View File

@ -332,6 +332,7 @@
background: var(--black);
color: #fff;
font-size: 1.45rem;
z-index: 30;
}
.gh-update-banner a {