Added new logic for the vote button and some CSS modifications for the mobile

Author: NejcZdovc

components/vote/api.dev.js

@@ -12,16 +12,13 @@ let lists = {
       {
         name: "influence",
         currency: "influence",
-        maximum: 30,
         score: 1,
-        step: 2,
         color: "blue"
       },
       {
         name: "golden",
         currency: "goldenInfluence",
         score: 1,
-        step: 10,
         color: "#bfa203"
       }
     ],

components/vote/app-style.scss

@@ -29,7 +29,11 @@
 
   &__user-section {
     flex: 0 0 25%;
-    padding-left: 20px;
+    padding: 0 0 30px;
+
+    @include break(medium) {
+      padding: 0 0 0 20px;
+    }
 
     @include break(large) {
       border-left: 2px solid getColor(elephant);
@@ -44,6 +48,7 @@
     padding: 1em 0;
     font-size: smaller;
     color: red;
+
     @include break(medium) {
       text-align: center;
     }
@@ -141,27 +146,42 @@
     display: flex;
     flex: 0 0 40%;
     border: 1px solid lightgray;
-    padding: 0 0 0 20px;
-    margin-right: 30px;
+    user-select: none;
+    flex-wrap: wrap;
+
+    @include break(medium){
+      margin-right: 30px;
+      padding: 0 0 0 20px;
+    }
   }
 
   &__item-score {
     align-self: center;
     font-size: 20pt;
-    flex: 0 0 20%;
+    flex: 0 0 100%;
+    text-align: center;
+
+    @include break(medium){
+      flex: 0 0 20%;
+      text-align: left;
+    }
   }
 
   &__item-button {
-      flex: 0 0 40%;
+    flex: 0 0 50%;
       align-self: center;
+
+    @include break(medium){
+      flex: 0 0 40%;
+    }
   }
 
   &__items-list {
     display: block;
 
     & > li {
       display: block;
-      padding: 5px;
+      padding: 5px 0;
     }
   }
 

components/vote/app.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import 'whatwg-fetch';
-import SidebarItem from '../sidebar-item/sidebar-item';
 import * as api from "./api";
 import VoteButton from './button/button';
 import Influence from './influence.jsx';
@@ -211,16 +210,19 @@ export default class VoteApp extends React.Component {
                     let value = (userVote && userVote.votes) ? userVote.votes: 0;
                     if(currencyInfo && currencyInfo.remaining + value < maximum) maximum = currencyInfo.remaining + value;
                     return <div className="vote-app__item-button">
-                    <VoteButton
-                      className={"vote-app__vote-"+voteSettings.name}
-                      value={vote.votes} myValue={value}
-                      maxUp={userVote ? maximum - value : 0}
-                      maxDown={userVote ? value - minimum : 0}
-                      color={this.getColor(voteSettings.name)}
-                      isLoggedIn = {!!voteAppToken}
-                      onVote={(diffValue) => {
-                        this.vote(item.id, voteSettings.name, diffValue, voteSettings.currency, voteSettings.score);
-                      }}></VoteButton></div>;
+                      <VoteButton
+                        className={"vote-app__vote-" + voteSettings.name}
+                        value={vote.votes}
+                        myValue={value}
+                        maxUp={userVote ? maximum - value : 0}
+                        maxDown={userVote ? value - minimum : 0}
+                        color={this.getColor(voteSettings.name)}
+                        isLoggedIn = {!!voteAppToken}
+                        onVote={(diffValue) => {
+                          this.vote(item.id, voteSettings.name, diffValue, voteSettings.currency, voteSettings.score);
+                        }}
+                      />
+                    </div>;
                   })}
                 </div>
                 <div className="vote-app__item-content">

components/vote/button/button-style.scss

