Merge branch 'dashboard-update' into develop

Author: birdofpreyru

.exchange-rates.cache

@@ -1 +1 @@
-{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1520038805,"base":"USD","rates":{"AED":3.673014,"AFN":69.475,"ALL":107.5,"AMD":480.77,"ANG":1.784194,"AOA":215.1155,"ARS":20.264,"AUD":1.2889,"AWG":1.786505,"AZN":1.68825,"BAM":1.58875,"BBD":2,"BDT":82.977763,"BGN":1.58816,"BHD":0.377075,"BIF":1775,"BMD":1,"BND":1.321966,"BOB":6.910011,"BRL":3.2528,"BSD":1,"BTC":0.00009030383,"BTN":65.19905,"BWP":9.578914,"BYN":1.965596,"BZD":2.009098,"CAD":1.288544,"CDF":1615,"CHF":0.938145,"CLF":0.0225,"CLP":598.8,"CNH":6.330917,"CNY":6.3484,"COP":2867,"CRC":569.71,"CUC":1,"CUP":25.5,"CVE":89.7375,"CZK":20.5919,"DJF":177.075,"DKK":6.04549,"DOP":49.13,"DZD":114.04071,"EGP":17.641,"ERN":14.996667,"ETB":27.56,"EUR":0.81179,"FJD":2.021996,"FKP":0.7246,"GBP":0.7246,"GEL":2.463723,"GGP":0.7246,"GHS":4.46,"GIP":0.7246,"GMD":47.2,"GNF":9000,"GTQ":7.373907,"GYD":206.445,"HKD":7.830598,"HNL":23.601015,"HRK":6.038184,"HTG":64.297808,"HUF":254.66,"IDR":13730.326709,"ILS":3.442442,"IMP":0.7246,"INR":65.1967,"IQD":1183,"IRR":37302.484098,"ISK":100.59,"JEP":0.7246,"JMD":127.1499,"JOD":0.709001,"JPY":105.75296581,"KES":101.3855,"KGS":68.035298,"KHR":4002,"KMF":399.45,"KPW":900,"KRW":1079.65,"KWD":0.299888,"KYD":0.832789,"KZT":322.647036,"LAK":8305,"LBP":1512.5,"LKR":155.13,"LRD":130.5,"LSL":11.91,"LYD":1.33,"MAD":9.2,"MDL":16.695982,"MGA":3117.5,"MKD":49.983876,"MMK":1339.7,"MNT":2390.948643,"MOP":8.06072,"MRO":356,"MRU":35.3,"MUR":33.04,"MVR":15.460011,"MWK":725.725,"MXN":18.812575,"MYR":3.930279,"MZN":61.855,"NAD":11.915,"NGN":360.5,"NIO":31.085,"NOK":7.796875,"NPR":104.297226,"NZD":1.382,"OMR":0.384918,"PAB":1,"PEN":3.2565,"PGK":3.195,"PHP":51.939,"PKR":110.65,"PLN":3.4003,"PYG":5550.4,"QAR":3.641996,"RON":3.782471,"RSD":95.696456,"RUB":56.815,"RWF":856,"SAR":3.75015,"SBD":7.76394,"SCR":13.699823,"SDG":18.01,"SEK":8.2507,"SGD":1.319653,"SHP":0.7246,"SLL":7668.450022,"SOS":582,"SRD":7.468,"SSP":130.2634,"STD":19933.390132,"STN":19.985,"SVC":8.745727,"SYP":514.98999,"SZL":11.91,"THB":31.4455,"TJS":8.820764,"TMT":3.499986,"TND":2.4212,"TOP":2.217721,"TRY":3.806784,"TTD":6.73915,"TWD":29.283,"TZS":2254.1,"UAH":26.5275,"UGX":3648.3,"USD":1,"UYU":28.40176,"UZS":8180,"VEF":28960,"VND":22757.110027,"VUV":105.255077,"WST":2.5271,"XAF":532.499333,"XAG":0.06061195,"XAU":0.00075614,"XCD":2.70255,"XDR":0.689644,"XOF":532.499333,"XPD":0.00100706,"XPF":96.872315,"XPT":0.00103467,"YER":250.325,"ZAR":11.923195,"ZMW":9.74,"ZWL":322.355011}}
+{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1520089201,"base":"USD","rates":{"AED":3.673014,"AFN":69.475,"ALL":107.5,"AMD":480.77,"ANG":1.784194,"AOA":215.1155,"ARS":20.264,"AUD":1.287333,"AWG":1.786505,"AZN":1.68825,"BAM":1.58875,"BBD":2,"BDT":82.977763,"BGN":1.58816,"BHD":0.377075,"BIF":1775,"BMD":1,"BND":1.321966,"BOB":6.910011,"BRL":3.2527,"BSD":1,"BTC":0.000087767587,"BTN":65.19905,"BWP":9.578914,"BYN":1.965596,"BZD":2.009098,"CAD":1.288544,"CDF":1615,"CHF":0.938145,"CLF":0.0225,"CLP":598.8,"CNH":6.330917,"CNY":6.3484,"COP":2867,"CRC":569.71,"CUC":1,"CUP":25.5,"CVE":89.7375,"CZK":20.5916,"DJF":177.075,"DKK":6.0457,"DOP":49.13,"DZD":114.04071,"EGP":17.641,"ERN":14.996667,"ETB":27.56,"EUR":0.81179,"FJD":2.021996,"FKP":0.7246,"GBP":0.7246,"GEL":2.463723,"GGP":0.7246,"GHS":4.46,"GIP":0.7246,"GMD":47.2,"GNF":9000,"GTQ":7.373907,"GYD":206.445,"HKD":7.83065,"HNL":23.601015,"HRK":6.038184,"HTG":64.297808,"HUF":254.66,"IDR":13730.326709,"ILS":3.442442,"IMP":0.7246,"INR":65.1967,"IQD":1183,"IRR":37302.484098,"ISK":100.59,"JEP":0.7246,"JMD":127.1499,"JOD":0.709001,"JPY":105.75296581,"KES":101.3855,"KGS":68.035298,"KHR":4002,"KMF":399.45,"KPW":900,"KRW":1079.43,"KWD":0.299888,"KYD":0.832789,"KZT":322.647036,"LAK":8305,"LBP":1512.5,"LKR":155.13,"LRD":130.5,"LSL":11.91,"LYD":1.33,"MAD":9.2,"MDL":16.695982,"MGA":3117.5,"MKD":49.983876,"MMK":1339.7,"MNT":2390.948643,"MOP":8.06072,"MRO":356,"MRU":35.3,"MUR":33.04,"MVR":15.460011,"MWK":725.725,"MXN":18.8111,"MYR":3.930279,"MZN":61.855,"NAD":11.915,"NGN":360.5,"NIO":31.085,"NOK":7.795175,"NPR":104.297226,"NZD":1.382,"OMR":0.384918,"PAB":1,"PEN":3.2565,"PGK":3.195,"PHP":51.939,"PKR":110.65,"PLN":3.40025,"PYG":5550.4,"QAR":3.641996,"RON":3.782471,"RSD":95.696456,"RUB":56.815,"RWF":856,"SAR":3.75015,"SBD":7.76394,"SCR":13.699823,"SDG":18.01,"SEK":8.2507,"SGD":1.319697,"SHP":0.7246,"SLL":7668.450022,"SOS":582,"SRD":7.468,"SSP":130.2634,"STD":19933.390132,"STN":19.985,"SVC":8.745727,"SYP":514.98999,"SZL":11.91,"THB":31.4465,"TJS":8.820764,"TMT":3.499986,"TND":2.4212,"TOP":2.217721,"TRY":3.806784,"TTD":6.73915,"TWD":29.283,"TZS":2254.1,"UAH":26.5275,"UGX":3648.3,"USD":1,"UYU":28.40176,"UZS":8180,"VEF":28960,"VND":22757.110027,"VUV":105.255077,"WST":2.5271,"XAF":532.499333,"XAG":0.06061195,"XAU":0.00075614,"XCD":2.70255,"XDR":0.689644,"XOF":532.499333,"XPD":0.00100706,"XPF":96.872315,"XPT":0.00103467,"YER":250.325,"ZAR":11.923055,"ZMW":9.74,"ZWL":322.355011}}

