Skip to content

Commit

Permalink
Changed layout in product list, added Card for better contrast in dar…
Browse files Browse the repository at this point in the history 
…k mode
  • Loading branch information
@glaubervila
glaubervila committed Jul 14, 2023
1 parent 2b109d5 commit 6f6cf19
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 95 deletions.
96 changes: 49 additions & 47 deletions frontend/pages/oficial_products.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import * as React from 'react'
import { Paper, Box, Button } from '@mui/material'
import { Box, Button, Card, CardContent, Paper } from '@mui/material'
import FormControl from '@mui/material/FormControl'
import Grid from '@mui/material/Grid'
import Divider from '@mui/material/Divider'
import Typography from '@mui/material/Typography'
import useStyles from '../styles/pages/products'
import FormControl from '@mui/material/FormControl'
import { useRouter } from 'next/router'
import { parseCookies } from 'nookies'
import * as React from 'react'
import ProductGrid from '../components/ProductGrid'
import ProductTypeSelect from '../components/ProductTypeSelect'
import ReleaseSelect from '../components/ReleaseSelect'
import SearchField from '../components/SearchField'
import { parseCookies } from 'nookies'
import { useRouter } from 'next/router'
import { useAuth } from '../contexts/AuthContext'
import useStyles from '../styles/pages/products'

export default function Products() {
const classes = useStyles()
Expand All @@ -28,7 +27,7 @@ export default function Products() {

return (
// Baseado neste template: https://mira.bootlab.io/dashboard/analytics
<Paper className={classes.root}>
<Paper className={classes.root} elevation={3}>
<Grid container className={classes.gridTitle}>
<Grid item xs={4}>
{/* TODO: Aqui deve entrar o BREADCRUMB */}
Expand All @@ -52,45 +51,48 @@ export default function Products() {
)}
</Grid>
</Grid>
<Divider className={classes.titleDivider} variant={'fullWidth'} />
<Grid container className={classes.gridContent}>
<Grid item xs={12}>
<Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
<FormControl sx={{ m: 1, minWidth: '200px' }}>
<ReleaseSelect
value={filters.release}
onChange={value => {
setFilters({
...filters,
release: value
})
}}
disabled={search !== ''}
allowAll={true}
noRelease={true}
/>
</FormControl>
<FormControl sx={{ m: 1, minWidth: '200px' }}>
<ProductTypeSelect
value={filters.product_type}
onChange={value => {
setFilters({
...filters,
product_type: value
})
}}
disabled={search !== ''}
allowAll={true}
/>
</FormControl>
{/* TODO: Empurrar o Search para a direita */}
<SearchField onChange={query => setSearch(query)} />
</Box>
</Grid>
<Grid item xs={12}>
<ProductGrid query={search} filters={filters} />
</Grid>
</Grid>
<Card>
<CardContent>
<Grid container className={classes.gridContent}>
<Grid item xs={12}>
<Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
<FormControl sx={{ mt: 1, minWidth: '200px' }}>
<ReleaseSelect
value={filters.release}
onChange={value => {
setFilters({
...filters,
release: value
})
}}
disabled={search !== ''}
allowAll={true}
noRelease={true}
/>
</FormControl>
<FormControl sx={{ m: 1, minWidth: '200px' }}>
<ProductTypeSelect
value={filters.product_type}
onChange={value => {
setFilters({
...filters,
product_type: value
})
}}
disabled={search !== ''}
allowAll={true}
/>
</FormControl>
{/* TODO: Empurrar o Search para a direita */}
<SearchField onChange={query => setSearch(query)} />
</Box>
</Grid>
<Grid item xs={12}>
<ProductGrid query={search} filters={filters} />
</Grid>
</Grid>
</CardContent>
</Card>
</Paper>
)
}
Expand Down
99 changes: 54 additions & 45 deletions frontend/pages/user_products.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
import * as React from 'react'
import { Paper, Box, FormControl, Button } from '@mui/material'
import {
Box,
Button,
Card,
CardContent,
FormControl,
Paper
} from '@mui/material'
import Grid from '@mui/material/Grid'
import Divider from '@mui/material/Divider'
import Typography from '@mui/material/Typography'
import useStyles from '../styles/pages/products'
import { useRouter } from 'next/router'
import { parseCookies } from 'nookies'
import * as React from 'react'
import ProductGrid from '../components/ProductGrid'
import ProductTypeSelect from '../components/ProductTypeSelect'
import ReleaseSelect from '../components/ReleaseSelect'
import SearchField from '../components/SearchField'
import { parseCookies } from 'nookies'
import { useRouter } from 'next/router'
import useStyles from '../styles/pages/products'

export default function Products() {
const classes = useStyles()
Expand Down Expand Up @@ -46,45 +52,48 @@ export default function Products() {
</Button>
</Grid>
</Grid>
<Divider className={classes.titleDivider} variant={'fullWidth'} />
<Grid container className={classes.gridContent}>
<Grid item xs={12}>
<Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
<FormControl sx={{ m: 1, minWidth: '200px' }}>
<ReleaseSelect
value={filters.release}
onChange={value => {
setFilters({
...filters,
release: value
})
}}
disabled={search !== ''}
allowAll={true}
noRelease={true}
/>
</FormControl>
<FormControl sx={{ m: 1, minWidth: '200px' }}>
<ProductTypeSelect
value={filters.product_type}
onChange={value => {
setFilters({
...filters,
product_type: value
})
}}
disabled={search !== ''}
allowAll={true}
/>
</FormControl>
{/* TODO: Empurrar o Search para a direita */}
<SearchField onChange={query => setSearch(query)} />
</Box>
</Grid>
<Grid item xs={12}>
<ProductGrid query={search} filters={filters} />
</Grid>
</Grid>
<Card>
<CardContent>
<Grid container className={classes.gridContent}>
<Grid item xs={12}>
<Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
<FormControl sx={{ mt: 1, minWidth: '200px' }}>
<ReleaseSelect
value={filters.release}
onChange={value => {
setFilters({
...filters,
release: value
})
}}
disabled={search !== ''}
allowAll={true}
noRelease={true}
/>
</FormControl>
<FormControl sx={{ m: 1, minWidth: '200px' }}>
<ProductTypeSelect
value={filters.product_type}
onChange={value => {
setFilters({
...filters,
product_type: value
})
}}
disabled={search !== ''}
allowAll={true}
/>
</FormControl>
{/* TODO: Empurrar o Search para a direita */}
<SearchField onChange={query => setSearch(query)} />
</Box>
</Grid>
<Grid item xs={12}>
<ProductGrid query={search} filters={filters} />
</Grid>
</Grid>
</CardContent>
</Card>
</Paper>
)
}
Expand Down
4 changes: 1 addition & 3 deletions frontend/styles/pages/products.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ const useStyles = makeStyles(theme => ({
},
gridContent: {
display: 'flex',
flexFlow: 'row wrap',
margin: theme.spacing(2)
// height: 'calc(100% - 65px)'
flexFlow: 'row wrap'
}
}))

Expand Down

0 comments on commit 6f6cf19

Please sign in to comment.