Update new page design

2018-02-15 21:33:13 +02:00 · 2018-02-15 21:33:13 +02:00 · d6ae1c11cf
parent d531577bdb
commit d6ae1c11cf
9 changed files with 1768 additions and 1281 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -39,6 +39,7 @@
    "mobx-react-router": "^4.0.1",
    "moment": "^2.20.1",
    "node-sass-chokidar": "0.0.3",
+    "nodemon": "^1.14.12",
    "npm-run-all": "^4.1.2",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
@ -65,8 +66,8 @@
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build -o origin",
-    "build-css": "node-sass-chokidar src/assets/App.scss -o src/assets",
-    "watch-css": "npm run build-css && node-sass-chokidar src/assets/App.scss -o src/assets/src/assets --watch",
+    "build-css": "node-sass-chokidar src/assets/App.scss -o src/assets --output-style=compressed",
+    "watch-css": "nodemon -e scss -x \"npm run build-css\"",
    "start-js": "node scripts/start.js",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "node scripts/build.js",
--- a/src/assets/App.css
+++ b/src/assets/App.css
--- a/src/assets/App.scss
+++ b/src/assets/App.scss
@ -14,6 +14,7 @@
@import 'stylesheets/settings';
@import 'stylesheets/socials';
@import 'stylesheets/vote-scale';
+@import 'stylesheets/ballot-types';
@import 'stylesheets/ballots/placeholders';
@import 'stylesheets/ballots/base';
@import 'stylesheets/ballots/about';
@ -23,4 +24,4 @@
@import 'stylesheets/select/menu';
@import 'stylesheets/select/mixins';
@import 'stylesheets/select/multi';
-@import 'stylesheets/select/spinner';
+@import 'stylesheets/select/spinner';
--- a/src/assets/stylesheets/ballot-types.scss
+++ b/src/assets/stylesheets/ballot-types.scss
@ -0,0 +1,30 @@
+.ballot-types {
+  border-bottom: 1px solid #e5eef9;
+  padding: 0 30px 10px;
+
+  &-i {
+    cursor: pointer;
+    position: relative;
+    margin-bottom: 20px;
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: -30px;
+      top: 50%;
+      opacity: 0;
+      height: 30px;
+      width: 3px;
+      transform: translateY(-50%);
+      background-color: #08b3f2;
+    }
+
+    &_active {
+      color: #08b3f2;
+
+      &:before {
+        opacity: 1;
+      }
+    }
+  }
+}
--- a/src/assets/stylesheets/controls.scss
+++ b/src/assets/stylesheets/controls.scss
@ -6,7 +6,8 @@ label {
  font-family: 'Open Sans', sans-serif;
 }

