Skip to content

Commit 33262ce

Browse files
teropateropa
committed
Styles and improved visualization
This commit adds some CSS styles and tooling around them. Autoprefixer is used to add vendor prefixing. Instead of adding the dependencies to package.json manually, you can install them from the command line: npm install --save classnames npm install --save-dev css-loader style-loader autoprefixer-loader
1 parent 235ccee commit 33262ce

File tree

7 files changed

+150
-0
lines changed

7 files changed

+150
-0
lines changed

‎dist/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"></link>
7+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700"></link>
8+
</head>
39
<body>
410
<div id="app"></div>
511
<script src="bundle.js"></script>

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,21 @@
99
"author": "",
1010
"license": "ISC",
1111
"devDependencies": {
12+
"autoprefixer-loader": "^2.1.0",
1213
"babel-core": "^5.8.23",
1314
"babel-loader": "^5.3.2",
1415
"chai": "^3.2.0",
1516
"chai-immutable": "^1.3.0",
17+
"css-loader": "^0.17.0",
1618
"jsdom": "^3.1.2",
1719
"mocha": "^2.3.0",
1820
"react-hot-loader": "^1.3.0",
21+
"style-loader": "^0.12.3",
1922
"webpack": "^1.12.0",
2023
"webpack-dev-server": "^1.10.1"
2124
},
2225
"dependencies": {
26+
"classnames": "^2.1.3",
2327
"immutable": "^3.7.5",
2428
"react": "^0.13.3",
2529
"react-redux": "^2.1.0",

‎src/components/Results.jsx

+10
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {connect} from 'react-redux';
33
import Winner from './Winner';
44
import * as actionCreators from '../action_creators';
55

6+
export const VOTE_WIDTH_PERCENT = 8;
7+
68
export const Results = React.createClass({
79
mixins: [React.addons.PureRenderMixin],
810
getPair: function() {
@@ -14,6 +16,9 @@ export const Results = React.createClass({
1416
}
1517
return 0;
1618
},
19+
getVotesBlockWidth: function(entry) {
20+
return (this.getVotes(entry) * VOTE_WIDTH_PERCENT) + '%';
21+
},
1722
render: function() {
1823
return this.props.winner ?
1924
<Winner ref="winner" winner={this.props.winner} /> :
@@ -22,6 +27,11 @@ export const Results = React.createClass({
2227
{this.getPair().map(entry =>
2328
<div key={entry} className="entry">
2429
<h1>{entry}</h1>
30+
<div className="voteVisualization">
31+
<div className="votesBlock"
32+
style={{width: this.getVotesBlockWidth(entry)}}>
33+
</div>
34+
</div>
2535
<div className="voteCount">
2636
{this.getVotes(entry)}
2737
</div>

‎src/components/Vote.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react/addons';
2+
import classNames from 'classnames'
23

34
export default React.createClass({
45
mixins: [React.addons.PureRenderMixin],
@@ -15,6 +16,7 @@ export default React.createClass({
1516
return <div className="voting">
1617
{this.getPair().map(entry =>
1718
<button key={entry}
19+
className={classNames({voted: this.hasVotedFor(entry)})}
1820
disabled={this.isDisabled()}
1921
onClick={() => this.props.vote(entry)}>
2022
<h1>{entry}</h1>

‎src/index.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import App from './components/App';
1010
import {VotingContainer} from './components/Voting';
1111
import {ResultsContainer} from './components/Results';
1212

13+
require('./style.css');
14+
1315
const socket = io(`${location.protocol}//${location.hostname}:8090`);
1416
socket.on('state', state =>
1517
store.dispatch(setState(state))

‎src/style.css

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
body {
2+
font-family: 'Open Sans', sans-serif;
3+
background-color: #673AB7;
4+
color: white;
5+
}
6+
7+
/* Voting Screen */
8+
9+
.voting {
10+
position: fixed;
11+
top: 0;
12+
left: 0;
13+
right: 0;
14+
bottom: 0;
15+
16+
display: flex;
17+
flex-direction: column;
18+
19+
user-select: none;
20+
}
21+
22+
.voting button {
23+
flex: 1 0 0;
24+
25+
background-color: #673AB7;
26+
border-width: 0;
27+
}
28+
.voting button:first-child {
29+
border-bottom: 1px solid white;
30+
}
31+
.voting button:active {
32+
background-color: white;
33+
color: #311B92;
34+
}
35+
.voting button.voted {
36+
background-color: #311B92;
37+
}
38+
.voting button:not(.voted) .label {
39+
visibility: hidden;
40+
}
41+
.voting button .label {
42+
opacity: 0.87;
43+
}
44+
.voting button.votedAgainst * {
45+
opacity: 0.3;
46+
}
47+
48+
@media only screen and (min-device-width: 500px) {
49+
.voting {
50+
flex-direction: row;
51+
}
52+
.voting button:first-child {
53+
border-bottom-width: 0;
54+
border-right: 1px solid white;
55+
}
56+
}
57+
58+
/* Results Screen */
59+
60+
.results {
61+
position: fixed;
62+
top: 0;
63+
left: 0;
64+
right: 0;
65+
bottom: 0;
66+
67+
display: flex;
68+
flex-direction: column;
69+
}
70+
.results .tally {
71+
flex: 1;
72+
73+
display: flex;
74+
flex-direction: column;
75+
justify-content: center;
76+
}
77+
.results .tally .entry {
78+
display: flex;
79+
justify-content: space-around;
80+
align-items: center;
81+
}
82+
83+
.results .tally h1 {
84+
width: 25%;
85+
}
86+
.results .tally .voteVisualization {
87+
height: 50px;
88+
width: 50%;
89+
display: flex;
90+
justify-content: flex-start;
91+
92+
background-color: #7E57C2;
93+
}
94+
.results .tally .votesBlock {
95+
background-color: white;
96+
transition: width 0.5s;
97+
}
98+
.results .tally .voteCount {
99+
font-size: 2rem;
100+
}
101+
102+
.results .management {
103+
display: flex;
104+
105+
height: 2em;
106+
border-top: 1px solid #aaa;
107+
}
108+
109+
.results .management button {
110+
border: 0;
111+
background-color: black;
112+
color: #aaa;
113+
}
114+
.results .management .next {
115+
flex: 1;
116+
}
117+
118+
/* Winner View */
119+
120+
.winner {
121+
font-size: 4rem;
122+
text-align: center;
123+
}

‎webpack.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ module.exports = {
1111
test: /\.jsx?$/,
1212
exclude: /node_modules/,
1313
loader: 'react-hot!babel'
14+
}, {
15+
test: /\.css$/,
16+
loader: 'style!css!autoprefixer?browsers=last 2 versions'
1417
}]
1518
},
1619
resolve: {

0 commit comments

Comments
 (0)