@@ -1,3 +1,7 @@
+@import 'vars';
+@import 'mixins';
+@import 'functions';
+
 .vote-button {
   text-align: center;
   &__value {
@@ -18,6 +22,11 @@
 
 .vote-new-button {
   display: flex;
+  justify-content: center;
+
+  @include break(medium) {
+    justify-content: inherit;
+  }
 
   &__arrows {
     flex: 0 0 10%;
@@ -37,6 +46,7 @@
     border: 0;
     padding: 0;
     margin: 0;
+    cursor: pointer;
   }
 
   &__logout-value {

components/vote/button/button.jsx

@@ -1,11 +1,9 @@
 import React, {Component} from 'react';
-import "./button-style.scss";
 
 export default class NewButton extends Component {
-  handleClick (e, n) {
+  handleClick (n) {
     const {maxUp, maxDown, onVote} = this.props;
     onVote(Math.min(maxUp, Math.max(n, -maxDown)));
-    e.preventDefault();
     return false;
   }
 
@@ -16,30 +14,90 @@ export default class NewButton extends Component {
     return n > 0 ? "+" + n : "" + n;
   }
 
-  makeTriangle (n, fn, size, minForEnabled) {
+  makeTriangle (n, fn, size, minForEnabled, increase) {
     const {maxUp, maxDown, color} = this.props;
     const enabled = n !== 0 && (n > 0 ? (maxUp >= minForEnabled) : (maxDown >= minForEnabled));
     const className = "vote-new-button__upDown";
+
     if(enabled) {
-      return <a href="#"
+      return <span
         title={this.titleText(n, maxUp, maxDown)}
-        onClick={e => this.handleClick(e, n)}
-        className={className}>
-          {fn({size: size, color: color})}
-      </a>;
+        onClick={() => this.handleClick(n)}
+        onMouseDown={() => this.startCounter(increase)}
+        onMouseUp={() => this.stopCounter()}
+        onMouseOut={() => this.stopCounter()}
+        onTouchStart={() => this.startCounter(increase)}
+        onTouchEnd={() => this.stopCounter()}
+        onTouchCancel={() => this.stopCounter()}
+        className={className}
+      >
+        {fn({size: size, color: color})}
+      </span>;
     } else {
-      return <a
-        className={className}>
-          {fn({size: size, color: "#eee"})}
-      </a>;
+      return <span
+        className={className}
+      >
+        {fn({size: size, color: "#eee"})}
+      </span>;
     }
   }
+
+  startCounter(increase) {
+    let current = 0;
+    let add = 0;
+    const that = this;
+
+      if (this.interval) {
+          clearInterval(this.interval);
+      }
+
+    this.interval = setInterval(function() {
+        // increase for 1 between 0 and 5
+      if(current <= 5) {
+          current++;
+          add = 1;
+      }
+      // increase for 2 between 6 and 10
+      else if(current <= 10) {
+          current+=2;
+          add = 2;
+      }
+      // increase for 5 between 11 and 40
+      else if(current <= 40) {
+          current+=5;
+          add = 5;
+      }
+      // increase for 10 between 41 and 70
+      else if(current <= 70) {
+          current+=10;
+          add = 10;
+      }
+      // increase for 15 after 71
+      else {
+          current+=15;
+          add = 15;
+      }
+
+      if(!increase) {
+          add *= -1;
+      }
+
+      that.handleClick(add);
+    }, 200);
+  }
+
+  stopCounter() {
+      if (this.interval) {
+        clearInterval(this.interval);
+      }
+  }
+
   render() {
     const {color, className, value, myValue, isLoggedIn} = this.props;
     return isLoggedIn ? (<div className="vote-new-button" style={{color: color}}>
     <div className="vote-new-button__arrows">
-      {this.makeTriangle(1, triangleUp, 10, 1)}
-      {this.makeTriangle(-1, triangleDown, 10, 1)}
+      {this.makeTriangle(1, triangleUp, 10, 1, true)}
+      {this.makeTriangle(-1, triangleDown, 10, 1, false)}
     </div>
     <div className="vote-new-button__value" title={value + " was voted in total by all users."}>
       <span className={className}>{value}</span>