김대휘 / Do-gether

Go to a project
Toggle navigation Toggle navigation pinning
김대휘
2b921e18 1 parent 9815ca1b

모달 추가

Inline Side-by-side
Showing 7 changed files with 267 additions and 129 deletions
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
......@@ -19,22 +87,35 @@ time, mark, audio, video {
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
ol,
ul {
list-style: none;
}
blockquote, q {
blockquote,
q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
......@@ -42,14 +123,27 @@ table {
border-spacing: 0;
}
/*Background random image: use unsplash api*/
html,
body {
width:100vw; /* or % */
height:100vh; /* or % */
overflow-x: hidden;
}
body {
width: 100%;
background-attachment: fixed;
background-image: url("https://source.unsplash.com/random/1920x1080/?nature");
background-size: "cover";
}
/*background random image: use unsplash api*/
html, body{
height:100%;
}
body{
width:100%;
background-attachment:fixed;
background-image:url('https://source.unsplash.com/random/1920x1080/?nature');
background-size:"cover";
/*SCROLL BAR DESIGN*/
body::-webkit-scrollbar {
width: 10px;
background: transparent;
background-color: rgba(0, 0, 0, 0.5);
}
body::-webkit-scrollbar-thumb {
background-color: #ffffff;
border-radius: 10px;
}
......
......@@ -3,17 +3,15 @@
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="%PUBLIC_URL%/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<title>Do-gether</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
......
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";
import Icon from "@material-ui/core/Icon";
import IconButton from "@material-ui/core/IconButton";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles((theme) => ({
iconButton: {
margin: "0",
padding: "0",
position: "fixed",
bottom: "3rem",
right: "3rem",
},
icon: {
fontSize: 70,
color: "black"
},
paper: {
position: "absolute",
width: 300,
backgroundColor: "white",
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
input: {
"& > *": {
margin: theme.spacing(1),
width: "30ch",
},
},
button:{
'& > *': {
margin: theme.spacing(1),
float:"right"
},
}
}));
function getModalStyle() {
return {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
};
}
export default function AddButton() {
const classes = useStyles();
const [modalStyle] = useState(getModalStyle);
const [open, setOpen] = useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const body = (
<div style={modalStyle} className={classes.paper}>
<Typography variant="h5">ADD TODO LIST</Typography>
<form className={classes.input} noValidate autoComplete="off">
<TextField id="standard-basic" label="Title" />
<TextField id="standard-basic" label="Todo 1" />
<TextField id="standard-basic" label="Todo 1" />
</form>
<form className={classes.button}>
<Button variant="outlined" color="primary" onClick={handleClose}>
확인
</Button>
<Button variant="outlined" color="secondary" onClick={handleClose}>
취소
</Button>
</form>
</div>
);
return (
<>
<IconButton className={classes.iconButton} onClick={handleOpen}>
<Icon className={classes.icon}>add_circle</Icon>
</IconButton>
<Modal
open={open}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
{body}
</Modal>
</>
);
}
......@@ -5,11 +5,10 @@ import Container from "@material-ui/core/Container";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Icon from "@material-ui/core/Icon";
import IconButton from "@material-ui/core/IconButton";
// import CircularProgress from "@material-ui/core/CircularProgress";
import TodoCard from "./TodoCard.js";
import AddButton from "./AddButton.js";
const useStyles = makeStyles((theme) => ({
root: {
......@@ -111,10 +110,7 @@ export default function BodyLayout() {
<Icon style={{ fontSize: 60 }}>add_circle</Icon>
</Grid> */}
</Grid>
<IconButton className={classes.iconButton}>
<Icon className={classes.icon}>add_circle</Icon>
</IconButton>
<AddButton></AddButton>
</Container>
</div>
);
......
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
function rand() {
return Math.round(Math.random() * 20) - 10;
}
function getModalStyle() {
const top = 50 + rand();
const left = 50 + rand();
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: 'absolute',
width: 400,
backgroundColor: theme.palette.background.paper,
border: '2px solid #000',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
export default function SimpleModal() {
const classes = useStyles();
// getModalStyle is not a pure function, we roll the style only on the first render
const [modalStyle] = React.useState(getModalStyle);
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const body = (
<div style={modalStyle} className={classes.paper}>
<h2 id="simple-modal-title">Text in a modal</h2>
<p id="simple-modal-description">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
<SimpleModal />
</div>
);
return (
<div>
<button type="button" onClick={handleOpen}>
Open Modal
</button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
{body}
</Modal>
</div>
);
}
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Icon from "@material-ui/core/Icon";
import IconButton from "@material-ui/core/IconButton";
const useStyles = makeStyles({
iconButton: {
float: "right",
margin: "0",
padding: "0",
},
icon: {
fontSize: 16,
color: "gray",
},
});
export default function SettingButton() {
const classes = useStyles();
return (
<>
<IconButton className={classes.iconButton}>
<Icon className={classes.icon}>
settings
</Icon>
</IconButton>
</>
);
}
......@@ -5,8 +5,8 @@ import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Icon from "@material-ui/core/Icon";
import IconButton from "@material-ui/core/IconButton";
import SettingButton from "./SettingButton.js";
const useStyles = makeStyles({
root: {
......@@ -16,15 +16,6 @@ const useStyles = makeStyles({
fontSize: 14,
float: "left",
},
iconButton: {
float: "right",
margin: "0",
padding: "0",
},
icon: {
fontSize: 16,
color: "black",
},
title: {
clear: "both",
float: "left",
......@@ -33,7 +24,6 @@ const useStyles = makeStyles({
clear: "both",
float: "left",
},
percent: {
color: "#00BB00",
float: "right",
......@@ -51,11 +41,7 @@ export default function TodoCard({ data, isMine, isVisible }) {
if (isMine) {
settingButton = (
<IconButton className={classes.iconButton}>
<Icon className={classes.icon} color="primary" on>
settings
</Icon>
</IconButton>
<SettingButton></SettingButton>
);
}
return (
......@@ -77,7 +63,7 @@ export default function TodoCard({ data, isMine, isVisible }) {
return (
<FormControlLabel
className={classes.checkBox}
control={<Checkbox />}
control={<Checkbox/>}
checked={check[idx]}
label={item}
/>
......