mirror of
https://github.com/coder/coder.git
synced 2025-07-12 00:14:10 +00:00
feat: make template pages responsive (#3232)
This commit is contained in:
@ -1,16 +0,0 @@
|
|||||||
import { makeStyles } from "@material-ui/core/styles"
|
|
||||||
import { FC } from "react"
|
|
||||||
|
|
||||||
export const TableContainer: FC = ({ children }) => {
|
|
||||||
const styles = useStyles()
|
|
||||||
|
|
||||||
return <div className={styles.wrapper}>{children}</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
|
||||||
wrapper: {
|
|
||||||
overflowX: "auto",
|
|
||||||
borderRadius: theme.shape.borderRadius,
|
|
||||||
border: `1px solid ${theme.palette.divider}`,
|
|
||||||
},
|
|
||||||
}))
|
|
@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
|
|||||||
import Table from "@material-ui/core/Table"
|
import Table from "@material-ui/core/Table"
|
||||||
import TableBody from "@material-ui/core/TableBody"
|
import TableBody from "@material-ui/core/TableBody"
|
||||||
import TableCell from "@material-ui/core/TableCell"
|
import TableCell from "@material-ui/core/TableCell"
|
||||||
|
import TableContainer from "@material-ui/core/TableContainer"
|
||||||
import TableHead from "@material-ui/core/TableHead"
|
import TableHead from "@material-ui/core/TableHead"
|
||||||
import TableRow from "@material-ui/core/TableRow"
|
import TableRow from "@material-ui/core/TableRow"
|
||||||
import { AvatarData } from "components/AvatarData/AvatarData"
|
import { AvatarData } from "components/AvatarData/AvatarData"
|
||||||
@ -26,7 +27,8 @@ export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({ resources }
|
|||||||
const styles = useStyles()
|
const styles = useStyles()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Table className={styles.table}>
|
<TableContainer className={styles.tableContainer}>
|
||||||
|
<Table>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableHeaderRow>
|
<TableHeaderRow>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
@ -90,6 +92,7 @@ export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({ resources }
|
|||||||
})}
|
})}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -98,7 +101,7 @@ const useStyles = makeStyles((theme) => ({
|
|||||||
margin: 0,
|
margin: 0,
|
||||||
},
|
},
|
||||||
|
|
||||||
table: {
|
tableContainer: {
|
||||||
border: 0,
|
border: 0,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import Table from "@material-ui/core/Table"
|
import Table from "@material-ui/core/Table"
|
||||||
import TableBody from "@material-ui/core/TableBody"
|
import TableBody from "@material-ui/core/TableBody"
|
||||||
import TableCell from "@material-ui/core/TableCell"
|
import TableCell from "@material-ui/core/TableCell"
|
||||||
|
import TableContainer from "@material-ui/core/TableContainer"
|
||||||
import TableHead from "@material-ui/core/TableHead"
|
import TableHead from "@material-ui/core/TableHead"
|
||||||
import TableRow from "@material-ui/core/TableRow"
|
import TableRow from "@material-ui/core/TableRow"
|
||||||
import { TableContainer } from "components/TableContainer/TableContainer"
|
|
||||||
import { FC } from "react"
|
import { FC } from "react"
|
||||||
import * as TypesGen from "../../api/typesGenerated"
|
import * as TypesGen from "../../api/typesGenerated"
|
||||||
import { UsersTableBody } from "./UsersTableBody"
|
import { UsersTableBody } from "./UsersTableBody"
|
||||||
|
@ -3,6 +3,7 @@ import { Theme } from "@material-ui/core/styles"
|
|||||||
import Table from "@material-ui/core/Table"
|
import Table from "@material-ui/core/Table"
|
||||||
import TableBody from "@material-ui/core/TableBody"
|
import TableBody from "@material-ui/core/TableBody"
|
||||||
import TableCell from "@material-ui/core/TableCell"
|
import TableCell from "@material-ui/core/TableCell"
|
||||||
|
import TableContainer from "@material-ui/core/TableContainer"
|
||||||
import TableHead from "@material-ui/core/TableHead"
|
import TableHead from "@material-ui/core/TableHead"
|
||||||
import TableRow from "@material-ui/core/TableRow"
|
import TableRow from "@material-ui/core/TableRow"
|
||||||
import useTheme from "@material-ui/styles/useTheme"
|
import useTheme from "@material-ui/styles/useTheme"
|
||||||
@ -27,6 +28,7 @@ export const VersionsTable: FC<VersionsTableProps> = ({ versions }) => {
|
|||||||
const theme: Theme = useTheme()
|
const theme: Theme = useTheme()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<TableContainer>
|
||||||
<Table data-testid="versions-table">
|
<Table data-testid="versions-table">
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
@ -70,5 +72,6 @@ export const VersionsTable: FC<VersionsTableProps> = ({ versions }) => {
|
|||||||
)}
|
)}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -26,6 +26,14 @@ AllStates.args = {
|
|||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const SmallViewport = Template.bind({})
|
||||||
|
SmallViewport.args = {
|
||||||
|
...AllStates.args,
|
||||||
|
}
|
||||||
|
SmallViewport.parameters = {
|
||||||
|
chromatic: { viewports: [600] },
|
||||||
|
}
|
||||||
|
|
||||||
export const EmptyCanCreate = Template.bind({})
|
export const EmptyCanCreate = Template.bind({})
|
||||||
EmptyCanCreate.args = {
|
EmptyCanCreate.args = {
|
||||||
canCreateTemplate: true,
|
canCreateTemplate: true,
|
||||||
|
@ -3,6 +3,7 @@ import { fade, makeStyles } from "@material-ui/core/styles"
|
|||||||
import Table from "@material-ui/core/Table"
|
import Table from "@material-ui/core/Table"
|
||||||
import TableBody from "@material-ui/core/TableBody"
|
import TableBody from "@material-ui/core/TableBody"
|
||||||
import TableCell from "@material-ui/core/TableCell"
|
import TableCell from "@material-ui/core/TableCell"
|
||||||
|
import TableContainer from "@material-ui/core/TableContainer"
|
||||||
import TableHead from "@material-ui/core/TableHead"
|
import TableHead from "@material-ui/core/TableHead"
|
||||||
import TableRow from "@material-ui/core/TableRow"
|
import TableRow from "@material-ui/core/TableRow"
|
||||||
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
|
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
|
||||||
@ -94,6 +95,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
|
|||||||
)}
|
)}
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
|
|
||||||
|
<TableContainer>
|
||||||
<Table>
|
<Table>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
@ -112,7 +114,9 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
|
|||||||
<EmptyState
|
<EmptyState
|
||||||
message={Language.emptyMessage}
|
message={Language.emptyMessage}
|
||||||
description={
|
description={
|
||||||
props.canCreateTemplate ? Language.emptyDescription : Language.emptyViewNoPerms
|
props.canCreateTemplate
|
||||||
|
? Language.emptyDescription
|
||||||
|
: Language.emptyViewNoPerms
|
||||||
}
|
}
|
||||||
descriptionClassName={styles.emptyDescription}
|
descriptionClassName={styles.emptyDescription}
|
||||||
cta={<CodeExample code="coder template init" />}
|
cta={<CodeExample code="coder template init" />}
|
||||||
@ -161,6 +165,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
|
|||||||
})}
|
})}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
</Margins>
|
</Margins>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -17,6 +17,14 @@ Admin.args = {
|
|||||||
canEditUsers: true,
|
canEditUsers: true,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const SmallViewport = Template.bind({})
|
||||||
|
SmallViewport.args = {
|
||||||
|
...Admin.args,
|
||||||
|
}
|
||||||
|
SmallViewport.parameters = {
|
||||||
|
chromatic: { viewports: [600] },
|
||||||
|
}
|
||||||
|
|
||||||
export const Member = Template.bind({})
|
export const Member = Template.bind({})
|
||||||
Member.args = { ...Admin.args, canCreateUser: false, canEditUsers: false }
|
Member.args = { ...Admin.args, canCreateUser: false, canEditUsers: false }
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user