Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 628fceb

Browse files
MiniPalettes Styling
1 parent cbcf8f2 commit 628fceb

File tree

4 files changed

+108
-10
lines changed

4 files changed

+108
-10
lines changed

‎react-color-palettes/package-lock.json‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎react-color-palettes/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"dependencies": {
66
"@material-ui/core": "^4.0.2",
77
"@material-ui/icons": "^4.0.1",
8+
"@material-ui/styles": "^4.0.2",
89
"chroma-js": "^2.0.3",
910
"nouislider-react": "^3.1.0",
1011
"react": "^16.8.6",
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import { withStyles } from '@material-ui/styles';
3+
4+
const styles ={
5+
root: {
6+
backgroundColor: "white",
7+
border: "1px solid black",
8+
borderRadius: "5px",
9+
padding: "0.5rem",
10+
position: "relative",
11+
overflow: "hidden",
12+
"&-hover": {
13+
cursor: "pointer"
14+
}
15+
},
16+
colors: {
17+
backgroundColor: "#dae1e4",
18+
height: "150px",
19+
width: "100%",
20+
borderRadius: "5px",
21+
overflow: "hidden"
22+
},
23+
title: {
24+
display: "flex",
25+
justifyContent: "space-between",
26+
alignItems: "center",
27+
margin: "0",
28+
color: "black",
29+
paddingTop: "0.5rem",
30+
fontSize: "1rem",
31+
position: "relative",
32+
emoji: {
33+
marginLeft: "0.5rem",
34+
fontSize: "1.5rem"
35+
}
36+
},
37+
miniColor: {
38+
width: "20%",
39+
height: "25%",
40+
display: "inline-block",
41+
margin: "0 auto",
42+
position: "relative",
43+
marginBottom: "-4px"
44+
}
45+
}
46+
function MiniPalettes(props){
47+
const {classes, paletteName, emoji, colors} = props;
48+
const miniColorBoxes = colors.map(color => (
49+
<div key={color.name} className={classes.miniColor} style={{backgroundColor: color.color}}></div>
50+
))
51+
console.log(props.emoji)
52+
return(
53+
<div className={classes.root}>
54+
<div className={classes.colors}>
55+
{/*Mini Color Boxes*/}
56+
{miniColorBoxes}
57+
</div>
58+
<h5 className={classes.title}>{paletteName} <span className={classes.emoji}>{emoji}</span></h5>
59+
</div>
60+
)
61+
}
62+
63+
export default withStyles(styles)(MiniPalettes);
Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,56 @@
11
import React, {Component} from 'react';
22
import {Link} from 'react-router-dom';
3+
import MiniPalettes from './MiniPalettes';
4+
import { withStyles } from '@material-ui/styles';
35

6+
const styles = {
7+
root: {
8+
backgroundColor: "blue",
9+
height: "100vh",
10+
display: "flex",
11+
alignItems: "flex-start",
12+
justifyContent: "center",
13+
},
14+
container: {
15+
width: "50%",
16+
display: "flex",
17+
alignItems: "flex-start",
18+
flexDirection: "column",
19+
flexWrap: "wrap"
20+
},
21+
nav:{
22+
width: "100%",
23+
display: "flex",
24+
justifyContent: "space-between",
25+
color: "white"
26+
},
27+
palettes: {
28+
boxSizing: "border-box",
29+
width: "100%",
30+
display: "grid",
31+
gridTemplateColumns: "repeat(3, 30%)",
32+
gridGap: "5%"
33+
}
34+
}
435
class PaletteList extends Component{
536
render(){
6-
const {palettes} = this.props;
37+
const {palettes, classes} = this.props;
738
return(
8-
<div>
9-
<h1>React Palettes</h1>
10-
{palettes.map(palette => (
11-
<p>
12-
<Link to={`/palette/${palette.id}`}>{palette.paletteName}</Link>
13-
</p>
14-
))}
39+
<div className={classes.root}>
40+
<div className={classes.container}>
41+
<nav className={classes.nav}>
42+
<h1>React Palettes</h1>
43+
</nav>
44+
<div className={classes.palettes}>
45+
{palettes.map(palette => (
46+
<MiniPalettes {...palette}/>
47+
))}
48+
</div>
49+
</div>
1550
</div>
1651
)
1752
}
1853

1954
}
2055

21-
export default PaletteList;
56+
export default withStyles(styles)(PaletteList);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /