Merge pull request #617 from LiskHQ/529-fix-responsive-layout

Fix responsiveness of the layout - Closes #529
LiskArchive · Aug 21, 2017 · 593f7bf · 593f7bf
2 parents fa4c2ca + 69d9ff7
commit 593f7bf
Show file tree

Hide file tree

Showing 15 changed files with 122 additions and 73 deletions.
diff --git a/src/components/account/account.css b/src/components/account/account.css
@@ -69,6 +69,13 @@
     font-weight: 500;
     letter-spacing: 0;
     margin-top: 0;
+    margin-top: 20px;
     margin-bottom: 16px;
     text-align: center;
 }
+
+@media only screen and (min-width: 48em) {
+  .title {
+    margin-top: 0;
+  }
+}
diff --git a/src/components/account/account.js b/src/components/account/account.js
@@ -15,45 +15,57 @@ const Account = ({
   account, peers,
 }) => {
   const status = (peers.status && peers.status.online) ?
-      <i className="material-icons online">check</i>
-      : <i className="material-icons offline">error</i>;
+    <i className="material-icons online">check</i> :
+    <i className="material-icons offline">error</i>;
 
   return (
     <section className={`${grid.row} ${styles.wrapper}`}>
-      <article className={grid['col-xs-4']}>
+      <article className={`${grid['col-sm-4']} ${grid['col-xs-12']}`}>
         <Address {...account}></Address>
       </article>
-      <article className={grid['col-xs-4']}>
+      <article className={`${grid['col-sm-4']} ${grid['col-xs-12']}`}>
         <div className="box">
-          <h3 className={styles.title}>Peer</h3>
-          <div className={styles['value-wrapper']}>
-            <span id="accountStatus" className="status">
-              {status}
-            </span>
-            <p className="inner primary peer-network">
-              {peers.data.options.name}
-            </p>
-            <p className="inner secondary peer">
-              {peers.data.currentPeer}
-              <span> : {peers.data.port}</span>
-            </p>
+          <div className={`${grid.row}`}>
+            <div className={`${grid['col-sm-12']} ${grid['col-xs-4']}`}>
+              <h3 className={styles.title}>Peer</h3>
+            </div>
+            <div className={`${grid['col-sm-12']} ${grid['col-xs-8']}`}>
+              <div className={styles['value-wrapper']}>
+                <span id="accountStatus" className="status">
+                  {status}
+                </span>
+                <p className="inner primary peer-network">
+                  {peers.data.options.name}
+                </p>
+                <p className="inner secondary peer">
+                  {peers.data.currentPeer}
+                  <span> : {peers.data.port}</span>
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </article>
-      <article className={`${grid['col-xs-4']} balance`}>
+      <article className={`${grid['col-sm-4']} ${grid['col-xs-12']} balance`}>
         <div className="box">
-          <h3 className={styles.title}>Balance</h3>
-          <ClickToSend
-            rawAmount={Math.max(0, account.balance - toRawLsk(0.1))} >
-            <div className={styles['value-wrapper']}>
-              <p className="inner primary full hasTip balance-value">
-                <LiskAmount val={account.balance} /> LSK
-              </p>
-              <p className="inner secondary tooltip">
-                Click to send all funds
-              </p>
+          <div className={`${grid.row}`}>
+            <div className={`${grid['col-sm-12']} ${grid['col-xs-4']}`}>
+              <h3 className={styles.title}>Balance</h3>
             </div>
-          </ClickToSend>
+            <div className={`${grid['col-sm-12']} ${grid['col-xs-8']}`}>
+              <ClickToSend
+                rawAmount={Math.max(0, account.balance - toRawLsk(0.1))} >
+                <div className={styles['value-wrapper']}>
+                  <p className="inner primary full hasTip balance-value">
+                    <LiskAmount val={account.balance} /> LSK
+                  </p>
+                  <p className="inner secondary tooltip">
+                    Click to send all funds
+                  </p>
+                </div>
+              </ClickToSend>
+            </div>
+          </div>
         </div>
       </article>
     </section>

diff --git a/src/components/account/address.js b/src/components/account/address.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import styles from './account.css';
 
 const Address = (props) => {
@@ -18,9 +19,15 @@ const Address = (props) => {
 
   return (
     <div className={`box ${styles['text-center']}`}>
-      <h3 id="firstBox" className={styles.title}>{title}</h3>
-      <div className={styles['value-wrapper']}>
-        {content}
+      <div className={`${grid.row}`}>
+        <div className={`${grid['col-sm-12']} ${grid['col-xs-4']}`}>
+          <h3 id="firstBox" className={styles.title}>{title}</h3>
+        </div>
+        <div className={`${grid['col-sm-12']} ${grid['col-xs-8']}`}>
+          <div className={styles['value-wrapper']}>
+            {content}
+          </div>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/app/app.css b/src/components/app/app.css
@@ -10,7 +10,7 @@ body{
 }
 .body-wrapper {
   flex: 1 1 80%;
-  max-width: 80%;
+  max-width: 100%;
   max-height: 100%;
   box-sizing: border-box;
   margin: 0 auto;
@@ -40,3 +40,7 @@ body{
 :global .hasPaddingRow{
   padding: 0 16px;
 }
+
+:global .verticalScroll {
+  overflow-x: auto;
+}
diff --git a/src/components/app/index.js b/src/components/app/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import PrivateRoutes from '../privateRoute';
 import Account from '../account';
 import Header from '../header';
@@ -14,23 +15,25 @@ import Tabs from '../tabs';
 import LoadingBar from '../loadingBar';
 
 const App = () => (
-  <section className={styles['body-wrapper']}>
-    <Header />
-    <main>
-      <PrivateRoutes path='/main' render={ ({ match }) => (
-        <main>
-          <Account />
-          <Tabs />
-          <Route path={`${match.url}/transactions`} component={Transactions} />
-          <Route path={`${match.url}/voting`} component={Voting} />
-          <Route path={`${match.url}/forging`} component={Forging} />
-        </main>
-      )} />
-      <Route exact path="/" component={Login} />
-    </main>
-    <Dialog />
-    <Toaster />
-    <LoadingBar />
+  <section className={`${grid.row} ${styles['body-wrapper']}`}>
+    <div className={`${grid['col-xs-12']} ${grid['col-sm-12']} ${grid['col-md-10']} ${grid['col-md-offset-1']}`}>
+      <Header />
+      <main>
+        <PrivateRoutes path='/main' render={ ({ match }) => (
+          <main>
+            <Account />
+            <Tabs />
+            <Route path={`${match.url}/transactions`} component={Transactions} />
+            <Route path={`${match.url}/voting`} component={Voting} />
+            <Route path={`${match.url}/forging`} component={Forging} />
+          </main>
+        )} />
+        <Route exact path="/" component={Login} />
+      </main>
+      <Dialog />
+      <Toaster />
+      <LoadingBar />
+    </div>
   </section>
 );
 

diff --git a/src/components/forging/delegateStats.js b/src/components/forging/delegateStats.js
@@ -29,7 +29,7 @@ const progressCircleCardList = [
 const DelegateStats = props => (
   <div className={`${grid.row} ${grid['between-xs']}`}>
     {progressCircleCardList.map(cardItem => (
-      <div className={grid['col-xs-4']} key={cardItem.key}>
+      <div className={`${grid['col-xs-12']} ${grid['col-sm-4']}`} key={cardItem.key}>
         <Card className={style.grayCard}>
           <CardText>
           <div className={grid['col-xs-12']}>

diff --git a/src/components/forging/forging.css b/src/components/forging/forging.css
@@ -11,6 +11,7 @@
 
 .forgedBlocksTableWrapper {
   margin: 0 -8px;
+  overflow-x: auto;
 }
 
 .circularProgressTitle {

diff --git a/src/components/forging/forgingStats.js b/src/components/forging/forgingStats.js
@@ -36,7 +36,7 @@ class ForgingStats extends React.Component {
     return (
       <div className={`${grid.row} ${grid['between-xs']}`}>
         {statCardObjects.map(cardObj => (
-          <div className={grid['col-xs-3']} key={cardObj.key}>
+          <div className={`${grid['col-xs-12']} ${grid['col-sm-3']}`} key={cardObj.key}>
             <Card className={style.grayCard}>
               <CardText>
               <div className={grid['col-xs-12']}>

diff --git a/src/components/header/header.css b/src/components/header/header.css
@@ -1,11 +1,15 @@
 .wrapper{
-    margin: 5px -8px 16px 0;
+    margin: 5px -8px 8px 0;
     padding: 8px;
 }
-.logo{
+.logoWrapper {
     width: 25%;
-    min-width: 128px;
-    max-width: 256px;
+}
+.logo{
+    width: 100%;
+    min-width: 108px;
+    max-width: 200px;
+    padding: 8px;
 }
 .button, .iconButton{
     padding: 8px;

diff --git a/src/components/header/headerElement.js b/src/components/header/headerElement.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from 'react-toolbox/lib/button';
 import { IconMenu, MenuItem } from 'react-toolbox/lib/menu';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import logo from '../../assets/images/LISK-nano.png';
 import styles from './header.css';
 import VerifyMessage from '../signVerify/verifyMessage';
@@ -11,8 +12,10 @@ import PrivateWrapper from '../privateWrapper';
 import SecondPassphraseMenu from '../secondPassphrase';
 
 const HeaderElement = props => (
-  <header className={styles.wrapper}>
-    <img className={styles.logo} src={logo} alt="logo" />
+  <header className={`${grid.row} ${grid['between-xs']} ${styles.wrapper}`} >
+    <div className={styles.logoWrapper}>
+      <img className={styles.logo} src={logo} alt="logo" />
+    </div>
     <PrivateWrapper>
       <IconMenu
         className={`${styles.iconButton} main-menu-icon-button`}
@@ -57,7 +60,7 @@ const HeaderElement = props => (
           title: 'Send',
           childComponent: Send,
         })}>Send</Button>
-      </PrivateWrapper>
+    </PrivateWrapper>
   </header>
 );
 

diff --git a/src/components/transactions/transactionRow.js b/src/components/transactions/transactionRow.js
@@ -14,7 +14,7 @@ const TransactionRow = props => (
           <TooltipTime label={props.value.timestamp}></TooltipTime> :
           <Spinner />}
     </td>
-    <td className={`${props.tableStyle.rowCell} ${styles.centerText}`}>
+    <td className={`${props.tableStyle.rowCell} ${styles.centerText} ${styles.hiddenXs}`}>
         <TooltipWrapper tooltip={`${props.value.confirmations} confirmations`}>{props.value.id}</TooltipWrapper>
     </td>
     <td className={`${props.tableStyle.rowCell} ${styles.centerText}`}>

diff --git a/src/components/transactions/transactions.css b/src/components/transactions/transactions.css
@@ -35,3 +35,9 @@
 .centerText{
     text-align: center;
 }
+
+@media screen and (max-width: 48em) {
+  .hiddenXs {
+    display: none;
+  }
+}
diff --git a/src/components/transactions/transactionsComponent.js b/src/components/transactions/transactionsComponent.js
@@ -26,7 +26,7 @@ class Transactions extends React.Component {
 
   render() {
     return (
-      <div className='box noPaddingBox'>
+      <div className='box noPaddingBox verticalScroll'>
         {this.props.transactions.length > 0 ?
           <table className={tableStyle.table}>
           <TransactionsHeader tableStyle={tableStyle}></TransactionsHeader>

diff --git a/src/components/transactions/transactionsHeader.js b/src/components/transactions/transactionsHeader.js
@@ -5,7 +5,7 @@ const TransactionsHeader = ({ tableStyle }) => (
   <thead>
     <tr>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}>Time</th>
-      <th className={`${tableStyle.headCell} ${styles.centerText}`}>Transaction ID</th>
+      <th className={`${tableStyle.headCell} ${styles.centerText} ${styles.hiddenXs}`}>Transaction ID</th>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}>From / To</th>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}></th>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}>Amount</th>

diff --git a/src/components/voting/voting.js b/src/components/voting/voting.js
@@ -159,19 +159,21 @@ class Voting extends React.Component {
           votedDelegates={this.state.votedDelegates}
           search={ value => this.search(value) }
         />
-        <Table selectable={false}>
-          <TableHead displaySelect={false}>
-            <TableCell>Vote</TableCell>
-            <TableCell>Rank</TableCell>
-            <TableCell>Name</TableCell>
-            <TableCell>Lisk Address</TableCell>
-            <TableCell>Uptime</TableCell>
-            <TableCell>Approval</TableCell>
-          </TableHead>
-          {this.state.delegates.map((item, idx) => (
+        <div className='verticalScroll'>
+          <Table selectable={false}>
+            <TableHead displaySelect={false}>
+              <TableCell>Vote</TableCell>
+              <TableCell>Rank</TableCell>
+              <TableCell>Name</TableCell>
+              <TableCell>Lisk Address</TableCell>
+              <TableCell>Uptime</TableCell>
+              <TableCell>Approval</TableCell>
+            </TableHead>
+            {this.state.delegates.map((item, idx) => (
               <VotingRow key={idx} data={item} />
-          ))}
-        </Table>
+            ))}
+          </Table>
+        </div>
         {this.state.notFound}
         <Waypoint onEnter={this.loadMore.bind(this)}></Waypoint>
       </div>