Merge pull request #419 from webpack/feature/vote

bugfixes and improvments in the vote app

Author: sokra

components/vote/api.js

@@ -8,7 +8,7 @@ import {
   vote as devVote
 } from "./api.dev";
 
-const API_URL = "https://ipttmcpme6.execute-api.us-east-1.amazonaws.com/production";
+const API_URL = "https://oswils44oj.execute-api.us-east-1.amazonaws.com/production/";
 const GITHUB_CLIENT_ID = "4d355e2799cb8926c665";
 const PRODUCTION_HOST = "webpack.js.org";
 

components/vote/app-style.scss

@@ -62,6 +62,8 @@
 
   &__item-score {
     font-size: 150%;
+    width: 90px;
+    text-align: right;
   }
 
   &__items-list {

components/vote/app.jsx

@@ -117,7 +117,7 @@ export default class VoteApp extends React.Component {
             ...vote,
             votes: vote.votes + diffValue
           })),
-          score: item.score + score
+          score: item.score + score * diffValue
         }))
       },
       selfInfo: selfInfo && {
@@ -215,8 +215,8 @@ export default class VoteApp extends React.Component {
                       return <td>
                         <VoteButton 
                           className={"vote-app__vote-" + voteSettings.name}
-                          value={vote.votes} myValue={userVote.votes} 
-                          maxUp={maximum - userVote.votes} maxDown={userVote.votes - minimum} 
+                          value={vote.votes} myValue={value}
+                          maxUp={userVote ? maximum - value : 0} maxDown={userVote ? value - minimum : 0} 
                           color={this.getColor(voteSettings.name)} onVote={(diffValue) => {
                             this.vote(item.id, voteSettings.name, diffValue, voteSettings.currency, voteSettings.score);
                           }} />

components/vote/button/button-style.scss

@@ -4,11 +4,12 @@
     font-size: 150%;
   }
 
-  &__value, &__my-value, &__upMax, &__up10, &__up1, &__down1, &__down10, &__downMax {
+  &__value, &__my-value, &__upDown {
     display: block;
+    width: 90px;
   }
 
-  &__upMax, &__up10, &__up1, &__down1, &__down10, &__downMax {
+  &__upDown {
     border: 0;
     padding: 0;
     margin: 0;

components/vote/button/button.jsx

@@ -18,21 +18,33 @@ export default (props) => {
   };
 
   let makeTriangle = (n, fn, size, minForEnabled) => {
-    const enabled = n > 0 ? (maxUp >= minForEnabled) : (maxDown >= minForEnabled);
-    return <a href="#"
-      title={titleText(n)} 
-      onClick={e => click(e, n)} 
-      className="vote-button__upMax">
-        {fn({size: size, color: enabled ? color : "transparent"})}
-    </a>;
+    const enabled = n !== 0 && (n > 0 ? (maxUp >= minForEnabled) : (maxDown >= minForEnabled));
+    const className = "vote-button__upDown";
+    if(enabled) {
+      return <a href="#"
+        title={titleText(n)}
+        onClick={e => click(e, n)}
+        className={className}>
+          {fn({size: size, color: color})}
+      </a>;
+    } else {
+      return <a
+        className={className}>
+          {fn({size: size, color: "#eee"})}
+      </a>;
+    }
   };
 
   return <div className="vote-button" style={{color: color}}>
     {makeTriangle(Infinity, triangleUp, 30, 11)}
     {makeTriangle(10, triangleUp, 20, 2)}
     {makeTriangle(1, triangleUp, 15, 1)}
-    <div className="vote-button__value"><span className={className}>{value}</span></div>
-    <div className="vote-button__my-value">(<span className={className}>{myValue}</span>)</div>
+    <div className="vote-button__value" title={value + " was voted in total by all users."}>
+      <span className={className}>{value}</span>
+    </div>
+    <div className="vote-button__my-value" title={myValue + " was voted by you."}>
+      (<span className={className}>{myValue}</span>)
+    </div>
     {makeTriangle(-1, triangleDown, 15, 1)}
     {makeTriangle(-10, triangleDown, 20, 2)}
     {makeTriangle(-Infinity, triangleDown, 30, 11)}