Style: all - change page padding to 20px
This commit is contained in:
@@ -6,8 +6,9 @@
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev-host": "vite --host 0.0.0.0",
|
||||
"build": "vite build",
|
||||
"build": "vite build && npm run typecheck",
|
||||
"build-test": "vite build --mode testing",
|
||||
"typecheck": "tsc",
|
||||
"clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts",
|
||||
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"format": "prettier --write src/",
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
[data-component=system] {
|
||||
.root-content {
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
[data-component=system-settings] {
|
||||
.root-content {
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
|
||||
.root-col {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
[data-component=system-statistics] {
|
||||
.root-content {
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
[data-component=system-tools-base] {
|
||||
.root-content {
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
[data-component=system-tools-code] {
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
|
||||
.card-box {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
[data-component=system-tools-execute] {
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
|
||||
.card-box {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,22 +1,29 @@
|
||||
[data-component=tools-edit] {
|
||||
.root-content {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
|
||||
.card-box {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.draggable-mask {
|
||||
position: absolute;
|
||||
.root-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> * {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.draggable-mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.draggable-content {
|
||||
position: fixed;
|
||||
inset-inline-end: 32px;
|
||||
inset-inline-end: 48px;
|
||||
inset-block-end: 48px;
|
||||
|
||||
> * {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
[data-component=tools] {
|
||||
.root-content {
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
[data-component=tools-source] {
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
|
||||
.card-box {
|
||||
width: 100%;
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.root-content {
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
[data-component=tools-store-user] .root-content {
|
||||
padding: {
|
||||
top: 80px;
|
||||
left: 30px;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
};
|
||||
|
||||
.root-box {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
[data-component=tools-view] {
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
|
||||
.card-box {
|
||||
height: 100%;
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
[data-component=user] .root-content {
|
||||
padding: {
|
||||
top: 80px;
|
||||
left: 30px;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
};
|
||||
|
||||
.card-box {
|
||||
|
||||
@@ -634,7 +634,7 @@ const Group = () => {
|
||||
<>
|
||||
<FitFullscreen data-component={'system-group'}>
|
||||
<HideScrollbar
|
||||
style={{ padding: 30 }}
|
||||
style={{ padding: 20 }}
|
||||
isShowVerticalScrollbar
|
||||
autoHideWaitingTime={1000}
|
||||
>
|
||||
|
||||
@@ -285,7 +285,7 @@ const Log = () => {
|
||||
<>
|
||||
<FitFullscreen>
|
||||
<HideScrollbar
|
||||
style={{ padding: 30 }}
|
||||
style={{ padding: 20 }}
|
||||
isShowVerticalScrollbar
|
||||
autoHideWaitingTime={1000}
|
||||
>
|
||||
|
||||
@@ -641,7 +641,7 @@ const Role = () => {
|
||||
<>
|
||||
<FitFullscreen>
|
||||
<HideScrollbar
|
||||
style={{ padding: 30 }}
|
||||
style={{ padding: 20 }}
|
||||
isShowVerticalScrollbar
|
||||
autoHideWaitingTime={1000}
|
||||
>
|
||||
|
||||
@@ -286,7 +286,7 @@ const Category = () => {
|
||||
<>
|
||||
<FitFullscreen data-component={'system-tools-category'}>
|
||||
<HideScrollbar
|
||||
style={{ padding: 30 }}
|
||||
style={{ padding: 20 }}
|
||||
isShowVerticalScrollbar
|
||||
autoHideWaitingTime={1000}
|
||||
>
|
||||
|
||||
@@ -568,7 +568,7 @@ const Tools = () => {
|
||||
<>
|
||||
<FitFullscreen>
|
||||
<HideScrollbar
|
||||
style={{ padding: 30 }}
|
||||
style={{ padding: 20 }}
|
||||
isShowVerticalScrollbar
|
||||
autoHideWaitingTime={1000}
|
||||
>
|
||||
|
||||
@@ -1010,7 +1010,7 @@ const User = () => {
|
||||
<>
|
||||
<FitFullscreen>
|
||||
<HideScrollbar
|
||||
style={{ padding: 30 }}
|
||||
style={{ padding: 20 }}
|
||||
isShowVerticalScrollbar
|
||||
autoHideWaitingTime={1000}
|
||||
>
|
||||
|
||||
@@ -21,6 +21,7 @@ import Playground from '@/components/Playground'
|
||||
import FitFullscreen from '@/components/common/FitFullscreen'
|
||||
import FlexBox from '@/components/common/FlexBox'
|
||||
import LoadingMask from '@/components/common/LoadingMask'
|
||||
import Card from '@/components/common/Card'
|
||||
|
||||
const Edit = () => {
|
||||
const navigate = useNavigate()
|
||||
@@ -403,41 +404,43 @@ const Edit = () => {
|
||||
return (
|
||||
<>
|
||||
<FitFullscreen data-component={'tools-edit'}>
|
||||
<FlexBox direction={'horizontal'} className={'root-content'}>
|
||||
<LoadingMask hidden={!loading}>
|
||||
<Playground.CodeEditor
|
||||
tsconfig={tsconfig}
|
||||
files={{
|
||||
...files,
|
||||
[IMPORT_MAP_FILE_NAME]: {
|
||||
name: IMPORT_MAP_FILE_NAME,
|
||||
language: 'json',
|
||||
value: importMapRaw
|
||||
},
|
||||
[TS_CONFIG_FILE_NAME]: {
|
||||
name: TS_CONFIG_FILE_NAME,
|
||||
language: 'json',
|
||||
value: tsconfigRaw
|
||||
}
|
||||
}}
|
||||
notRemovable={[entryPoint]}
|
||||
selectedFileName={selectedFileName}
|
||||
onAddFile={(_, files) => setFiles(files)}
|
||||
onRemoveFile={(_, files) => setFiles(files)}
|
||||
onRenameFile={(_, __, files) => setFiles(files)}
|
||||
onChangeFileContent={handleOnChangeFileContent}
|
||||
onSelectedFileChange={setSelectedFileName}
|
||||
/>
|
||||
<Playground.Output
|
||||
files={files}
|
||||
selectedFileName={selectedFileName}
|
||||
importMap={importMap!}
|
||||
entryPoint={entryPoint}
|
||||
postExpansionCode={baseDist}
|
||||
/>
|
||||
</LoadingMask>
|
||||
{showDraggableMask && <div className={'draggable-mask'} />}
|
||||
</FlexBox>
|
||||
<Card>
|
||||
<FlexBox direction={'horizontal'} className={'root-content'}>
|
||||
<LoadingMask hidden={!loading}>
|
||||
<Playground.CodeEditor
|
||||
tsconfig={tsconfig}
|
||||
files={{
|
||||
...files,
|
||||
[IMPORT_MAP_FILE_NAME]: {
|
||||
name: IMPORT_MAP_FILE_NAME,
|
||||
language: 'json',
|
||||
value: importMapRaw
|
||||
},
|
||||
[TS_CONFIG_FILE_NAME]: {
|
||||
name: TS_CONFIG_FILE_NAME,
|
||||
language: 'json',
|
||||
value: tsconfigRaw
|
||||
}
|
||||
}}
|
||||
notRemovable={[entryPoint]}
|
||||
selectedFileName={selectedFileName}
|
||||
onAddFile={(_, files) => setFiles(files)}
|
||||
onRemoveFile={(_, files) => setFiles(files)}
|
||||
onRenameFile={(_, __, files) => setFiles(files)}
|
||||
onChangeFileContent={handleOnChangeFileContent}
|
||||
onSelectedFileChange={setSelectedFileName}
|
||||
/>
|
||||
<Playground.Output
|
||||
files={files}
|
||||
selectedFileName={selectedFileName}
|
||||
importMap={importMap!}
|
||||
entryPoint={entryPoint}
|
||||
postExpansionCode={baseDist}
|
||||
/>
|
||||
</LoadingMask>
|
||||
{showDraggableMask && <div className={'draggable-mask'} />}
|
||||
</FlexBox>
|
||||
</Card>
|
||||
<Draggable
|
||||
onStart={() => setShowDraggableMask(true)}
|
||||
onStop={() => setShowDraggableMask(false)}
|
||||
|
||||
Reference in New Issue
Block a user