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

feat: add margins to pages#1217

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
presleyp merged 5 commits intomainfrommargins/presleyp/978
May 4, 2022
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletionssite/src/components/FullPageForm/FullPageForm.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
import React from "react"
import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
import { FormTitle } from "../FormTitle/FormTitle"
import { Margins } from "../Margins/Margins"

export interface FullPageFormProps {
title: string
Expand All@@ -11,7 +12,6 @@ export interface FullPageFormProps {

const useStyles = makeStyles(() => ({
root: {
maxWidth: "1380px",
width: "100%",
display: "flex",
flexDirection: "column",
Expand All@@ -23,10 +23,12 @@ export const FullPageForm: React.FC<FullPageFormProps> = ({ title, detail, onCan
const styles = useStyles()
return (
<main className={styles.root}>
<FormTitle title={title} detail={detail} />
<FormCloseButton onClose={onCancel} />
<Margins>
<FormTitle title={title} detail={detail} />
<FormCloseButton onClose={onCancel} />

{children}
{children}
</Margins>
</main>
)
}
6 changes: 4 additions & 2 deletionssite/src/components/Header/Header.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box"
import { makeStyles } from "@material-ui/core/styles"
import Typography from "@material-ui/core/Typography"
import React from "react"
import { maxWidth, sidePadding } from "../../theme/constants"
import { HeaderButton } from "../HeaderButton/HeaderButton"

export interface HeaderAction {
Expand DownExpand Up@@ -66,18 +67,19 @@ const useStyles = makeStyles((theme) => ({
position: "relative",
display: "flex",
alignItems: "center",
height:150,
height:126,
background: theme.palette.hero.main,
boxShadow: theme.shadows[3],
},
topInner: {
display: "flex",
alignItems: "center",
maxWidth: "1380px",
maxWidth,
margin: "0 auto",
flex: 1,
height: 68,
minWidth: 0,
padding: `0 ${sidePadding}`,
},
title: {
display: "flex",
Expand Down
16 changes: 16 additions & 0 deletionssite/src/components/Margins/Margins.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
import { ComponentMeta, Story } from "@storybook/react"
import React from "react"
import { Margins } from "./Margins"

export default {
title: "components/Margins",
component: Margins,
} as ComponentMeta<typeof Margins>

const Template: Story = (args) => (
<Margins {...args}>
<div style={{ width: "100%", background: "lightgrey" }}>Here is some content that will not get too wide!</div>
</Margins>
)

export const Example = Template.bind({})
21 changes: 21 additions & 0 deletionssite/src/components/Margins/Margins.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
import { makeStyles } from "@material-ui/core/styles"
import React from "react"
import { maxWidth, sidePadding } from "../../theme/constants"

const useStyles = makeStyles(() => ({
margins: {
margin: "0 auto",
maxWidth,
padding: `0 ${sidePadding}`,
flex: 1,
},
}))

export const Margins: React.FC = ({ children }) => {
const styles = useStyles()
return (
<div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Question: It's not clear to me why we need an outer<div> here - do you know what problem this solves?

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Yeah, I don't totally understand it, but the content gets horizontally squished without it. My guess is that it's needed as a buffer between the content andStack.

<div className={styles.margins}>{children}</div>
</div>
)
}
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box"
import React from "react"
import { Outlet } from "react-router-dom"
import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame"
import { Margins } from "../Margins/Margins"
import { TabPanel } from "../TabPanel/TabPanel"

export const Language = {
Expand All@@ -23,11 +24,11 @@ export const PreferencesLayout: React.FC = () => {
return (
<AuthAndFrame>
<Box display="flex" flexDirection="column">
<Box style={{ maxWidth: "1380px", margin: "1em auto" }}>
<Margins>
<TabPanel title={Language.preferencesLabel} menuItems={menuItems}>
<Outlet />
</TabPanel>
</Box>
</Margins>
</Box>
</AuthAndFrame>
)
Expand Down
3 changes: 2 additions & 1 deletionsite/src/forms/CreateTemplateForm.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ import { FormSection } from "../components/FormSection/FormSection"
import { FormTextField } from "../components/FormTextField/FormTextField"
import { FormTitle } from "../components/FormTitle/FormTitle"
import { LoadingButton } from "../components/LoadingButton/LoadingButton"
import { maxWidth } from "../theme/constants"

export interface CreateTemplateFormProps {
provisioners: Provisioner[]
Expand DownExpand Up@@ -121,7 +122,7 @@ export const CreateTemplateForm: React.FC<CreateTemplateFormProps> = ({

const useStyles = makeStyles(() => ({
root: {
maxWidth: "1380px",
maxWidth,
width: "100%",
display: "flex",
flexDirection: "column",
Expand Down
3 changes: 2 additions & 1 deletionsite/src/forms/CreateWorkspaceForm.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import { FormSection } from "../components/FormSection/FormSection"
import { FormTextField } from "../components/FormTextField/FormTextField"
import { FormTitle } from "../components/FormTitle/FormTitle"
import { LoadingButton } from "../components/LoadingButton/LoadingButton"
import { maxWidth } from "../theme/constants"

export interface CreateWorkspaceForm {
template: Template
Expand DownExpand Up@@ -82,7 +83,7 @@ export const CreateWorkspaceForm: React.FC<CreateWorkspaceForm> = ({ template, o

const useStyles = makeStyles(() => ({
root: {
maxWidth: "1380px",
maxWidth,
width: "100%",
display: "flex",
flexDirection: "column",
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
import Paper from "@material-ui/core/Paper"
import { makeStyles } from "@material-ui/core/styles"
import React from "react"
import { Link, useNavigate, useParams } from "react-router-dom"
import useSWR from "swr"
Expand All@@ -8,12 +6,13 @@ import { EmptyState } from "../../../../components/EmptyState/EmptyState"
import { ErrorSummary } from "../../../../components/ErrorSummary/ErrorSummary"
import { Header } from "../../../../components/Header/Header"
import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
import { Margins } from "../../../../components/Margins/Margins"
import { Stack } from "../../../../components/Stack/Stack"
import { Column, Table } from "../../../../components/Table/Table"
import { unsafeSWRArgument } from "../../../../util"
import { firstOrItem } from "../../../../util/array"

export const TemplatePage: React.FC = () => {
const styles = useStyles()
const navigate = useNavigate()
const { template: templateName, organization: organizationName } = useParams()

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

return (
<div className={styles.root}>
<Stack spacing={4}>
<Header
title={firstOrItem(templateName, "")}
description={firstOrItem(organizationName, "")}
Expand All@@ -93,25 +92,9 @@ export const TemplatePage: React.FC = () => {
}}
/>

<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
<Margins>
<Table {...tableProps} />
</Paper>
</div>
</Margins>
</Stack>
)
}

const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexDirection: "column",
},
header: {
display: "flex",
flexDirection: "row-reverse",
justifyContent: "space-between",
margin: "1em auto",
maxWidth: "1380px",
padding: theme.spacing(2, 6.25, 0),
width: "100%",
},
}))
15 changes: 6 additions & 9 deletionssite/src/pages/TemplatesPages/TemplatesPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
import Paper from "@material-ui/core/Paper"
import { makeStyles } from "@material-ui/core/styles"
import React from "react"
import { Link } from "react-router-dom"
Expand All@@ -9,6 +8,8 @@ import { EmptyState } from "../../components/EmptyState/EmptyState"
import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
import { Header } from "../../components/Header/Header"
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
import { Margins } from "../../components/Margins/Margins"
import { Stack } from "../../components/Stack/Stack"
import { Column, Table } from "../../components/Table/Table"

export const TemplatesPage: React.FC = () => {
Expand DownExpand Up@@ -68,20 +69,16 @@ export const TemplatesPage: React.FC = () => {
const subTitle = `${templates.length} total`

return (
<div className={styles.root}>
<Stack spacing={4}>
<Header title="Templates" subTitle={subTitle} />
<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
<Margins>
<Table {...tableProps} />
</Paper>
</div>
</Margins>
</Stack>
)
}

const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexDirection: "column",
},
descriptionLabel: {
marginBottom: theme.spacing(1),
},
Expand Down
19 changes: 11 additions & 8 deletionssite/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import React, { useContext } from "react"
import { useNavigate } from "react-router"
import { CreateUserRequest } from "../../../api/types"
import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"
import { Margins } from "../../../components/Margins/Margins"
import { selectOrgId } from "../../../xServices/auth/authSelectors"
import { XServiceContext } from "../../../xServices/StateContext"

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

return (
<CreateUserForm
formErrors={createUserFormErrors}
onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })}
onCancel={() => navigate("/users")}
isLoading={usersState.hasTag("loading")}
error={genericError}
myOrgId={myOrgId ?? ""}
/>
<Margins>
<CreateUserForm
formErrors={createUserFormErrors}
onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })}
onCancel={() => navigate("/users")}
isLoading={usersState.hasTag("loading")}
error={genericError}
myOrgId={myOrgId ?? ""}
/>
</Margins>
)
}
21 changes: 6 additions & 15 deletionssite/src/pages/UsersPage/UsersPageView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
import Paper from "@material-ui/core/Paper"
import { makeStyles } from "@material-ui/core/styles"
import React from "react"
import { UserResponse } from "../../api/types"
import { Header } from "../../components/Header/Header"
import { Margins } from "../../components/Margins/Margins"
import { Stack } from "../../components/Stack/Stack"
import { UsersTable } from "../../components/UsersTable/UsersTable"

export const Language = {
Expand All@@ -16,21 +16,12 @@ export interface UsersPageViewProps {
}

export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, openUserCreationDialog }) => {
const styles = useStyles()

return (
<div className={styles.flexColumn}>
<Stack spacing={4}>
<Header title={Language.pageTitle} action={{ text: Language.newUserButton, onClick: openUserCreationDialog }} />
<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
<Margins>
<UsersTable users={users} />
</Paper>
</div>
</Margins>
</Stack>
)
}

const useStyles = makeStyles(() => ({
flexColumn: {
display: "flex",
flexDirection: "column",
},
}))
24 changes: 6 additions & 18 deletionssite/src/pages/WorkspacesPage/WorkspacesPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/core/styles"
import React from "react"
import { useParams } from "react-router-dom"
import useSWR from "swr"
import * as Types from "../../api/types"
import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
import { Margins } from "../../components/Margins/Margins"
import { Stack } from "../../components/Stack/Stack"
import { Workspace } from "../../components/Workspace/Workspace"
import { unsafeSWRArgument } from "../../util"
import { firstOrItem } from "../../util/array"

export const WorkspacePage: React.FC = () => {
const styles = useStyles()
const { workspace: workspaceQueryParam } = useParams()

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

return (
<div className={styles.root}>
<div className={styles.inner}>
<Margins>
<Stack spacing={4}>
<Workspace organization={organization} template={template} workspace={workspace} />
</div>
</div>
</Stack>
</Margins>
)
}

const useStyles = makeStyles(() => ({
root: {
display: "flex",
flexDirection: "column",
},
inner: {
maxWidth: "1380px",
margin: "1em auto",
width: "100%",
},
}))
2 changes: 2 additions & 0 deletionssite/src/theme/constants.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,3 +7,5 @@ export const BODY_FONT_FAMILY = `"Inter", sans-serif`
export const lightButtonShadow = "0 2px 2px rgba(0, 23, 121, 0.08)"
export const emptyBoxShadow = "none"
export const navHeight = 56
export const maxWidth = 1380
export const sidePadding = "50px"
[8]ページ先頭
©2009-2025 Movatter.jp