Skip to content

Commit f1cee5b

Browse files
Alex-rayAlex-ray
committed
Styles counter lists
1 parent 09467ec commit f1cee5b

21 files changed

+237
-58
lines changed

‎backend/lib/Html.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ class Html extends Component {
5656
</head>
5757
<body>
5858
<script dangerouslySetInnerHTML={{__html: initialState}} />
59-
{PROD ? <div id="mount" dangerouslySetInnerHTML={{__html: root}}></div> : <div id="mount"></div>}
59+
{PROD ? <div id="mount" dangerouslySetInnerHTML={{__html: root}}></div> : <div id="mount" style={{ width: '960px' }}></div>}
6060
{PROD && <script dangerouslySetInnerHTML={{__html: manifest.text}}/>}
6161
{PROD && <script src={vendor.js}/>}
6262
<script src={PROD ? bundle.js : 'http://localhost:3000/static/bundle.js'} />

‎frontend/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { ConnectedRouter } from 'react-router-redux';
55
import createHistory from 'history/createBrowserHistory';
66
import createStore from './universal/redux/createStore';
77

8+
import 'universal/styles/colors.css';
9+
import 'universal/styles/reset.css';
10+
811
import Routes from './universal/routes/Routes.js';
912

1013
const history = createHistory();

‎frontend/package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,11 @@
5252
"file-loader": "^0.8.5",
5353
"less": "^2.6.1",
5454
"less-loader": "^2.2.3",
55+
"postcss": "^6.0.13",
56+
"postcss-cssnext": "^3.0.2",
5557
"postcss-loader": "^0.8.2",
5658
"style-loader": "^0.13.1",
57-
"webpack-dev-server": "^1.14.1",
58-
"webpack": "3.6.0"
59+
"webpack": "3.6.0",
60+
"webpack-dev-server": "^1.14.1"
5961
}
6062
}

