Skip to content

Commit e708ad8

Browse files
committed
Added Responsiveness to ColorBoxes
1 parent 5bf1311 commit e708ad8

File tree

6 files changed

+92
-22
lines changed

6 files changed

+92
-22
lines changed

react-color-palettes/src/App.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ class App extends Component {
1616
}
1717
this.savePalette = this.savePalette.bind(this);
1818
this.findPalette = this.findPalette.bind(this);
19+
this.deletePalette = this.deletePalette.bind(this);
1920
}
2021

2122
findPalette(id){
@@ -33,11 +34,21 @@ class App extends Component {
3334
JSON.stringify(this.state.palettes)
3435
);
3536
}
37+
38+
deletePalette(id){
39+
console.log(id)
40+
this.setState(currState => ({
41+
palettes: currState.palettes.filter(palette => palette.id !== id)
42+
}),
43+
this.syncLocalStorage
44+
)
45+
console.log(this.state.palettes)
46+
}
3647
render(){
3748
return (
3849
<Switch>
3950
<Route exact path='/palette/create' render={(routeProps) => <CreatePalette palettes={this.state.palettes} savePalette={this.savePalette} {...routeProps}/>}/>
40-
<Route exact path='/' render={(routeProps) => <PaletteList palettes={this.state.palettes} {...routeProps}/>}/>
51+
<Route exact path='/' render={(routeProps) => <PaletteList palettes={this.state.palettes} deletePalette={this.deletePalette} {...routeProps}/>}/>
4152
<Route exact path='/palette/:id' render={(routeProps) => <Palette palette={generateColors(this.findPalette(routeProps.match.params.id), 10)}/>}/>
4253
<Route exact path='/palette/:paletteId/:colorId' render={(routeProps) =>
4354
<MoreShades colorId={routeProps.match.params.colorId} palette={generateColors(this.findPalette(routeProps.match.params.paletteId), 10)}/>}
Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,38 @@
1-
import React from 'react';
1+
import React, {Component} from 'react';
22
import { withStyles } from '@material-ui/styles';
33
import styles from "./../styles/MiniPaletteStyles";
44
import DeleteIcon from '@material-ui/icons/Delete';
55

6-
function MiniPalettes(props){
7-
const {classes, paletteName, emoji, colors} = props;
8-
const miniColorBoxes = colors.map(color => (
9-
<div key={color.name} className={classes.miniColor} style={{backgroundColor: color.color}}></div>
10-
));
11-
return(
12-
<div className={classes.root} onClick={props.selectPalette}>
13-
<div className={classes.delete}>
14-
<DeleteIcon className={classes.deleteIcon} style={{transition: "all 0.3s ease-in-out"}}/>
6+
class MiniPalettes extends Component{
7+
constructor(props){
8+
super(props);
9+
this.handleDeletePalette = this.handleDeletePalette.bind(this)
10+
}
11+
handleDeletePalette(e){
12+
e.stopPropagation();
13+
this.props.deletePalette(this.props.id)
14+
}
15+
render(){
16+
const {classes, paletteName, emoji, colors, selectPalette} = this.props;
17+
const miniColorBoxes = colors.map(color => (
18+
<div key={color.name} className={classes.miniColor} style={{backgroundColor: color.color}}></div>
19+
));
20+
return(
21+
<div className={classes.root} onClick={selectPalette}>
22+
<DeleteIcon
23+
className={classes.deleteIcon}
24+
style={{transition: "all 0.3s ease-in-out"}}
25+
onClick={this.handleDeletePalette}
26+
/>
27+
<div className={classes.colors}>
28+
{/*Mini Color Boxes*/}
29+
{miniColorBoxes}
30+
</div>
31+
<h5 className={classes.title}>{paletteName} <span className={classes.emoji}>{emoji}</span></h5>
1532
</div>
16-
<div className={classes.colors}>
17-
{/*Mini Color Boxes*/}
18-
{miniColorBoxes}
19-
</div>
20-
<h5 className={classes.title}>{paletteName} <span className={classes.emoji}>{emoji}</span></h5>
21-
</div>
22-
)
33+
)
34+
35+
}
2336
}
2437

2538
export default withStyles(styles)(MiniPalettes);

react-color-palettes/src/Components/PaletteList.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ class PaletteList extends Component{
99
this.props.history.push(`/palette/${id}`)
1010
}
1111
render(){
12-
const {palettes, classes} = this.props;
12+
const {palettes, classes, deletePalette} = this.props;
1313
return(
1414
<div className={classes.root}>
1515
<div className={classes.container}>
@@ -19,7 +19,7 @@ class PaletteList extends Component{
1919
</nav>
2020
<div className={classes.palettes}>
2121
{palettes.map(palette => (
22-
<MiniPalettes key={palette.id} {...palette} selectPalette={() => this.handlePaletteClick(palette.id)}/>
22+
<MiniPalettes key={palette.id} id={palette.id} deletePalette={deletePalette} {...palette} selectPalette={() => this.handlePaletteClick(palette.id)}/>
2323
))}
2424
</div>
2525
</div>

react-color-palettes/src/styles/ColorBoxStyles.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import chroma from "chroma-js";
2+
import sizes from './sizes';
3+
24
export default{
35
colorBox:{
46
width: "20%",
@@ -11,6 +13,18 @@ export default{
1113
"&:hover button": {
1214
opacity: "1",
1315
transitionDuration: "0.8s",
16+
},
17+
[sizes.down("lg")]: {
18+
width: "25%",
19+
height: props => props.showLink ? "20%" : "50%",
20+
},
21+
[sizes.down("md")]: {
22+
width: "50%",
23+
height: props => props.showLink ? "10%" : "20%",
24+
},
25+
[sizes.down("xs")]: {
26+
width: "100%",
27+
height: props => props.showLink ? "5%" : "10%",
1428
}
1529
},
1630
copyText: {
@@ -101,6 +115,9 @@ export default{
101115
marginBottom: "0",
102116
padding: "1rem",
103117
textTransform: "uppercase",
118+
[sizes.down("xs")]:{
119+
fontSize: "5rem"
120+
}
104121
},
105122
"& p": {
106123
fontWeight: "100",

react-color-palettes/src/styles/PaletteStyles.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import sizes from './sizes';
2+
13
export default{
24
palette: {
35
height: "100vh",
@@ -8,8 +10,8 @@ export default{
810
height: "90%",
911
},
1012
goBack:{
11-
height: "50%",
1213
width: "20%",
14+
height: "50%",
1315
display: "inline-block",
1416
margin: "0 auto",
1517
position: "relative",
@@ -35,6 +37,18 @@ export default{
3537
textTransform: "uppercase",
3638
cursor: "pointer",
3739
textDecoration: "none",
38-
}
40+
},
41+
[sizes.down("lg")]: {
42+
width: "25%",
43+
height: "50%"
44+
},
45+
[sizes.down("md")]: {
46+
width: "50%",
47+
height: "20%"
48+
},
49+
[sizes.down("xs")]: {
50+
width: "100%",
51+
height: "10%"
52+
},
3953
}
4054
}
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
export default{
3+
up(){
4+
5+
},
6+
down(size){
7+
const sizes = {
8+
xs: "576px",
9+
sm: "768px",
10+
md: "992px",
11+
lg: "1200px",
12+
}
13+
return `@media (max-width: ${sizes[size]})`
14+
}
15+
}

0 commit comments

Comments
 (0)