6691f0da26
refs. https://github.com/TryGhost/Product/issues/4060 The new settings screen is too dense, lacks hierarchy and hard to scan. This update addresses some of the problems of the initial version: - clear hierarchy in typography and larger spaces between sections to make the overall structure is easier to scan - using icons in the sidebar to strengthen the groups + help visual thinkers to remember settings better + just to be a bit less serious - updated colors for better contrast + orientation (bg on the sidebar) - updated input fields to help focus on filling forms - other small improvements for more consistency and simplicity --------- Co-authored-by: Jono Mingard <reason.koan@gmail.com> |
||
|---|---|---|
| .. | ||
| .storybook | ||
| src | ||
| test | ||
| .eslintrc.cjs | ||
| .yarnrc | ||
| index.html | ||
| node-shim.cjs | ||
| package.json | ||
| playwright.config.ts | ||
| postcss.config.cjs | ||
| README.md | ||
| tailwind.config.cjs | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
Admin X Settings
Ghost Admin Settings in React
Development
Pre-requisites
- Run
yarnin Ghost monorepo root
Running the development version
Run yarn dev to start the development server to test/develop the settings standalone. This will generate a demo site from the index.html file which renders the app and makes it available on http://localhost:5173
Running inside Admin
Run yarn dev (like you would run Ghost dev normally) from the top-level repo. AdminX will automatically rebuild when you make changes.
Develop
This is a monorepo package.
Follow the instructions for the top-level repo.
git clonethis repo &cdinto it as usual- Run
yarnto install top-level dependencies.
Test
yarn lintrun just eslintyarn test:acceptanceruns acceptance testsyarn test:unitruns unit testsyarn test:acceptance path/to/testruns a specific testyarn test:acceptance:slowmoruns acceptance tests in slow motion and headed mode, useful for debugging and developing tests