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

Updated AdminX Settings scrolling

Browse source 
refs. https://github.com/TryGhost/Team/issues/3150

The sidebar was `sticy` which meant that users had to scroll all the way down to see the bottom of the sidebar. This defeats the purpose of being able to quickly jump to a section.
This commit is contained in:
Peter Zimon 2023-05-23 11:30:38 +02:00
parent d28eef5f4f
commit 8e0e2c4f2c
2 changed files with 10 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ghost/admin-x-settings/src/App.tsx
View file

@ -1,3 +1,4 @@
import Button from './admin-x-ds/global/Button';
import Heading from './admin-x-ds/global/Heading';
import Settings from './components/Settings';
import Sidebar from './components/Sidebar';
@ -6,23 +7,21 @@ import {SettingsProvider} from './components/SettingsProvider';
function App() {
return (
<div className="admin-x-settings">
<button
className="fixed left-6 top-4 text-sm font-bold text-black"
type="button"
onClick={() => window.history.back()}
>
&larr; Done
</button>
<div className='fixed left-6 top-4'>
<Button label='&larr; Done' onClick={() => window.history.back()} />
</div>
{/* Main container */}
<div className="mx-auto flex max-w-[1080px] flex-col px-[5vmin] py-[12vmin] md:flex-row md:items-start md:gap-x-10 md:py-[8vmin]">
{/* Sidebar */}
<div className="relative min-w-[240px] grow-0 md:sticky md:top-[8vmin] md:basis-[240px]">
<Heading>Settings</Heading>
<div className="relative min-w-[240px] grow-0 md:fixed md:top-[8vmin] md:basis-[240px]">
<div className='h-[60px]'>
<Heading>Settings</Heading>
</div>
<Sidebar />
</div>
<div className="flex-auto pt-[3vmin] md:pt-[72px]">
<div className="flex-auto pt-[3vmin] md:ml-[280px] md:pt-[84px]">
<SettingsProvider>
<Settings />
</SettingsProvider>

2
ghost/admin-x-settings/src/components/Sidebar.tsx
View file

@ -4,7 +4,7 @@ import SettingNavSection from '../admin-x-ds/settings/SettingNavSection';
const Sidebar: React.FC = () => {
return (
<div className="mt-6 hidden md:!visible md:!block">
<div className="mt-6 hidden md:!visible md:!block md:h-[calc(100vh-8vmin-84px)] md:overflow-y-scroll">
<SettingNavSection title="General">
<SettingNavItem title="Title and description" />
<SettingNavItem title="Timezone" />