Merge pull request #420 from webpack/develop

Deploy

Author: sokra

components/sidebar-mobile/sidebar-mobile.jsx

@@ -181,7 +181,7 @@ export default class SidebarMobile extends React.Component {
   _handleTouchEnd(e){
     // Free up all the inline styling
     this.container.classList.remove('no-delay');
-    this.container.style = '';
+    this.container.style.transform = '';
 
     if (initialTouchPosition.x - lastTouchPosition.x > 100) {
       this._close();

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

@@ -1,7 +1,33 @@
 @import 'vars';
 @import 'mixins';
+@import 'functions';
 
 .vote-app {
+  margin: 1.5em;
+
+  &__influence-descriptions {
+    display: flex;
+    flex-direction: column;
+
+    @include break(medium) {
+      flex-direction: row;
+    }
+  }
+
+  &__influence-section {
+    flex: 0 0 100%;
+  }
+
+  &__influence-disclaimer {
+    padding: 1em 0;
+    flex: 0 0 100%;
+    font-size: smaller;
+    color: red;
+    @include break(medium) {
+      text-align: center;
+    }
+  }
+
   &__self-info {
     margin-top: 10px;
   }
@@ -36,6 +62,8 @@
 
   &__item-score {
     font-size: 150%;
+    width: 90px;
+    text-align: right;
   }
 
   &__items-list {

components/vote/app.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
+import 'whatwg-fetch';
 import SidebarItem from '../sidebar-item/sidebar-item';
 import * as api from "./api";
 import './app-style';
+import './influence-style';
 import VoteButton from './button/button';
+import Influence from './influence.jsx';
 
 function updateByProperty(array, property, propertyValue, update) {
   return array.map(item => {
@@ -26,7 +29,7 @@ export default class VoteApp extends React.Component {
   }
 
   isBrowserSupported() {
-    return typeof localStorage === 'object' && typeof fetch === 'function';
+    return typeof localStorage === 'object';
   }
 
   componentDidMount() {
@@ -114,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 && {
@@ -176,6 +179,15 @@ export default class VoteApp extends React.Component {
 
     return (
       <div className="vote-app">
+        <div className="vote-app__influence">
+          <div className="vote-app__influence-descriptions">  
+            <Influence className="vote-app__influence-section" type="normal"/>
+            <Influence className="vote-app__influence-section" type="golden"/>
+          </div>
+          <div className="vote-app__influence-disclaimer">
+            DISCLAIMER: Since this feature is its Alpha stages, the formula for calculating influence may change.
+          </div>
+        </div>
         {this.renderSelf()}
         { listInfo && <div>
           <button className="vote-app__update-button" disabled={inProgress} onClick={() => {
@@ -203,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)}

components/vote/influence-style.scss

@@ -0,0 +1,19 @@
+@import 'mixins';
+@import 'functions';
+
+.influence-info {
+  em {
+    font-weight: bolder;
+  }
+
+  i {
+    font-style: italic; 
+  }
+
+  &__section {
+    padding: 0.5em 0;
+    @include break(medium) {
+      padding: 0 .5em;
+    }
+  }
+}

components/vote/influence.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import './influence-style.scss';
+
+export default class InfluenceComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    
+    render() {
+        return (this.props.type === "normal" ? ( 
+            <section className="influence-info influence-info__section">
+                <h1 className="influence-info__header">What is Influence?</h1>
+                <p><em>Influence</em> is a unit of measure based on time you have been a member on github. However, in 2017 and on you will recieve one influence per day.</p>            
+            </section>
+        ) : (
+            <section className="influence-info influence-info__section">
+                <h1 className="influence-info__header">What is Golden Influence?</h1>
+                <p><em>Golden Influence</em> is equal to 100 <i>normal influence</i>. Golden Influence is obtained by being a backer or sponsor on our <a href="https://opencollective.com/webpack">Open Collective page</a>.</p>            
+            </section>
+        ));
+    }
+}

content/get-started/index.md

@@ -71,7 +71,7 @@ To bundle the `lodash` dependency with the `index.js`, we need to import `lodash
 __app/index.js__
 
 ```diff
-+ import _ from `lodash`;
++ import _ from 'lodash';
 
 function component () {
   ...

package.json

@@ -97,6 +97,7 @@
     "preact-compat": "^3.6.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
-    "react-router": "^2.8.1"
+    "react-router": "^2.8.1",
+    "whatwg-fetch": "^2.0.1"
   }
 }