mirror of
https://github.com/sergeyyarkov/todo-app.git
synced 2026-10-11 18:39:09 +03:00
frontend startup
This commit is contained in:
parent
d845959d39
commit
279692ce6f
@ -1,23 +1,7 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"short_name": "Todo App",
|
||||
"name": "Todo App",
|
||||
"icons": [],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
|
||||
@ -22,11 +22,11 @@ const useStyles = makeStyles((theme) => ({
|
||||
const Drawer = () => {
|
||||
const classes = useStyles()
|
||||
const [selectedIndex, setSelectedIndex] = React.useState(0)
|
||||
const [isListOpen, setListOpen] = React.useState(false)
|
||||
const [isListOpen, setIsListOpen] = React.useState(false)
|
||||
|
||||
const listItemSelectedHandler = (e, index) => {
|
||||
setSelectedIndex(index)
|
||||
if (index === 1) setListOpen(!isListOpen)
|
||||
if (index === 1) setIsListOpen(!isListOpen)
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -39,11 +39,9 @@ const useStyles = makeStyles((theme) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const Header = (props) => {
|
||||
const { window } = props;
|
||||
const Header = ({ window }) => {
|
||||
const classes = useStyles();
|
||||
const theme = useTheme();
|
||||
|
||||
const [mobileOpen, setMobileOpen] = React.useState(false);
|
||||
|
||||
const handleDrawerToggle = () => {
|
||||
@ -66,7 +64,7 @@ const Header = (props) => {
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h1" noWrap>
|
||||
Todo app
|
||||
Список дел
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
@ -2,16 +2,37 @@ import React from 'react';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import CardActions from '@material-ui/core/CardActions';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
import Fab from '@material-ui/core/Fab';
|
||||
import AddIcon from '@material-ui/icons/Add';
|
||||
import DeleteIcon from '@material-ui/icons/Delete'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import AlarmIcon from '@material-ui/icons/Alarm';
|
||||
import EditIcon from '@material-ui/icons/Edit';
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
alarmIcon: {
|
||||
marginRight: 10
|
||||
},
|
||||
card: {
|
||||
margin: 10
|
||||
margin: 10,
|
||||
},
|
||||
cardActions: {
|
||||
justifyContent: 'flex-end'
|
||||
},
|
||||
cardHeading: {
|
||||
marginBottom: 10
|
||||
},
|
||||
cardCategoryHeading: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
fontSize: 14
|
||||
},
|
||||
cardAlarm: {
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
fab: {
|
||||
position: 'fixed',
|
||||
@ -29,9 +50,6 @@ const useStyles = makeStyles((theme) => ({
|
||||
margin: '0 2px',
|
||||
transform: 'scale(0.8)',
|
||||
},
|
||||
title: {
|
||||
fontSize: 14,
|
||||
},
|
||||
pos: {
|
||||
marginBottom: 12,
|
||||
},
|
||||
@ -39,103 +57,37 @@ const useStyles = makeStyles((theme) => ({
|
||||
|
||||
const Main = () => {
|
||||
const classes = useStyles()
|
||||
const bull = <span className={classes.bullet}>•</span>;
|
||||
return (
|
||||
<main className={classes.content}>
|
||||
<div className={classes.toolbar} />
|
||||
<Fab className={classes.fab} color="secondary" size='large' aria-label="add">
|
||||
<AddIcon />
|
||||
</Fab>
|
||||
<AddIcon />
|
||||
</Fab>
|
||||
<Grid container>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card className={classes.card}>
|
||||
<CardContent>
|
||||
<Typography className={classes.title} color="textSecondary" gutterBottom>
|
||||
Word of the Day
|
||||
<Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
|
||||
Категория 1
|
||||
<span className={classes.cardAlarm}>
|
||||
<AlarmIcon className={classes.alarmIcon} color='action' />
|
||||
18:00
|
||||
</span>
|
||||
</Typography>
|
||||
<Typography variant="h5" component="h2">
|
||||
be{bull}nev{bull}o{bull}lent
|
||||
</Typography>
|
||||
<Typography className={classes.pos} color="textSecondary">
|
||||
adjective
|
||||
<Typography className={classes.cardHeading} variant="h5" component="h2">
|
||||
Todo 1
|
||||
</Typography>
|
||||
<Typography variant="body2" component="p">
|
||||
well meaning and kindly.
|
||||
<br />
|
||||
{'"a benevolent smile"'}
|
||||
But I must explain to you how all this mistaken idea of denouncing pleasure and praising.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button size="small">Learn More</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card className={classes.card}>
|
||||
<CardContent>
|
||||
<Typography className={classes.title} color="textSecondary" gutterBottom>
|
||||
Word of the Day
|
||||
</Typography>
|
||||
<Typography variant="h5" component="h2">
|
||||
be{bull}nev{bull}o{bull}lent
|
||||
</Typography>
|
||||
<Typography className={classes.pos} color="textSecondary">
|
||||
adjective
|
||||
</Typography>
|
||||
<Typography variant="body2" component="p">
|
||||
well meaning and kindly.
|
||||
<br />
|
||||
{'"a benevolent smile"'}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button size="small">Learn More</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card className={classes.card}>
|
||||
<CardContent>
|
||||
<Typography className={classes.title} color="textSecondary" gutterBottom>
|
||||
Word of the Day
|
||||
</Typography>
|
||||
<Typography variant="h5" component="h2">
|
||||
be{bull}nev{bull}o{bull}lent
|
||||
</Typography>
|
||||
<Typography className={classes.pos} color="textSecondary">
|
||||
adjective
|
||||
</Typography>
|
||||
<Typography variant="body2" component="p">
|
||||
well meaning and kindly.
|
||||
<br />
|
||||
{'"a benevolent smile"'}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button size="small">Learn More</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card className={classes.card}>
|
||||
<CardContent>
|
||||
<Typography className={classes.title} color="textSecondary" gutterBottom>
|
||||
Word of the Day
|
||||
</Typography>
|
||||
<Typography variant="h5" component="h2">
|
||||
be{bull}nev{bull}o{bull}lent
|
||||
</Typography>
|
||||
<Typography className={classes.pos} color="textSecondary">
|
||||
adjective
|
||||
</Typography>
|
||||
<Typography variant="body2" component="p">
|
||||
well meaning and kindly.
|
||||
<br />
|
||||
{'"a benevolent smile"'}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button size="small">Learn More</Button>
|
||||
<CardActions className={classes.cardActions}>
|
||||
<IconButton aria-label="delete">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton aria-label="delete" color='secondary'>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
@ -6,11 +6,9 @@ import theme from './theme';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<ThemeProvider theme={theme}>
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
</React.StrictMode>,
|
||||
</ThemeProvider>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
|
||||
@ -17,6 +17,9 @@ const theme = createMuiTheme({
|
||||
h2: {
|
||||
fontSize: 30
|
||||
},
|
||||
body1: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user