-input {
+input,
+textarea {
  @extend %form-el;

  &:focus {
@ -18,6 +19,14 @@ input {
  }
 }

+textarea {
+  width: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  height: 70px;
+  resize: none;
+}
+
 select {
  @include image-2x('./images/select@2x.png', 8px, 4px);
  @extend %form-el;
--- a/src/assets/stylesheets/info.scss
+++ b/src/assets/stylesheets/info.scss
@ -1,15 +1,54 @@
 .info {
-  @include image-2x('./images/info@2x.png', 32px, 32px);
-  display: flex;
-  align-items: center;
-  padding-left: 44px;
-  min-height: 32px;
-  background-image: url(./images/info.png);
-  background-repeat: no-repeat;
-  background-position: left center;
  color: #8197a2;

  .ballots & {
-    margin-bottom: 20px;
+    @include image-2x('./images/info@2x.png', 32px, 32px);
+    display: flex;
+    align-items: center;
+    padding-left: 44px;
+    min-height: 32px;
+    background-image: url(./images/info.png);
+    background-repeat: no-repeat;
+    background-position: left center;
+  }
+
+  .new-form & {
+    padding: 30px;
+  }
+
+  &-title {
+    position: relative;
+    margin-bottom: 30px;
+    padding-left: 44px;
+
+    &:before {
+      @include image-2x('./images/info@2x.png', 32px, 32px);
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+  &-i {
+    position: relative;
+    margin-bottom: 10px;
+    padding-left: 12px;
+    line-height: 18px;
+    font-size: 12px;
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 7px;
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background-color: #08b3f2;
+    }
  }
 }
--- a/src/assets/stylesheets/new.scss
+++ b/src/assets/stylesheets/new.scss
@ -1,15 +1,41 @@
 .new {
  &-form {
    @extend %white-block;
+    display: flex;
    overflow: hidden;
+    padding: 0;

-    &-footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+    @media screen and (max-width: $tablet-width) {
+      display: block;
+    }

-      @media screen and (max-width: $mobile-width) {
-        flex-direction: column;
+    &-side {
+      padding-top: 30px;
+      padding-bottom: 30px;
+      box-sizing: border-box;
+
+      @media screen and (max-width: $tablet-width) {
+        width: 100% !important;
+      }
+
+      &_left {
+        width: 30%;
+
+        @media screen and (max-width: $tablet-width) {
+          padding-bottom: 0;
+        }
+      }
+
+      &_right {
+        width: 70%;
+        border-left: 1px solid #e5eef9;
+        padding-left: 30px;
+        padding-right: 30px;
+
+        @media screen and (max-width: $tablet-width) {
+          border: 0;
+          padding-top: 0;
+        }
      }
    }
  }
--- a/src/components/NewBallot.jsx
+++ b/src/components/NewBallot.jsx
@ -107,8 +107,8 @@ export class NewBallot extends React.Component {
    const inputToMethod = {
      startTime: curDateInSeconds,
      endTime: ballotStore.endTimeUnix,
-      affectedKey: ballotStore.ballotKeys.affectedKey, 
-      affectedKeyType: ballotStore.ballotKeys.keyType, 
+      affectedKey: ballotStore.ballotKeys.affectedKey,
+      affectedKeyType: ballotStore.ballotKeys.keyType,
      miningKey: ballotStore.ballotKeys.miningKey.value,
      ballotType: ballotStore.ballotKeys.keysBallotType,
      sender: contractsStore.votingKey,
@ -123,7 +123,7 @@ export class NewBallot extends React.Component {
    const inputToMethod = {
      startTime: curDateInSeconds,
      endTime: ballotStore.endTimeUnix,
-      proposedValue: ballotStore.ballotMinThreshold.proposedValue, 
+      proposedValue: ballotStore.ballotMinThreshold.proposedValue,
      sender: contractsStore.votingKey,
      memo: ballotStore.memo
    };
@ -136,7 +136,7 @@ export class NewBallot extends React.Component {
    const inputToMethod = {
      startTime: curDateInSeconds,
      endTime: ballotStore.endTimeUnix,
-      proposedValue: ballotStore.ballotProxy.proposedAddress, 
+      proposedValue: ballotStore.ballotProxy.proposedAddress,
      contractType: ballotStore.ballotProxy.contractType,
      sender: contractsStore.votingKey,
      memo: ballotStore.memo
@ -159,8 +159,8 @@ export class NewBallot extends React.Component {
    if (isFormValid) {
      if (ballotStore.ballotType === ballotStore.BallotType.keys) {
        const inputToAreBallotParamsValid = {
-          affectedKey: ballotStore.ballotKeys.affectedKey, 
-          affectedKeyType: ballotStore.ballotKeys.keyType, 
+          affectedKey: ballotStore.ballotKeys.affectedKey,
+          affectedKeyType: ballotStore.ballotKeys.keyType,
          miningKey: ballotStore.ballotKeys.miningKey.value,
          ballotType: ballotStore.ballotKeys.keysBallotType
        };
@ -173,13 +173,13 @@ export class NewBallot extends React.Component {

      let methodToCreateBallot;
      switch (ballotStore.ballotType) {
-        case ballotStore.BallotType.keys: 
+        case ballotStore.BallotType.keys:
          methodToCreateBallot = this.createBallotForKeys;
          break;
-        case ballotStore.BallotType.minThreshold: 
+        case ballotStore.BallotType.minThreshold:
          methodToCreateBallot = this.createBallotForMinThreshold;
          break;
-        case ballotStore.BallotType.proxy: 
+        case ballotStore.BallotType.proxy:
          methodToCreateBallot = this.createBallotForProxy;
          break;
        default:
@ -212,15 +212,15 @@ export class NewBallot extends React.Component {
    let metadata
    let minThreshold = 0;
    switch (ballotStore.ballotType) {
-      case ballotStore.BallotType.keys: 
+      case ballotStore.BallotType.keys:
        metadata = <BallotKeysMetadata />;
        minThreshold = contractsStore.keysBallotThreshold;
        break;
-      case ballotStore.BallotType.minThreshold: 
+      case ballotStore.BallotType.minThreshold:
        metadata = <BallotMinThresholdMetadata />;
        minThreshold = contractsStore.minThresholdBallotThreshold;
        break;
-      case ballotStore.BallotType.proxy: 
+      case ballotStore.BallotType.proxy:
        metadata = <BallotProxyMetadata />;
        minThreshold = contractsStore.proxyBallotThreshold;
        break;
@ -231,67 +231,90 @@ export class NewBallot extends React.Component {
      <section className="container new">
        <h1 className="title">New Ballot</h1>
        <form action="" className="new-form">
-          <div className="hidden">
-            <div className="left">
-              <div className="radio-container">
-                <input type="radio" name="ballot-type" id="ballot-for-validators" 
-                  value={ballotStore.BallotType.keys}
-                  checked={ballotStore.isBallotForKey} 
-                  onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.keys)}
-                />
-                <label htmlFor="ballot-for-validators" className="radio">Validator Management Ballot</label>
-                <p className="hint">
-                  Ballot to add, remove or swap any type of key for existing or new validators.
-                </p>
+          <div className="new-form-side new-form-side_left">
+            <div className="ballot-types">
+              <div className="ballot-types-i ballot-types-i_active">
+                Validator Management Ballot
+              </div>
+              <div className="ballot-types-i">
+                Consenus Thershold Ballot
+              </div>
+              <div className="ballot-types-i">
+                Modify Proxy Contract Ballot
              </div>
            </div>
-            <div className="right">
-              <div className="radio-container">
-                <input type="radio" name="ballot-type" id="ballot-for-consensus" 
-                  value={ballotStore.BallotType.minThreshold}
-                  checked={ballotStore.isBallotForMinThreshold} 
-                  onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.minThreshold)}
-                />
-                <label htmlFor="ballot-for-consensus" className="radio">Consenus Threshold Ballot</label>
-                <p className="hint">
-                  Ballot to change the minimum threshold for consensus to vote for keys.
-                </p>
-              </div>
-            </div>
-            <div className="left">
-              <div className="radio-container">
-                <input type="radio" name="ballot-type" id="ballot-for-proxy" 
-                  value={ballotStore.BallotType.proxy}
-                  checked={ballotStore.isBallotForProxy} 
-                  onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.proxy)}
-                />
-                <label htmlFor="ballot-for-proxy" className="radio">Modify Proxy Contract Ballot</label>
-                <p className="hint">
-                  Ballot to change one of the proxy contracts.
-                </p>
-              </div>
-            </div>
-          </div>
-          <hr />
-          {validator}
-          {keysTypes}
-          {metadata}
-          <div className="form-el">
-            <label>Description of the ballot</label>
-            <div>
-              <textarea rows="4" 
-                value={ballotStore.memo}
-                onChange={(e) => ballotStore.setMemo(e)}
-                 ></textarea>
-            </div>
-          </div>
-          <div className="new-form-footer">
            <div className="info">
-              Minimum {minThreshold} from {contractsStore.validatorsLength} validators  required to pass the proposal<br />
-              You can create {contractsStore.validatorLimits.keys} ballot for keys<br />
-              You can create {contractsStore.validatorLimits.minThreshold} ballot for consensus<br />
-              You can create {contractsStore.validatorLimits.proxy} ballot for proxy<br />
+              <p className="info-title">Information of the ballot</p>
+              <div className="info-i">
+                Minimum {minThreshold} from {contractsStore.validatorsLength} validators  required to pass the proposal<br />
+              </div>
+              <div className="info-i">
+                You can create {contractsStore.validatorLimits.keys} ballot for keys<br />
+              </div>
+              <div className="info-i">
+                You can create {contractsStore.validatorLimits.minThreshold} ballot for consensus<br />
+              </div>
+              <div className="info-i">
+                You can create {contractsStore.validatorLimits.proxy} ballot for proxy<br />
+              </div>
            </div>
+          </div>
+          <div className="new-form-side new-form-side_right">
+            <div className="form-el">
+              <label>Description of the ballot</label>
+              <div>
+                <textarea rows="4"
+                  value={ballotStore.memo}
+                  onChange={(e) => ballotStore.setMemo(e)}
+                  ></textarea>
+              </div>
+            </div>
+            <hr />
+            <div className="hidden">
+              <div className="left">
+                <div className="radio-container">
+                  <input type="radio" name="ballot-type" id="ballot-for-validators"
+                    value={ballotStore.BallotType.keys}
+                    checked={ballotStore.isBallotForKey}
+                    onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.keys)}
+                    />
+                  <label htmlFor="ballot-for-validators" className="radio">Validator Management Ballot</label>
+                  <p className="hint">
+                    Ballot to add, remove or swap any type of key for existing or new validators.
+                  </p>
+                </div>
+              </div>
+              <div className="right">
+                <div className="radio-container">
+                  <input type="radio" name="ballot-type" id="ballot-for-consensus"
+                    value={ballotStore.BallotType.minThreshold}
+                    checked={ballotStore.isBallotForMinThreshold}
+                    onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.minThreshold)}
+                    />
+                  <label htmlFor="ballot-for-consensus" className="radio">Consenus Threshold Ballot</label>
+                  <p className="hint">
+                    Ballot to change the minimum threshold for consensus to vote for keys.
+                  </p>
+                </div>
+              </div>
+              <div className="left">
+                <div className="radio-container">
+                  <input type="radio" name="ballot-type" id="ballot-for-proxy"
+                    value={ballotStore.BallotType.proxy}
+                    checked={ballotStore.isBallotForProxy}
+                    onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.proxy)}
+                    />
+                  <label htmlFor="ballot-for-proxy" className="radio">Modify Proxy Contract Ballot</label>
+                  <p className="hint">
+                    Ballot to change one of the proxy contracts.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <hr />
+            {validator}
+            {keysTypes}
+            {metadata}
            <button type="button" className="add-ballot" onClick={e => this.onClick(e)}>Add ballot</button>
          </div>
        </form>