Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit34b91fd

Browse files
authored
feat: add margins to pages (#1217)
* Add Margin, use constants* Change throughout* Add to a page, lint* Format
1 parent4c35b81 commit34b91fd

File tree

13 files changed

+91
-83
lines changed

13 files changed

+91
-83
lines changed

‎site/src/components/FullPageForm/FullPageForm.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
22
importReactfrom"react"
33
import{FormCloseButton}from"../FormCloseButton/FormCloseButton"
44
import{FormTitle}from"../FormTitle/FormTitle"
5+
import{Margins}from"../Margins/Margins"
56

67
exportinterfaceFullPageFormProps{
78
title:string
@@ -11,7 +12,6 @@ export interface FullPageFormProps {
1112

1213
constuseStyles=makeStyles(()=>({
1314
root:{
14-
maxWidth:"1380px",
1515
width:"100%",
1616
display:"flex",
1717
flexDirection:"column",
@@ -23,10 +23,12 @@ export const FullPageForm: React.FC<FullPageFormProps> = ({ title, detail, onCan
2323
conststyles=useStyles()
2424
return(
2525
<mainclassName={styles.root}>
26-
<FormTitletitle={title}detail={detail}/>
27-
<FormCloseButtononClose={onCancel}/>
26+
<Margins>
27+
<FormTitletitle={title}detail={detail}/>
28+
<FormCloseButtononClose={onCancel}/>
2829

29-
{children}
30+
{children}
31+
</Margins>
3032
</main>
3133
)
3234
}

‎site/src/components/Header/Header.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box"
22
import{makeStyles}from"@material-ui/core/styles"
33
importTypographyfrom"@material-ui/core/Typography"
44
importReactfrom"react"
5+
import{maxWidth,sidePadding}from"../../theme/constants"
56
import{HeaderButton}from"../HeaderButton/HeaderButton"
67

78
exportinterfaceHeaderAction{
@@ -66,18 +67,19 @@ const useStyles = makeStyles((theme) => ({
6667
position:"relative",
6768
display:"flex",
6869
alignItems:"center",
69-
height:150,
70+
height:126,
7071
background:theme.palette.hero.main,
7172
boxShadow:theme.shadows[3],
7273
},
7374
topInner:{
7475
display:"flex",
7576
alignItems:"center",
76-
maxWidth:"1380px",
77+
maxWidth,
7778
margin:"0 auto",
7879
flex:1,
7980
height:68,
8081
minWidth:0,
82+
padding:`0${sidePadding}`,
8183
},
8284
title:{
8385
display:"flex",
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import{ComponentMeta,Story}from"@storybook/react"
2+
importReactfrom"react"
3+
import{Margins}from"./Margins"
4+
5+
exportdefault{
6+
title:"components/Margins",
7+
component:Margins,
8+
}asComponentMeta<typeofMargins>
9+
10+
constTemplate:Story=(args)=>(
11+
<Margins{...args}>
12+
<divstyle={{width:"100%",background:"lightgrey"}}>Here is some content that will not get too wide!</div>
13+
</Margins>
14+
)
15+
16+
exportconstExample=Template.bind({})
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import{makeStyles}from"@material-ui/core/styles"
2+
importReactfrom"react"
3+
import{maxWidth,sidePadding}from"../../theme/constants"
4+
5+
constuseStyles=makeStyles(()=>({
6+
margins:{
7+
margin:"0 auto",
8+
maxWidth,
9+
padding:`0${sidePadding}`,
10+
flex:1,
11+
},
12+
}))
13+
14+
exportconstMargins:React.FC=({ children})=>{
15+
conststyles=useStyles()
16+
return(
17+
<div>
18+
<divclassName={styles.margins}>{children}</div>
19+
</div>
20+
)
21+
}

‎site/src/components/PreferencesLayout/PreferencesLayout.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box"
22
importReactfrom"react"
33
import{Outlet}from"react-router-dom"
44
import{AuthAndFrame}from"../AuthAndFrame/AuthAndFrame"
5+
import{Margins}from"../Margins/Margins"
56
import{TabPanel}from"../TabPanel/TabPanel"
67

78
exportconstLanguage={
@@ -23,11 +24,11 @@ export const PreferencesLayout: React.FC = () => {
2324
return(
2425
<AuthAndFrame>
2526
<Boxdisplay="flex"flexDirection="column">
26-
<Boxstyle={{maxWidth:"1380px",margin:"1em auto"}}>
27+
<Margins>
2728
<TabPaneltitle={Language.preferencesLabel}menuItems={menuItems}>
2829
<Outlet/>
2930
</TabPanel>
30-
</Box>
31+
</Margins>
3132
</Box>
3233
</AuthAndFrame>
3334
)

‎site/src/forms/CreateTemplateForm.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { FormSection } from "../components/FormSection/FormSection"
1010
import{FormTextField}from"../components/FormTextField/FormTextField"
1111
import{FormTitle}from"../components/FormTitle/FormTitle"
1212
import{LoadingButton}from"../components/LoadingButton/LoadingButton"
13+
import{maxWidth}from"../theme/constants"
1314

1415
exportinterfaceCreateTemplateFormProps{
1516
provisioners:Provisioner[]
@@ -121,7 +122,7 @@ export const CreateTemplateForm: React.FC<CreateTemplateFormProps> = ({
121122

122123
constuseStyles=makeStyles(()=>({
123124
root:{
124-
maxWidth:"1380px",
125+
maxWidth,
125126
width:"100%",
126127
display:"flex",
127128
flexDirection:"column",

‎site/src/forms/CreateWorkspaceForm.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { FormSection } from "../components/FormSection/FormSection"
99
import{FormTextField}from"../components/FormTextField/FormTextField"
1010
import{FormTitle}from"../components/FormTitle/FormTitle"
1111
import{LoadingButton}from"../components/LoadingButton/LoadingButton"
12+
import{maxWidth}from"../theme/constants"
1213

1314
exportinterfaceCreateWorkspaceForm{
1415
template:Template
@@ -82,7 +83,7 @@ export const CreateWorkspaceForm: React.FC<CreateWorkspaceForm> = ({ template, o
8283

8384
constuseStyles=makeStyles(()=>({
8485
root:{
85-
maxWidth:"1380px",
86+
maxWidth,
8687
width:"100%",
8788
display:"flex",
8889
flexDirection:"column",

‎site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
importPaperfrom"@material-ui/core/Paper"
2-
import{makeStyles}from"@material-ui/core/styles"
31
importReactfrom"react"
42
import{Link,useNavigate,useParams}from"react-router-dom"
53
importuseSWRfrom"swr"
@@ -8,12 +6,13 @@ import { EmptyState } from "../../../../components/EmptyState/EmptyState"
86
import{ErrorSummary}from"../../../../components/ErrorSummary/ErrorSummary"
97
import{Header}from"../../../../components/Header/Header"
108
import{FullScreenLoader}from"../../../../components/Loader/FullScreenLoader"
9+
import{Margins}from"../../../../components/Margins/Margins"
10+
import{Stack}from"../../../../components/Stack/Stack"
1111
import{Column,Table}from"../../../../components/Table/Table"
1212
import{unsafeSWRArgument}from"../../../../util"
1313
import{firstOrItem}from"../../../../util/array"
1414

1515
exportconstTemplatePage:React.FC=()=>{
16-
conststyles=useStyles()
1716
constnavigate=useNavigate()
1817
const{template:templateName,organization:organizationName}=useParams()
1918

@@ -82,7 +81,7 @@ export const TemplatePage: React.FC = () => {
8281
}
8382

8483
return(
85-
<divclassName={styles.root}>
84+
<Stackspacing={4}>
8685
<Header
8786
title={firstOrItem(templateName,"")}
8887
description={firstOrItem(organizationName,"")}
@@ -93,25 +92,9 @@ export const TemplatePage: React.FC = () => {
9392
}}
9493
/>
9594

96-
<Paperstyle={{maxWidth:"1380px",margin:"1em auto",width:"100%"}}>
95+
<Margins>
9796
<Table{...tableProps}/>
98-
</Paper>
99-
</div>
97+
</Margins>
98+
</Stack>
10099
)
101100
}
102-
103-
constuseStyles=makeStyles((theme)=>({
104-
root:{
105-
display:"flex",
106-
flexDirection:"column",
107-
},
108-
header:{
109-
display:"flex",
110-
flexDirection:"row-reverse",
111-
justifyContent:"space-between",
112-
margin:"1em auto",
113-
maxWidth:"1380px",
114-
padding:theme.spacing(2,6.25,0),
115-
width:"100%",
116-
},
117-
}))

‎site/src/pages/TemplatesPages/TemplatesPage.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
importPaperfrom"@material-ui/core/Paper"
21
import{makeStyles}from"@material-ui/core/styles"
32
importReactfrom"react"
43
import{Link}from"react-router-dom"
@@ -9,6 +8,8 @@ import { EmptyState } from "../../components/EmptyState/EmptyState"
98
import{ErrorSummary}from"../../components/ErrorSummary/ErrorSummary"
109
import{Header}from"../../components/Header/Header"
1110
import{FullScreenLoader}from"../../components/Loader/FullScreenLoader"
11+
import{Margins}from"../../components/Margins/Margins"
12+
import{Stack}from"../../components/Stack/Stack"
1213
import{Column,Table}from"../../components/Table/Table"
1314

1415
exportconstTemplatesPage:React.FC=()=>{
@@ -68,20 +69,16 @@ export const TemplatesPage: React.FC = () => {
6869
constsubTitle=`${templates.length} total`
6970

7071
return(
71-
<divclassName={styles.root}>
72+
<Stackspacing={4}>
7273
<Headertitle="Templates"subTitle={subTitle}/>
73-
<Paperstyle={{maxWidth:"1380px",margin:"1em auto",width:"100%"}}>
74+
<Margins>
7475
<Table{...tableProps}/>
75-
</Paper>
76-
</div>
76+
</Margins>
77+
</Stack>
7778
)
7879
}
7980

8081
constuseStyles=makeStyles((theme)=>({
81-
root:{
82-
display:"flex",
83-
flexDirection:"column",
84-
},
8582
descriptionLabel:{
8683
marginBottom:theme.spacing(1),
8784
},

‎site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { useContext } from "react"
33
import{useNavigate}from"react-router"
44
import{CreateUserRequest}from"../../../api/types"
55
import{CreateUserForm}from"../../../components/CreateUserForm/CreateUserForm"
6+
import{Margins}from"../../../components/Margins/Margins"
67
import{selectOrgId}from"../../../xServices/auth/authSelectors"
78
import{XServiceContext}from"../../../xServices/StateContext"
89

@@ -21,13 +22,15 @@ export const CreateUserPage: React.FC = () => {
2122
createUserError||createUserFormErrors?.organization_id||!myOrgId ?Language.unknownError :undefined
2223

2324
return(
24-
<CreateUserForm
25-
formErrors={createUserFormErrors}
26-
onSubmit={(user:CreateUserRequest)=>usersSend({type:"CREATE", user})}
27-
onCancel={()=>navigate("/users")}
28-
isLoading={usersState.hasTag("loading")}
29-
error={genericError}
30-
myOrgId={myOrgId??""}
31-
/>
25+
<Margins>
26+
<CreateUserForm
27+
formErrors={createUserFormErrors}
28+
onSubmit={(user:CreateUserRequest)=>usersSend({type:"CREATE", user})}
29+
onCancel={()=>navigate("/users")}
30+
isLoading={usersState.hasTag("loading")}
31+
error={genericError}
32+
myOrgId={myOrgId??""}
33+
/>
34+
</Margins>
3235
)
3336
}
Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
importPaperfrom"@material-ui/core/Paper"
2-
import{makeStyles}from"@material-ui/core/styles"
31
importReactfrom"react"
42
import{UserResponse}from"../../api/types"
53
import{Header}from"../../components/Header/Header"
4+
import{Margins}from"../../components/Margins/Margins"
5+
import{Stack}from"../../components/Stack/Stack"
66
import{UsersTable}from"../../components/UsersTable/UsersTable"
77

88
exportconstLanguage={
@@ -16,21 +16,12 @@ export interface UsersPageViewProps {
1616
}
1717

1818
exportconstUsersPageView:React.FC<UsersPageViewProps>=({ users, openUserCreationDialog})=>{
19-
conststyles=useStyles()
20-
2119
return(
22-
<divclassName={styles.flexColumn}>
20+
<Stackspacing={4}>
2321
<Headertitle={Language.pageTitle}action={{text:Language.newUserButton,onClick:openUserCreationDialog}}/>
24-
<Paperstyle={{maxWidth:"1380px",margin:"1em auto",width:"100%"}}>
22+
<Margins>
2523
<UsersTableusers={users}/>
26-
</Paper>
27-
</div>
24+
</Margins>
25+
</Stack>
2826
)
2927
}
30-
31-
constuseStyles=makeStyles(()=>({
32-
flexColumn:{
33-
display:"flex",
34-
flexDirection:"column",
35-
},
36-
}))

‎site/src/pages/WorkspacesPage/WorkspacesPage.tsx

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import{makeStyles}from"@material-ui/core/styles"
21
importReactfrom"react"
32
import{useParams}from"react-router-dom"
43
importuseSWRfrom"swr"
54
import*asTypesfrom"../../api/types"
65
import{ErrorSummary}from"../../components/ErrorSummary/ErrorSummary"
76
import{FullScreenLoader}from"../../components/Loader/FullScreenLoader"
7+
import{Margins}from"../../components/Margins/Margins"
8+
import{Stack}from"../../components/Stack/Stack"
89
import{Workspace}from"../../components/Workspace/Workspace"
910
import{unsafeSWRArgument}from"../../util"
1011
import{firstOrItem}from"../../util/array"
1112

1213
exportconstWorkspacePage:React.FC=()=>{
13-
conststyles=useStyles()
1414
const{workspace:workspaceQueryParam}=useParams()
1515

1616
const{data:workspace,error:workspaceError}=useSWR<Types.Workspace,Error>(()=>{
@@ -45,22 +45,10 @@ export const WorkspacePage: React.FC = () => {
4545
}
4646

4747
return(
48-
<divclassName={styles.root}>
49-
<divclassName={styles.inner}>
48+
<Margins>
49+
<Stackspacing={4}>
5050
<Workspaceorganization={organization}template={template}workspace={workspace}/>
51-
</div>
52-
</div>
51+
</Stack>
52+
</Margins>
5353
)
5454
}
55-
56-
constuseStyles=makeStyles(()=>({
57-
root:{
58-
display:"flex",
59-
flexDirection:"column",
60-
},
61-
inner:{
62-
maxWidth:"1380px",
63-
margin:"1em auto",
64-
width:"100%",
65-
},
66-
}))

‎site/src/theme/constants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,5 @@ export const BODY_FONT_FAMILY = `"Inter", sans-serif`
77
exportconstlightButtonShadow="0 2px 2px rgba(0, 23, 121, 0.08)"
88
exportconstemptyBoxShadow="none"
99
exportconstnavHeight=56
10+
exportconstmaxWidth=1380
11+
exportconstsidePadding="50px"

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp