Skip to content

Post mortem styles #80

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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Post mortem styles #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cdf7d2b
Change card icons in viewDecks
tacotoemeck Jun 1, 2020
d722439
Fix deck display bug
tacotoemeck Jun 1, 2020
1864fb2
Add styles to publicDecks
tacotoemeck Jun 2, 2020
c8a5d8d
Merge branch 'master' into postMortemStyles
tacotoemeck Jun 2, 2020
b4cf5f7
Add styles to add new deck
tacotoemeck Jun 2, 2020
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
2 changes: 1 addition & 1 deletion src/components/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
}

html {
margin-top: 80px;
margin-top: 120px;
display: flex;
flex-direction: column;
justify-content: center;
Expand Down
1 change: 0 additions & 1 deletion src/components/pages/Practice/CustomPractice/customPractice-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ const TimerDivP = styled.p`
const CustomPracticeDiv = styled.div`
min-height: 40vh;
width: 100%;
padding-left: 1rem;
`;

const ButtonsDiv = styled.div`
Expand Down
29 changes: 0 additions & 29 deletions src/components/pages/Practice/CustomPractice/customPractice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,35 +117,6 @@ export default function CustomPractice({
</IconButton>
</TimerDiv>
</TimerContainer>
{/* <PracticePageText>
How long would you like to practice?
</PracticePageText> */}
{/* <TimerDiv>
<IconButton
color="primary"
aria-label="remove one minute from timer"
component="span"
onClick={handleDecrement}
>
<RemoveIcon />
</IconButton>
<TextField
className={classes.timerInput}
id="outlined-basic"
label="minutes"
variant="outlined"
value={timer}
onChange={(event, value) => setTimer(value)}
/>
<IconButton
color="primary"
aria-label="add one minut to timer"
component="span"
onClick={handleIncrement}
>
<AddIcon />
</IconButton>
</TimerDiv> */}

<PracticePageText>
Which decks would you like to practice?
Expand Down
15 changes: 13 additions & 2 deletions src/components/pages/Practice/FinishPractice/finishedPractice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Confetti from 'react-confetti';
import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';
import useYourDecks from '../../../../hooks/useYourDecks';

const FinishPracticeWrapper = styled.div`
height: 100vh;
Expand All @@ -18,16 +19,24 @@ const TextDiv = styled.div`
margin: 10rem;
`;

export default function FinishPractice({ setPracticeStage }) {
export default function FinishPractice({
setPracticeStage,
setSelectedDecks,
setDecks,
}) {
const { width, height } = useWindowSize();

useYourDecks({ setDecks, setSelectedDecks });
return (
<FinishPracticeWrapper>
<Confetti width={width} height={height} />
<TextDiv>Well done, you have finished your practice!</TextDiv>
<Button
variant="contained"
color="primary"
onClick={() => setPracticeStage('customPractice')}
onClick={() => {
setPracticeStage('customPractice');
}}
>
Practice
</Button>
Expand All @@ -37,4 +46,6 @@ export default function FinishPractice({ setPracticeStage }) {

FinishPractice.propTypes = {
setPracticeStage: PropTypes.func.isRequired,
setSelectedDecks: PropTypes.func.isRequired,
setDecks: PropTypes.func.isRequired,
};
8 changes: 7 additions & 1 deletion src/components/pages/Practice/practice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,12 @@ export default function Practice() {
}

if (practiceStage === 'finishedPractice') {
return <FinishPractice setPracticeStage={setPracticeStage} />;
return (
<FinishPractice
setPracticeStage={setPracticeStage}
setDecks={setDecks}
setSelectedDecks={setSelectedDecks}
/>
);
}
}
124 changes: 81 additions & 43 deletions src/components/pages/YourDecks/children/CreateDeckForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,14 @@ import React from 'react';
import PropTypes from 'prop-types';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import fetchData from '../../../../utils/fetchData/fetchData';
import { useStyles, FormButtonsDiv, NewDeckForm } from './Deck-style';

export default function CreateDeckForm({ setDeckCreate }) {
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
width: '25ch',
},
},
card: {}, // can style card also
button: {}, // need to style buttons
}));
const classes = useStyles();

const cancelHandler = (event) => {
Expand Down Expand Up @@ -47,19 +39,20 @@ export default function CreateDeckForm({ setDeckCreate }) {
}); // how to test error handling and also need to handle errors better here.
};

const cardClasses = `${classes.root} ${classes.newDeckForm}`;

return (
<Card
style={{ backgroundColor: 'rgb(252,193,6)' }}
className={classes.card}
>
<Card className={cardClasses}>
<CardMedia
component="img"
alt="Form to add new deck of cards"
height="90"
image="https://www.pngitem.com/pimgs/m/25-254660_transparent-flashcards-clipart-flashcard-png-png-download.png"
title="Add new deck"
/>
<CardContent>
{/* do we need label for the form in material UI? */}
<form
id="createDeckForm"
className={classes.root}
noValidate
autoComplete="off"
>
<NewDeckForm id="createDeckForm" noValidate autoComplete="off">
<Typography>Create a new deck</Typography>
<TextField
variant="outlined"
margin="normal"
Expand All @@ -71,29 +64,74 @@ export default function CreateDeckForm({ setDeckCreate }) {
// autoComplete="deckName"
// autoFocus
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.button}
onClick={doneHandler}
>
Done
</Button>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.button}
onClick={cancelHandler}
>
Cancel
</Button>
</form>
<FormButtonsDiv>
<Button
type="submit"
variant="contained"
color="primary"
onClick={doneHandler}
>
Save
</Button>
<Button
type="submit"
variant="contained"
color="primary"
onClick={cancelHandler}
>
Cancel
</Button>
</FormButtonsDiv>
</NewDeckForm>
</CardContent>
</Card>

// <Card
// style={{ backgroundColor: 'rgb(252,193,6)' }}
// className={classes.card}
// >
// <CardContent>
// {/* do we need label for the form in material UI? */}
// <form
// id="createDeckForm"
// className={classes.root}
// noValidate
// autoComplete="off"
// >
// <TextField
// variant="outlined"
// margin="normal"
// required
// fullWidth
// id="deckName"
// label="New Deck Name"
// name="deckName"
// // autoComplete="deckName"
// // autoFocus
// />
// <Button
// type="submit"
// fullWidth
// variant="contained"
// color="primary"
// className={classes.button}
// onClick={doneHandler}
// >
// Done
// </Button>
// <Button
// type="submit"
// fullWidth
// variant="contained"
// color="primary"
// className={classes.button}
// onClick={cancelHandler}
// >
// Cancel
// </Button>
// </form>
// </CardContent>
// </Card>
);
}

Expand Down
32 changes: 24 additions & 8 deletions src/components/pages/YourDecks/children/Deck-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,37 @@ const ViewDecksDiv = styled.div`
height: 100%;
width: 100%;
max-width: 320px;
max-height: 400px;

display: flex;
flex-wrap: wrap;
cursor: pointer;
overflow-x: auto;
position: relative;
`;

const FormButtonsDiv = styled.div`
display: flex;
width: 100%;
justify-content: space-between;
`;

const NewDeckForm = styled.form`
width: 100%;
`;

const useStyles = makeStyles({
root: {
width: 150,
'width': 140,
'margin': '0.25rem',
'&:hover': {
background: 'rgb(252,193,6)',
},
},
newDeckForm: {
position: 'fixed',
width: '320px',
height: '300px',
top: '200px',
},
bullet: {
display: 'inline-block',
Expand All @@ -27,15 +48,10 @@ const useStyles = makeStyles({
pos: {
marginBottom: 12,
},
card: {
width: '120px',
height: '75px',
margin: '1rem',
},
button: {
'padding': '20px',
'font-size': '60rem',
},
});

export { ViewDecksDiv, useStyles };
export { ViewDecksDiv, useStyles, FormButtonsDiv, NewDeckForm };
24 changes: 16 additions & 8 deletions src/components/pages/YourDecks/children/clickableDeck.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,29 @@ import PropTypes from 'prop-types';
import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import { useHistory } from 'react-router-dom';
import { useStyles } from './Deck-style';

export default function ClickableDeck({ deck, setViewingDeck }) {
const classes = useStyles();
const history = useHistory();

const cardClasses = `${classes.root} ${classes.card}`;

return (
<Card
style={{ backgroundColor: 'rgb(252,193,6)' }}
className={classes.card}
onClick={() => {
setViewingDeck(deck.deck_id);
history.push('/cards-in-deck');
}}
>
<Card className={cardClasses}>
<CardMedia
component="img"
alt="Clickable deck of flashcards"
height="90"
image="https://www.pngitem.com/pimgs/m/25-254660_transparent-flashcards-clipart-flashcard-png-png-download.png"
title="Clickable deck of flashcards"
onClick={() => {
setViewingDeck(deck.deck_id);
history.push('/cards-in-deck');
}}
/>
<CardContent>
<Typography>{deck.deck_name}</Typography>
</CardContent>
Expand Down
4 changes: 2 additions & 2 deletions src/components/pages/YourDecks/yourDecks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function MyDecks({ setViewingDeck }) {
{deckCreate && <CreateDeckForm setDeckCreate={setDeckCreate} />}
<ButtonsDiv>
<Button
type="submit"
// type="submit"
fullWidth
variant="contained"
color="primary"
Expand All @@ -39,7 +39,7 @@ export default function MyDecks({ setViewingDeck }) {
</Button>

<Button
type="submit"
// type="submit"
fullWidth
variant="contained"
color="primary"
Expand Down
Loading