src/shared/components/Carousel.jsx

@@ -0,0 +1,109 @@
+/**
+ * A standard carousel component.
+ *
+ * Currently this is a wrapper arround nuka-carousel, that improves its
+ * responsiveness to the viewport size changes:
+ * - Shows / hides scrolling buttons when necessary;
+ * - Aligns the content in center when all cards can be shown at once.
+ */
+
+/* global window */
+
+import Nuka from 'nuka-carousel';
+import PT from 'prop-types';
+import React from 'react';
+
+/* We have to use state component, as we need to manipulate with DOM nodes to
+ * access nuka-carousel state. */
+export default class Carousel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.check = this.check.bind(this);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.check);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.check);
+  }
+
+  /**
+   * Checks carousel state to determine, whether the left / right arrows should
+   * be shown.
+   */
+  check() {
+    if (!this.carousel) return;
+    const st = this.carousel.state;
+    const showNext = st.currentSlide < st.slideCount - st.slidesToScroll;
+    const showPrev = st.left < 0;
+    if (showNext !== this.state.showNext
+    || showPrev !== this.state.showPrev) {
+      this.setState({ showPrev, showNext });
+    }
+  }
+
+  render() {
+    const { children, NextButton, PrevButton } = this.props;
+    const st = this.state;
+    const decorators = [];
+    if (st.showNext && NextButton) {
+      decorators.push({
+        component: () => (
+          <NextButton
+            onClick={() => this.carousel && this.carousel.nextSlide()}
+          />
+        ),
+        position: 'CenterRight',
+        style: {
+          cursor: 'pointer',
+          marginRight: 40,
+        },
+      });
+    }
+    if (st.showPrev && PrevButton) {
+      decorators.push({
+        component: () => (
+          <PrevButton
+            onClick={() => this.carousel && this.carousel.previousSlide()}
+          />
+        ),
+        position: 'CenterLeft',
+        style: {
+          cursor: 'pointer',
+          marginLeft: 40,
+        },
+      });
+    }
+    return (
+      <Nuka
+        {...this.props}
+        afterSlide={() => setImmediate(() => this.check())}
+        decorators={decorators}
+        framePadding="0 100px"
+        ref={(node) => {
+          this.carousel = node;
+          if (node) this.check();
+        }}
+        slidesToScroll="auto"
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >{children}</Nuka>
+    );
+  }
+}
+
+Carousel.defaultProps = {
+  NextButton: null,
+  PrevButton: null,
+};
+
+Carousel.propTypes = {
+  children: PT.node.isRequired,
+  NextButton: PT.func,
+  PrevButton: PT.func,
+};

