Skip to content

Commit ff72349

Browse files
author
Pavithra K
committed
Rearrange vote buttons
1 parent 9bbcbd5 commit ff72349

File tree

5 files changed

+151
-45
lines changed

5 files changed

+151
-45
lines changed

‎components/vote/api.dev.js

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,6 @@ let lists = {
2323
score: 1,
2424
step: 10,
2525
color: "#bfa203"
26-
},
27-
{
28-
name: "thumb",
29-
minimum: -5,
30-
maximum: 5,
31-
score: 5,
32-
step: 1,
33-
color: "#535353"
3426
}
3527
],
3628
items: [

‎components/vote/app-style.scss

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -128,14 +128,32 @@
128128
}
129129
}
130130

131-
&__item-table td {
132-
vertical-align: middle;
131+
&__item-card {
132+
display: flex;
133+
flex-direction: column;
134+
135+
@include break(medium){
136+
flex-direction: row;
137+
}
138+
}
139+
140+
&__score-section {
141+
display: flex;
142+
flex: 0 0 40%;
143+
border: 1px solid lightgray;
144+
padding: 0 0 0 20px;
145+
margin-right: 30px;
133146
}
134147

135148
&__item-score {
136-
font-size: 150%;
137-
width: 90px;
138-
text-align: right;
149+
align-self: center;
150+
font-size: 20pt;
151+
flex: 0 0 20%;
152+
}
153+
154+
&__item-button {
155+
flex: 0 0 40%;
156+
align-self: center;
139157
}
140158

141159
&__items-list {

‎components/vote/app.jsx

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import 'whatwg-fetch';
33
import SidebarItem from '../sidebar-item/sidebar-item';
44
import * as api from "./api";
55
import VoteButton from './button/button';
6+
import VoteItem from './button/new-button';
67
import Influence from './influence.jsx';
78
import GithubMark from '../../assets/github-mark-32.png';
89

@@ -175,7 +176,7 @@ export default class VoteApp extends React.Component {
175176
});
176177
}
177178
});
178-
179+
listInfo && console.log(listInfo);
179180
return (
180181
<div className="vote-app">
181182
<div className="vote-app__influence">
@@ -199,37 +200,33 @@ export default class VoteApp extends React.Component {
199200
<div>{listInfo.description}</div>
200201
<ul className="vote-app__items-list">
201202
{ listInfo.items.map(item => <li key={item.id}>
202-
<table className="vote-app__item-table">
203-
<tbody>
204-
<tr>
205-
<td className="vote-app__item-score">
206-
{item.score}
207-
</td>
208-
{listInfo.possibleVotes.map((voteSettings, idx) => {
209-
let vote = item.votes[idx];
210-
let userVote = item.userVotes && item.userVotes[idx];
211-
let currencyInfo = selfInfo && voteSettings.currency && this.findByName(selfInfo.currencies, voteSettings.currency);
212-
let maximum = voteSettings.maximum || 1000; // infinity
213-
let minimum = voteSettings.minimum || 0;
214-
let value = (userVote && userVote.votes) ? userVote.votes: 0;
215-
if(currencyInfo && currencyInfo.remaining + value < maximum) maximum = currencyInfo.remaining + value;
216-
return <td>
217-
<VoteButton
218-
className={"vote-app__vote-" + voteSettings.name}
219-
value={vote.votes} myValue={value}
220-
maxUp={userVote ? maximum - value : 0} maxDown={userVote ? value - minimum : 0}
221-
color={this.getColor(voteSettings.name)} onVote={(diffValue) => {
222-
this.vote(item.id, voteSettings.name, diffValue, voteSettings.currency, voteSettings.score);
223-
}} />
224-
</td>;
225-
})}
226-
<td className="vote-app__item-content">
227-
<span className="vote-app__item-title">{item.title}</span>
228-
<span>{item.description}</span>
229-
</td>
230-
</tr>
231-
</tbody>
232-
</table>
203+
<div className="vote-app__item-card">
204+
<div className="vote-app__score-section">
205+
<div className="vote-app__item-score">{item.score}</div>
206+
{listInfo.possibleVotes.map((voteSettings, idx) => {
207+
let vote = item.votes[idx];
208+
let userVote = item.userVotes && item.userVotes[idx];
209+
let currencyInfo = selfInfo && voteSettings.currency && this.findByName(selfInfo.currencies, voteSettings.currency);
210+
let maximum = voteSettings.maximum || 1000; // infinity
211+
let minimum = voteSettings.minimum || 0;
212+
let value = (userVote && userVote.votes) ? userVote.votes: 0;
213+
if(currencyInfo && currencyInfo.remaining + value < maximum) maximum = currencyInfo.remaining + value;
214+
return <div className="vote-app__item-button"><VoteItem
215+
className={"vote-app__vote-"+voteSettings.name}
216+
value={vote.votes} myValue={value}
217+
maxUp={userVote ? maximum - value : 0}
218+
maxDown={userVote ? value - minimum : 0}
219+
color={this.getColor(voteSettings.name)}
220+
onVote={(diffValue) => {
221+
this.vote(item.id, voteSettings.name, diffValue, voteSettings.currency, voteSettings.score);
222+
}}></VoteItem></div>;
223+
})}
224+
</div>
225+
<div className="vote-app__item-content">
226+
<span className="vote-app__item-title">{item.title}</span>
227+
<span>{item.description}</span>
228+
</div>
229+
</div>
233230
</li>)}
234231
{ listInfo.isAdmin && <li className="vote-app__admin">
235232
<div><input type="text" value={this.state.newTitle} disabled={inProgress} onChange={e => this.setState({newTitle: e.target.value})} /></div>

‎components/vote/button/button-style.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,30 @@
99
width: 90px;
1010
}
1111

12+
&__upDown {
13+
border: 0;
14+
padding: 0;
15+
margin: 0;
16+
}
17+
}
18+
19+
.vote-new-button {
20+
display: flex;
21+
22+
&__arrows {
23+
flex: 0 0 10%;
24+
}
25+
26+
&__value {
27+
font-size: 15pt;
28+
}
29+
30+
&__value, &__my-value{
31+
display: inline;
32+
margin-left: 5px;
33+
align-self: center;
34+
}
35+
1236
&__upDown {
1337
border: 0;
1438
padding: 0;

‎components/vote/button/new-button.jsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React, {Component} from 'react';
2+
import "./button-style.scss";
3+
4+
export default class NewButton extends Component {
5+
handleClick (e, n) {
6+
const {maxUp, maxDown, onVote} = this.props;
7+
onVote(Math.min(maxUp, Math.max(n, -maxDown)));
8+
e.preventDefault();
9+
return false;
10+
}
11+
12+
titleText (n, maxUp, maxDown) {
13+
n = Math.min(maxUp, Math.max(n, -maxDown));
14+
if(n === 0)
15+
return "";
16+
return n > 0 ? "+" + n : "" + n;
17+
}
18+
19+
makeTriangle (n, fn, size, minForEnabled) {
20+
const {maxUp, maxDown, color} = this.props;
21+
const enabled = n !== 0 && (n > 0 ? (maxUp >= minForEnabled) : (maxDown >= minForEnabled));
22+
const className = "vote-new-button__upDown";
23+
if(enabled) {
24+
return <a href="#"
25+
title={this.titleText(n, maxUp, maxDown)}
26+
onClick={e => this.handleClick(e, n)}
27+
className={className}>
28+
{fn({size: size, color: color})}
29+
</a>;
30+
} else {
31+
return <a
32+
className={className}>
33+
{fn({size: size, color: "#eee"})}
34+
</a>;
35+
}
36+
}
37+
render() {
38+
const {voteAppToken} = localStorage;
39+
const {color, className, value, myValue} = this.props;
40+
return voteAppToken ? (<div className="vote-new-button" style={{color: color}}>
41+
<div className="vote-new-button__arrows">
42+
{this.makeTriangle(1, triangleUp, 6, 1)}
43+
{this.makeTriangle(-1, triangleDown, 6, 1)}
44+
</div>
45+
<div className="vote-new-button__value" title={value + " was voted in total by all users."}>
46+
<span className={className}>{value}</span>
47+
</div>
48+
<div className="vote-new-button__my-value" title={myValue + " was voted by you."}>
49+
(<span className={className}>{myValue}</span>)
50+
</div>
51+
</div>): (<div className="vote-new-button" style={{color: color}}>
52+
<div className="vote-new-button__value" title={value + " was voted in total by all users."}>
53+
<span className={className}>{value}</span>
54+
</div>
55+
</div>);
56+
}
57+
}
58+
59+
function triangleUp({color, size}) {
60+
let path = `m ${size},0 -${size},${size / 3 * 2} ${size*2},0 z`;
61+
return <svg width={size*2} height={size/3*2}>
62+
<path d={path} style={{
63+
fill: color
64+
}}/>
65+
</svg>;
66+
}
67+
68+
function triangleDown({color, size}) {
69+
let path = `m ${size},${size / 3 * 2} ${size},-${size / 3 * 2} -${size*2},0 z`;
70+
return <svg width={size*2} height={size/3*2}>
71+
<path d={path} style={{
72+
fill: color
73+
}}/>
74+
</svg>;
75+
}

0 commit comments

Comments
 (0)