Merge pull request #280 from PolymathNetwork/fix/capped-sto-overview-…

…layout fix(issuer): fix layout broken on overview capped sto
PolymathNetwork · Jan 8, 2019 · 6ae2668 · 6ae2668
2 parents 2214bc2 + e28ddab
commit 6ae2668
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 57 deletions.
diff --git a/packages/polymath-ui/src/components/STOStatus/STOStatus.js b/packages/polymath-ui/src/components/STOStatus/STOStatus.js
@@ -6,6 +6,7 @@ import type { SecurityToken, STODetails } from '@polymathnetwork/js/types';
 
 import { etherscanAddress } from '../../helpers';
 import Box from '../Box';
+import Grid from '../Grid';
 import Countdown from '../Countdown';
 import ProgressBar from '../ProgressBar';
 
@@ -84,71 +85,72 @@ export default class STOStatus extends Component<Props> {
         <p className="pui-sto-status-contract">
           Contract {etherscanAddress(details.address)}
         </p>
-        <div
-          className={
-            'pui-sto-status-grow' +
-            (this.props.isStoPaused ? ' pui-paused' : '')
-          }
-        >
-          <div className="pui-sto-status-numbers">
-            <div>{fractionComplete}%</div>
-            <div className="pui-key-value">
-              <div>Cap</div>
-              {capText}
-            </div>
-          </div>
-          <Box mb="l">
-            <ProgressBar progress={fractionComplete / 100} />
-          </Box>
-          <div className="pui-sto-status-bottom-row">
-            <div className="pui-sto-status-dates">
-              <div className="pui-key-value">
-                <div>Start Date</div>
-                {dateFormat(details.start)}
-              </div>
+        <Grid gridTemplateColumns={['', '', '', '1fr minmax(250px, 1fr)']}>
+          <div
+            className={
+              'pui-sto-status-grow' +
+              (this.props.isStoPaused ? ' pui-paused' : '')
+            }
+          >
+            <div className="pui-sto-status-numbers">
+              <div>{fractionComplete}%</div>
               <div className="pui-key-value">
-                <div>End Date</div>
-                {dateFormat(details.end)}
+                <div>Cap</div>
+                {capText}
               </div>
-              <div className="pui-key-value">
-                <div>
-                  1 {symbol}{' '}
-                  <span>
-                    = {details.rate} {token.ticker}
-                  </span>
+            </div>
+            <Box mb="l">
+              <ProgressBar progress={fractionComplete / 100} />
+            </Box>
+            <div className="pui-sto-status-bottom-row">
+              <div className="pui-sto-status-dates">
+                <div className="pui-key-value">
+                  <div>Start Date</div>
+                  {dateFormat(details.start)}
+                </div>
+                <div className="pui-key-value">
+                  <div>End Date</div>
+                  {dateFormat(details.end)}
+                </div>
+                <div className="pui-key-value">
+                  <div>
+                    1 {symbol}{' '}
+                    <span>
+                      = {details.rate} {token.ticker}
+                    </span>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div>
-              <div className="pui-key-value pui-countdown-raised">
-                <div>Total Funds Raised</div>
-                {raisedText}
-                <div>
-                  {distTokens} {token.ticker}
+              <div>
+                <div className="pui-key-value pui-countdown-raised">
+                  <div>Total Funds Raised</div>
+                  {raisedText}
+                  <div>
+                    {distTokens} {token.ticker}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        {countdownProps != null && (
-          <div className="pui-countdown-container">
-            <Countdown
-              deadline={countdownProps.deadline}
-              title={countdownProps.title}
-              buttonTitle={
-                notPausable
-                  ? undefined
-                  : this.props.isStoPaused
-                  ? 'RESUME STO'
-                  : 'PAUSE STO'
-              }
-              handleButtonClick={this.props.toggleStoPause}
-              isPaused={this.props.isStoPaused}
-              pausable={!notPausable}
-            />
-          </div>
-        )}
-        <div className="pui-clearfix" />
+          {countdownProps != null && (
+            <div className="pui-countdown-container">
+              <Countdown
+                deadline={countdownProps.deadline}
+                title={countdownProps.title}
+                buttonTitle={
+                  notPausable
+                    ? undefined
+                    : this.props.isStoPaused
+                    ? 'RESUME STO'
+                    : 'PAUSE STO'
+                }
+                handleButtonClick={this.props.toggleStoPause}
+                isPaused={this.props.isStoPaused}
+                pausable={!notPausable}
+              />
+            </div>
+          )}
+        </Grid>
       </div>
     );
   }

diff --git a/packages/polymath-ui/src/components/STOStatus/style.scss b/packages/polymath-ui/src/components/STOStatus/style.scss
@@ -27,3 +27,20 @@
     margin-top: auto;
   }
 }
+
+.pui-sto-status-progress-bar {
+  margin-bottom: $spacing-xl;
+}
+
+.pui-sto-status-bottom-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.pui-sto-status-dates {
+  display: flex;
+
+  > div {
+    padding-right: 34px;
+  }
+}