‎frontend/universal/components/App/App.css

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
html {
2-
height: 100%;
2+
min-height: 100%;
33
background: linear-gradient(90deg, #80A2CC, #F99F86);
44
background: -webkit-linear-gradient(90deg, #80A2CC, #F99F86);
55
}
66

77
body {
88
min-height: 100%;
9+
height: 100vmax;
910
margin: 0;
1011
padding: 0;
1112
display: flex;
13+
flex-direction: column;
14+
flex: 1;
1215
position: relative;
1316
justify-content: center;
1417
align-items: center;
15-
font-family: 'Arvo', Arial, Helvetica, Sans-serif;
16-
background: linear-gradient(90deg, #80A2CC, #F99F86);
17-
background: -webkit-linear-gradient(90deg, #80A2CC, #F99F86);
18-
18+
/*font-family: 'Arvo', Arial, Helvetica, Sans-serif;*/
19+
background: linear-gradient(90deg, rgba(53, 66, 99, 0.5), rgba(255,255,248,0.7));
20+
background: -webkit-linear-gradient(90deg, rgba(53, 66, 99, 0.5), rgba(255,255,248,0.7));
1921
}
2022

2123
h1,h2,h3,h4,h5,h6 {

‎frontend/universal/components/Home/Home.css

-17
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
.home {
32
max-width: 750px;
43
}
@@ -8,8 +7,6 @@
87
}
98

109
.title {
11-
color: white;
12-
font-size: 3em;
1310
display: block;
1411
text-align: center;
1512
width: 100%;
@@ -18,18 +15,4 @@
1815
.button {
1916
display: inline-block;
2017
margin-top: 50px;
21-
padding: 15px 40px;
22-
font-size: 1.5em;
23-
text-align: center;
24-
color: #E4E7EB;
25-
background-color: #F48F94;
26-
border: solid 7px #F27D83;
27-
border-radius: 100px;
28-
text-decoration: none;
29-
margin-top: 50px;
30-
31-
}
32-
33-
.button:hover {
34-
border-color: #F48F94;
3518
}

‎frontend/universal/components/Home/Home.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import React, {Component, PropTypes} from 'react';
22
import { Link } from 'react-router-dom';
3+
import cx from 'classnames';
4+
35
import styles from './Home.css';
6+
import { mainButton } from 'universal/styles/button.css';
7+
import { title } from 'universal/styles/typography.css';
48

59
class Home extends Component {
610
render () {
711
return (
812
<div className={styles.home}>
9-
<h1 className={styles.title}>⚡ Black Magic ⚡</h1>
13+
<h1 className={cx(styles.title, title)}>⚡ Black Magic ⚡</h1>
1014
<div className={styles.center}>
11-
<Link className={styles.button} to='/counter'>Go to App</Link>
15+
<Link className={cx(styles.button, mainButton)} to='/counters'>Go to App</Link>
1216
</div>
13-
{/* <a href="/auth/instagram">Login with Instagram</a> */}
1417
</div>
1518
);
1619
}

‎frontend/universal/modules/counter/components/Counter/Counter.css

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
.counterContainer {
22
position: relative;
3+
width: 225px;
4+
margin: auto;
35
}
46

57
.counter {

‎frontend/universal/modules/counter/components/CounterListItem/CounterListItem.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
3+
import cx from 'classnames';
34

4-
const CountersListItem = ({ id, value, onDelete }) => (
5-
<li>
6-
<Link to={`/counter/${id}`}>Counter id: {id} value : {value}</Link>
7-
<button onClick={onDelete.bind(null, id)}>Delete</button>
5+
import styles from './counter-list-item.css';
6+
import { smallSquareButton } from 'universal/styles/button.css';
7+
import typeStyles from 'universal/styles/typography.css';
8+
9+
const CounterListItem = ({ id, value, onDelete }) => (
10+
<li className={styles.listItem}>
11+
<Link className={typeStyles.link} to={`/counter/${id}`}>Counter - {value}</Link>
12+
<button className={cx(smallSquareButton, styles.button)} onClick={onDelete.bind(null, id)}>Delete</button>
813
</li>
914
);
1015

‎frontend/universal/modules/counter/components/CounterListItem/counter-list-item.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.listItem {
2+
min-width: 70%;
3+
display: block;
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
justify-content: space-between;
8+
margin-bottom: 1.5rem;
9+
padding-bottom: 1.5rem;
10+
border-bottom: solid 1px var(--gray-white);
11+
}
12+
13+
.listItem:last-of-type {
14+
border-bottom: none;
15+
margin-bottom: none;
16+
}
17+
18+
.button {
19+
margin-left: 1.5rem;
20+
}

‎frontend/universal/modules/counter/components/CountersList/CountersList.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react';
22

3-
import CountersListItem from 'universal/modules/counter/components/CounterListItem/CounterListItem.js';
3+
import CounterListItem from 'universal/modules/counter/components/CounterListItem/CounterListItem.js';
4+
5+
import styles from './counter-list.css';
46

57
const CountersList = ({ counters, deleteCounter}) => (
6-
<ul>
8+
<ul className={styles.list}>
79
{counters.map((counter) => (
810
<CounterListItem key={`counter-list-item-{${counter.get('id')}`}
911
value={counter.get('value')}
@@ -13,3 +15,5 @@ const CountersList = ({ counters, deleteCounter}) => (
1315
))}
1416
</ul>
1517
);
18+
19+
export default CountersList;

‎frontend/universal/modules/counter/components/CountersList/counter-list.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.list {
2+
padding: 0;
3+
margin: 0 auto;
4+
width: 70%;
5+
}

‎frontend/universal/modules/counter/components/CountersPage/CountersPage.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
import React from 'react';
22

3+
import styles from './counters-page.css';
4+
import { squareButton } from 'universal/styles/button.css';
5+
import { title } from 'universal/styles/typography.css';
6+
37
import CountersList from 'universal/modules/counter/components/CountersList/CountersList.js';
48

59
const CountersPage = ({ counters, createCounter, deleteCounter }) => (
610
<div>
7-
<button onClick={createCounter}>Create Counter</button>
11+
<header className={styles.header}>
12+
<h1 className={title}>Counters</h1>
13+
<button className={squareButton} onClick={createCounter}>Create New Counter</button>
14+
</header>
815
<CountersList counters={counters} deleteCounter={deleteCounter}/>
916
</div>
1017
);

‎frontend/universal/modules/counter/components/CountersPage/counters-page.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.header {
2+
width: 70%;
3+
margin: 0 auto;
4+
padding-bottom: 3rem;
5+
}

‎frontend/universal/routes/Routes.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const Routes = ({ history }) => (
1818
<AppContainer>
1919
{/* <Route component={({ ...routerProps }) => ( */}
2020
<Switch>
21-
{/* <Route exact path='/' component={RouteMap.Home} /> */}
22-
<Route exact path='/' component={RouteMap.Counters} />
21+
<Route exact path='/' component={RouteMap.Home} />
22+
<Route exact path='/counters' component={RouteMap.Counters} />
2323
<Route exact path='/counter/:counterId' component={RouteMap.Counter} />
2424
</Switch>
2525
</AppContainer>

‎frontend/universal/styles/button.css

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
.mainButton {
2+
font-family: var(--font-family);
3+
background-color: var(--bone-white);
4+
font-size: 1.6rem;
5+
border: solid 0.25rem rgba(53, 66, 99, 0.95);
6+
box-shadow: var(--midnight-blue) 0px 1px 2px;
7+
transition: all 250ms ease-in-out;
8+
9+
padding: 1rem 2rem;
10+
border-radius: 3rem;
11+
text-align: center;
12+
text-decoration: none;
13+
color: var(--midnight-blue);
14+
}
15+
16+
.mainButton:hover {
17+
cursor: pointer;
18+
border: solid 0.25rem rgba(53, 66, 99, 1);
19+
box-shadow: rgba(53, 66, 99, 0.95) 0px 2px 5px;
20+
}
21+
22+
.squareButton {
23+
font-family: var(--font-family);
24+
background-color: var(--dust-white);
25+
font-size: 1.6rem;
26+
transition: all 250ms ease-in-out;
27+
border: none;
28+
29+
padding: 1rem 2rem;
30+
border-radius: 0.25rem;
31+
text-align: center;
32+
text-decoration: none;
33+
color: var(--midnight-blue);
34+
}
35+
36+
.squareButton:active {
37+
outline: none;
38+
}
39+
40+
.squareButton:hover {
41+
cursor: pointer;
42+
background-color: var(--gray-white);
43+
}
44+
45+
.smallSquareButton {
46+
font-family: var(--font-family);
47+
background-color: var(--dust-white);
48+
font-size: 1.2rem;
49+
transition: all 250ms ease-in-out;
50+
border: none;
51+
52+
padding: 0.5rem 1.5rem;
53+
border-radius: 0.25rem;
54+
text-align: center;
55+
text-decoration: none;
56+
color: var(--midnight-blue);
57+
}
58+
59+
.smallSquareButton:active {
60+
outline: none;
61+
}
62+
63+
.smallSquareButton:hover {
64+
cursor: pointer;
65+
background-color: var(--gray-white);
66+
}

‎frontend/universal/styles/colors.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
:root {
2+
--midnight-blue: #354263;
3+
--bone-white: #fffff8;
4+
--dust-white: #f5f5f5;
5+
--gray-white: #f1f1f1;
6+
7+
8+
--primary-color: var(--midnight-blue);
9+
--secondary-color: var(--bone-white);
10+
11+
--font-family: system-ui;
12+
}

‎frontend/universal/styles/reset.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
html, body {
2+
font-family: var(--font-family);
3+
font-size: 10px;
4+
}
5+
6+
h1 {
7+
color: var(--midnight-blue);
8+
}

‎frontend/universal/styles/typography.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.title {
2+
color: var(--midnight-blue);
3+
line-height: 1.5em;
4+
font-size: 3rem;
5+
}
6+
7+
.link {
8+
color: var(--midnight-blue);
9+
text-decoration: none;
10+
font-family: var(--font-family);
11+
border-bottom: solid 2px transparent;
12+
}
13+
14+
.link:hover {
15+
border-bottom: solid 2px var(--midnight-blue);
16+
}

‎frontend/webpack/webpack.config.development.js

+10-11
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import path from 'path';
22

33
import webpack from 'webpack';
44

5+
import postcssNext from 'postcss-cssnext';
6+
57
const root = process.cwd();
68
const SRC = root;
79
const BUILD_DIR = path.join(root, 'dist');
@@ -52,19 +54,16 @@ export default {
5254
use: [
5355
{loader: 'style-loader'},
5456
{loader: 'css-loader',
55-
options: {
56-
root: SRC,
57-
modules: true,
58-
importLoaders: 1,
59-
localIdentName: '[name]_[local]_[hash:base64:5]'
60-
}},
61-
{
62-
loader: 'postcss-loader',
6357
options: {
64-
plugins: function() {
65-
return [autoprefixer({browsers: ['last 2 versions']})]
66-
}
58+
root: SRC,
59+
modules: true,
60+
importLoaders: 1,
61+
localIdentName: '[name]_[local]_[hash:base64:5]'
6762
}
63+
},
64+
{
65+
loader: 'postcss-loader',
66+
options: { plugins: () => ([postcssNext()]) }
6867
}
6968
]
7069
},

0 commit comments

Comments
 (0)