src/shared/components/Dashboard/Announcement/style.scss

@@ -5,11 +5,15 @@
   background-size: cover;
   border-bottom: 1px solid $tc-gray-neutral-dark;
   display: flex;
-  height: 480px;
+  min-height: 480px;
   max-width: $screen-lg;
   padding: 30px;
   position: relative;
   width: 100%;
+
+  @include xs-to-sm {
+    flex-direction: column;
+  }
 }
 
 .details {
@@ -81,6 +85,11 @@
 .video {
   flex: 1;
   margin: 35px 30px 35px 0;
+
+  @include xs-to-sm {
+    align-self: stretch;
+    margin-bottom: 0;
+  }
 }
 
 .hidden {

src/shared/components/Dashboard/MemberMetrics/Earnings/Dial/style.scss

@@ -6,6 +6,7 @@
   margin: 0 auto;
   padding: 20px 30px;
   text-align: center;
+  width: 300px;
 }
 
 .content {

src/shared/components/Dashboard/MemberMetrics/Earnings/index.jsx

@@ -1,11 +1,14 @@
 import _ from 'lodash';
+import Carousel from 'components/Carousel';
 import config from 'utils/config';
 import PT from 'prop-types';
 import React from 'react';
 
 import { Link } from 'topcoder-react-utils';
 
 import Dial from './Dial';
+import LArrow from '../../../../../assets/images/arrow-prev.svg';
+import RArrow from '../../../../../assets/images/arrow-next.svg';
 
 import './style.scss';
 
@@ -37,24 +40,30 @@ export default function Earnings({ finances, showEarnings }) {
   if (owed && paid) {
     return (
       <div styleName="container">
-        <Dial
-          amount={paid}
-          show={showEarnings}
-          title="Paid"
-          url={PACTS_FULL_URL}
-        />
-        <Dial
-          amount={owed}
-          show={showEarnings}
-          title="Owed"
-          url={PACTS_OWED_URL}
-        />
-        <Dial
-          amount={total}
-          show={showEarnings}
-          title="Total"
-          url={PACTS_FULL_URL}
-        />
+        <Carousel
+          NextButton={RArrow}
+          PrevButton={LArrow}
+          slideWidth="300px"
+        >
+          <Dial
+            amount={paid}
+            show={showEarnings}
+            title="Paid"
+            url={PACTS_FULL_URL}
+          />
+          <Dial
+            amount={owed}
+            show={showEarnings}
+            title="Owed"
+            url={PACTS_OWED_URL}
+          />
+          <Dial
+            amount={total}
+            show={showEarnings}
+            title="Total"
+            url={PACTS_FULL_URL}
+          />
+        </Carousel>
       </div>
     );
   }

src/shared/components/Dashboard/MemberMetrics/Records/index.jsx

@@ -1,12 +1,14 @@
 import _ from 'lodash';
-import Carousel from 'nuka-carousel';
+import Carousel from 'components/Carousel';
 import PT from 'prop-types';
 import React from 'react';
 
 import Dial from './Dial';
 import LArrow from '../../../../../assets/images/arrow-prev.svg';
 import RArrow from '../../../../../assets/images/arrow-next.svg';
 
+import './style.scss';
+
 /**
  * Transforms stats object to a more convenient array representation.
  * @param {Object} stats
@@ -59,95 +61,29 @@ function transformStats(stats) {
   return res;
 }
 
-export default class Records extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  check() {
-    if (!this.carousel) return;
-    const st = this.carousel.state;
-    const showLeft = Boolean(st.currentSlide);
-    const showRight = st.currentSlide < st.slideCount - st.slidesToScroll;
-    const align = st.slideCount === 'auto'
-    || st.slidesToScroll >= st.slideCount;
-    if (showLeft === this.state.showLeft
-    && showRight === this.state.showRight
-    && align === this.state.align) return;
-    this.setState({ align, showLeft, showRight });
-  }
-
-  render() {
-    const st = this.state;
-    const { stats } = this.props;
-
-    const decorators = [];
-    if (st.showLeft) {
-      decorators.push({
-        component: () => (
-          <LArrow
-            onClick={() => this.carousel && this.carousel.previousSlide()}
-          />
-        ),
-        position: 'CenterLeft',
-        style: {
-          cursor: 'pointer',
-          marginLeft: 40,
-        },
-      });
-    }
-    if (st.showRight) {
-      decorators.push({
-        component: () => (
-          <RArrow
-            onClick={() => this.carousel && this.carousel.nextSlide()}
-          />
-        ),
-        position: 'CenterRight',
-        style: {
-          cursor: 'pointer',
-          marginRight: 40,
-        },
-      });
-    }
-
-    return (
-      <div
-        style={{ display: this.state.align ? 'inline-block' : 'block' }}
+export default function Records({ stats }) {
+  return (
+    <div>
+      <Carousel
+        NextButton={RArrow}
+        PrevButton={LArrow}
+        slideWidth="200px"
       >
-        <Carousel
-          afterSlide={() => setImmediate(() => this.check())}
-          decorators={decorators}
-          framePadding="0 100px"
-          ref={(node) => {
-            this.carousel = node;
-            if (node) this.check();
-          }}
-          slidesToScroll="auto"
-          slideWidth="200px"
-          width={
-            this.state.align ? (
-              (200 * this.carousel.state.slideCount) + 200
-            ) : '100%'
-          }
-        >
-          {
-            transformStats(stats).map(item => (
-              <Dial
-                key={`${item.track}-${item.subTrack}`}
-                handle={stats.handle}
-                track={item.track}
-                subTrack={item.subTrack}
-                metric={item.metric}
-                value={item.value}
-              />
-            ))
-          }
-        </Carousel>
-      </div>
-    );
-  }
+        {
+          transformStats(stats).map(item => (
+            <Dial
+              key={`${item.track}-${item.subTrack}`}
+              handle={stats.handle}
+              track={item.track}
+              subTrack={item.subTrack}
+              metric={item.metric}
+              value={item.value}
+            />
+          ))
+        }
+      </Carousel>
+    </div>
+  );
 }
 
 Records.propTypes = {

src/shared/components/Dashboard/MemberMetrics/Records/style.scss

@@ -0,0 +1,4 @@
+.container {
+  display: flex;
+  justify-content: center;
+}

src/shared/components/Dashboard/MemberMetrics/style.scss

@@ -52,5 +52,5 @@
 
   position: absolute;
   right: 25px;
-  top: 30px;
+  top: 10px;
 }

src/shared/components/Dashboard/style.scss

@@ -4,6 +4,7 @@
   background: $tc-gray-neutral-dark;
   flex: 1;
   padding: 20px 30px;
+  width: 100%;
 
   @include xs-to-sm {
     padding: 0;