Implement XS breakpoint of transaction component - Close #80

i18n/locales/en/common.json

@@ -6,10 +6,10 @@
   "Add a Lisk ID": "Add a Lisk ID",
   "Add vote to": "Add vote to",
   "Additional fee": "Additional fee",
-  "Additional fee:": "Additional fee:",
   "Address": "Address",
   "Address copied to clipboard": "Address copied to clipboard",
   "Address timeout in": "Address timeout in",
+  "All": "All",
   "Amount (LSK)": "Amount (LSK)",
   "An error occurred while creating the transaction.": "An error occurred while creating the transaction.",
   "An error occurred while registering as delegate.": "An error occurred while registering as delegate.",
@@ -71,6 +71,8 @@
   "Hide Passphrase": "Hide Passphrase",
   "I am responsible for keeping my passphrase safe. No one can restore it, not even Lisk.": "I am responsible for keeping my passphrase safe. No one can restore it, not even Lisk.",
   "I understand": "I understand",
+  "In": "In",
+  "Incoming": "Incoming",
   "Insufficient funds": "Insufficient funds",
   "Insufficient funds for {{amount}} LSK fee": "Insufficient funds for {{amount}} LSK fee",
   "Invalid": "Invalid",
@@ -114,6 +116,9 @@
   "Ok": "Ok",
   "Okay": "Okay",
   "Original Message": "Original Message",
+  "Other": "Other",
+  "Out": "Out",
+  "Outgoing": "Outgoing",
   "Passphrase is not valid": "Passphrase is not valid",
   "Passphrase of the account is saved till the end of the session.": "Passphrase of the account is saved till the end of the session.",
   "Passphrase of the account will be required to perform any transaction.": "Passphrase of the account will be required to perform any transaction.",
@@ -190,7 +195,6 @@
   "Total new votes:": "Total new votes:",
   "Total votes:": "Total votes:",
   "Transaction ID": "Transaction ID",
-  "Transaction ID: ": "Transaction ID: ",
   "Transaction is being processed and will be confirmed. It may take up to 15 minutes to be secured in the blockchain.": "Transaction is being processed and will be confirmed. It may take up to 15 minutes to be secured in the blockchain.",
   "Transactions can’t be reversed": "Transactions can’t be reversed",
   "URL is invalid": "URL is invalid",

src/components/app/app.css

@@ -87,3 +87,9 @@ body {
     font-size: 15px;
   }
 }
+
+@media (--xSmall-viewport) {
+  body {
+    font-size: 14px;
+  }
+}

src/components/app/variables.css

@@ -85,6 +85,7 @@ or "warn/action" ineastd of "red/green"
   --color-grayscale-medium: #74869b;
   --color-grayscale-light: #ccd9e4;
   --color-grayscale-mobile-background: #f9fbfd;
+  --color-grayscale-darker-mobile-background: #eff4f9;
   --color-white: #fff;
   --color-error: #da1d00;
   --color-action-dark: #c80039;
@@ -94,6 +95,7 @@ or "warn/action" ineastd of "red/green"
   --gradient-theme: linear-gradient(27deg, #17499b 0%, var(--color-grayscale-light) 100%);
   --gradient-action: linear-gradient(-27deg, var(--color-action-dark) 0%, var(--color-action-light) 100%);
   --gradient-greyscale: linear-gradient(to right, var(--row-background-color), #f5f8fc);
+  --gradient-greyscale-mobile: linear-gradient(to right, var(--color-grayscale-mobile-background), var(--color-grayscale-darker-mobile-background));
   --gradient-secondary: linear-gradient(45deg, #17499b 0%, var(--color-primary-medium) 100%);
 
   /*************************

src/components/box/box.css

@@ -1,4 +1,4 @@
-@import '../app//variables.css';
+@import '../app/variables.css';
 
 .wrapper {
   position: relative;
@@ -12,6 +12,8 @@
   max-height: 100%;
   flex-direction: column;
   overflow: auto;
+  overflow-x: hidden;
+  margin: 0px;
 
   & footer {
     position: absolute;
@@ -32,7 +34,6 @@
 
 @media (--medium-viewport) {
   .wrapper {
-    height: auto;
     min-height: calc(100vh - var(--m-menu-bar-height) - var(--m-menu-bar-height: 62px)); /* stylelint-disable-line */
     background-color: var(--color-grayscale-mobile-background);
     box-shadow: unset;

src/components/dashboard/styles.css

@@ -24,6 +24,7 @@
 
 .latestActivity {
   height: 30%;
+  margin: 0px;
 
   & h2 {
     margin: 40px 32px 20px;

src/components/multiStep/index.js

@@ -87,15 +87,15 @@ class MultiStep extends React.Component {
       extraProps.prevState = Object.assign({}, step.data[step.current + 1]);
     }
 
-    return (<section className={className}>
+    return (<div className={className}>
       <MultiStepNav steps={children} showNav={this.props.showNav}
         prevPage={prevPage}
         browsable={browsable} backButtonLabel={backButtonLabel}
         current={step.current} prevStep={step.prevStep} />
       {
         React.cloneElement(children[step.current], extraProps)
       }
-    </section>);
+    </div>);
   }
 }
 

src/components/tabs/tabs.css

@@ -13,6 +13,12 @@
   text-align: center;
 }
 
+@media (--xSmall-viewport) {
+  .sideBarWrapper {
+    display: none;
+  }
+}
+
 .logo {
   margin: 40px 0;
 }

src/components/transactionDashboard/index.js

@@ -10,7 +10,7 @@ import styles from './styles.css';
 
 const TransactionsDashboard = () => (
   <div className={`${grid.row} ${styles.wrapper}`} >
-    <div className={`${grid['col-xs-4']}`}>
+    <div className={`${grid['col-xs-0']} ${grid['col-sm-4']}`}>
       <Box className={`${styles.send}`}>
         <MultiStep>
           <SendWritable/>
@@ -19,7 +19,7 @@ const TransactionsDashboard = () => (
         </MultiStep>
       </Box>
     </div>
-    <div className={`${grid['col-xs-8']}`}>
+    <div className={`${grid['col-xs-12']} ${styles.transactions} ${grid['col-sm-8']}`}>
       <Transactions></Transactions>
     </div>
   </div>

src/components/transactionDashboard/styles.css

@@ -1,7 +1,25 @@
+@import '../app/variables.css';
+
 .wrapper {
-  width: 100%;
+  min-width: 100%;
 }
 
 .send {
   position: relative;
 }
+
+@media (--medium-viewport) {
+  .wrapper {
+    margin: 0px;
+  }
+
+  .transactions {
+    padding: 0px;
+  }
+}
+
+@media (--xSmall-viewport) {
+  .send {
+    display: none;
+  }
+}

src/components/transactions/transactionDetailView.js

@@ -21,45 +21,45 @@ class TransactionsDetailView extends React.Component {
         </header>
         <div>
           <div className={`${grid.row} ${styles.row}`}>
-            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']}`}>
+            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']} ${styles.column}`}>
               <div className={styles.label}>{this.props.t('Sender')}</div>
               <div className={`${styles.value} ${styles.sender} `}>{this.props.value.senderId}</div>
             </div>
-            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']}`}>
+            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']} ${styles.column}`}>
               <div className={styles.label}>{this.props.t('Recipient')}</div>
               <div className={styles.value}>{this.props.value.recipientId ? this.props.value.recipientId : '-'}</div>
             </div>
           </div>
           <div className={`${grid.row} ${styles.row}`}>
-            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']}`}>
+            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']} ${styles.column}`}>
               <div className={styles.label}>{this.props.t('Date')}</div>
               <div className={styles.value}>
                 <DateFromTimestamp
                   time={this.props.value.timestamp} /> - <TimeFromTimestamp
                   time={this.props.value.timestamp}/>
               </div>
             </div>
-            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']}`}>
+            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']} ${styles.column}`}>
               <div className={styles.label}>{this.props.t('Amount (LSK)')}</div>
               <div className={styles.value}><Amount {...this.props}></Amount></div>
             </div>
           </div>
           <div className={`${grid.row} ${styles.row}`}>
-            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']}`}>
+            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']} ${styles.column}`}>
               <div className={styles.label}>{this.props.t('Additional fee')}</div>
               <div className={styles.value}><LiskAmount val={this.props.value.fee} /></div>
             </div>
-            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']}`}>
+            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']} ${styles.column}`}>
               <div className={styles.label}>{this.props.t('Confirmations')}</div>
               <div className={styles.value}>{this.props.value.confirmations}</div>
             </div>
           </div>
           <div className={`${grid.row} ${styles.row}`}>
-            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']}`}>
+            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']} ${styles.column}`}>
               <div className={styles.label}>{this.props.t('Transaction ID')}</div>
               <div className={styles.value}>{this.props.value.id}</div>
             </div>
-            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']}`}>
+            <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']} ${styles.column}`}>
             </div>
           </div>
         </div>

src/components/transactions/transactionList.js

@@ -9,6 +9,11 @@ import TransactionsHeader from './transactionsHeader';
 import styles from './transactions.css';
 
 class TransactionsList extends React.Component {
+  // eslint-disable-next-line class-methods-use-this
+  isLargeScreen() {
+    return window.innerWidth > 768;
+  }
+
   render() {
     return this.props.transactions.length > 0 ?
       <div className={`${styles.results} transaction-results`}>
@@ -21,9 +26,16 @@ class TransactionsList extends React.Component {
             nextStep={this.props.nextStep}
           />
         ))}
-        <Waypoint bottomOffset='-80%'
-          key={this.props.transactions.length}
-          onEnter={() => { this.props.loadMore(); }}></Waypoint>
+        {
+          // the transaction list should be scrollable on a large screen
+          // otherwise (XS) the whole transaction box will be scrollable
+          // (see transactionOverview.js)
+          this.isLargeScreen()
+            ? <Waypoint bottomOffset='-80%'
+              key={this.props.transactions.length}
+              onEnter={() => { this.props.loadMore(); }}></Waypoint>
+            : null
+        }
       </div> :
       <p className={`${styles.empty} hasPaddingRow empty-message`}>
         {this.props.t('There are no transactions, yet.')} &nbsp;

src/components/transactions/transactionOverview.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Waypoint from 'react-waypoint';
 import CopyToClipboard from '../copyToClipboard';
 import TransactionList from './transactionList';
 import LiskAmount from '../liskAmount';
@@ -23,6 +24,11 @@ class Transactions extends React.Component {
     }
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  isSmallScreen() {
+    return window.innerWidth <= 768;
+  }
+
   componentDidUpdate() {
     const { count, transactions } = this.props;
     this.canLoadMore = count === null || count > transactions.length;
@@ -45,16 +51,25 @@ class Transactions extends React.Component {
         </header>
 
         <ul className={styles.list}>
-          <li className={`${styles.item} ${styles.active}`}>All</li>
-          <li className={styles.item}>Incoming</li>
-          <li className={styles.item}>Outgoing</li>
-          <li className={styles.item}>Other</li>
+          <li className={`${styles.item} ${styles.active}`}>{this.props.t('All')}</li>
+          <li className={styles.item}>{this.isSmallScreen() ? this.props.t('In') : this.props.t('Incoming')}</li>
+          <li className={styles.item}>{this.isSmallScreen() ? this.props.t('Out') : this.props.t('Outgoing')}</li>
+          <li className={styles.item}>{this.props.t('Other')}</li>
         </ul>
         <TransactionList
           transactions={this.props.transactions}
           loadMore={this.loadMore.bind(this)}
           nextStep={this.props.nextStep}
           t={this.props.t} />
+        {
+          // the whole transactions box should be scrollable on XS
+          // otherwise only the transaction list should be scrollable
+          // (see transactionList.js)
+          this.isSmallScreen()
+            ? <Waypoint bottomOffset='-80%' key={this.props.transactions.length}
+              onEnter={() => { this.loadMore(); }}></Waypoint>
+            : null
+        }
       </Box>
     );
   }

src/components/transactions/transactionRow.js

@@ -1,22 +1,14 @@
 import React from 'react';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import { translate } from 'react-i18next';
-import CopyToClipboard from '../copyToClipboard';
 import TransactionType from './transactionType';
 import styles from './transactions.css';
-import LiskAmount from '../liskAmount';
 import Amount from './amount';
 import Spinner from '../spinner';
-import { TimeFromTimestamp, DateFromTimestamp } from './../timestamp/index';
+import { DateFromTimestamp } from './../timestamp/index';
 import { FontIcon } from '../fontIcon';
 
 class TransactionRow extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      isOpen: false,
-    };
-  }
   // eslint-disable-next-line class-methods-use-this
   shouldComponentUpdate(nextProps) {
     return nextProps.value.confirmations <= 1000;
@@ -26,27 +18,21 @@ class TransactionRow extends React.Component {
     const { props } = this;
     return (
       <div className={`${grid.row} ${styles.rows} transactionsRow`}>
-        <div className={`${styles.leftText} ${grid['col-xs-6']}`}>
+        <div className={`${styles.leftText} ${grid['col-xs-6']} ${grid['col-sm-6']} transactions-cell`}>
           <div className={`${styles.mainRow} ${styles.address}`}>
             <TransactionType {...props.value} address={props.address}></TransactionType>
           </div>
-          {this.state.isOpen ? <div className={styles.subRow}> {props.t('Transaction ID: ')}
-            <a href="#">{props.value.id}</a>
-            <CopyToClipboard value={props.value.id} text=' ' className={styles.copyIcon}/>
-          </div> : ''}
         </div>
-        <div className={`${styles.rightText} ${grid['col-xs-2']}`}>
-          <div className={styles.mainRow}>
+        <div className={`${styles.rightText} ${grid['col-xs-0']} ${grid['col-sm-2']} transactions-cell`}>
+          <div className={`${styles.mainRow} ${styles.hiddenXs}`}>
             {props.value.confirmations ? <DateFromTimestamp time={props.value.timestamp} />
               : <Spinner />}
           </div>
-          {this.state.isOpen ? <div className={styles.subRow}><TimeFromTimestamp time={props.value.timestamp}/></div> : ''}
         </div>
-        <div className={`${styles.rightText} ${grid['col-xs-3']}`}>
+        <div className={`${styles.rightText} ${grid['col-xs-5']} ${grid['col-sm-3']} transactions-cell`}>
           <div className={styles.mainRow}><Amount {...props}></Amount></div>
-          {this.state.isOpen ? <div className={styles.subRow}> {props.t('Additional fee:')} <LiskAmount val={props.value.fee} /></div> : ''}
         </div>
-        <div className={`${styles.rightText} ${grid['col-xs-1']}`}>
+        <div className={`${styles.rightText} ${grid['col-xs-1']} ${grid['col-sm-1']} transactions-cell`}>
           { props.nextStep ?
             <div className={`${styles.mainRow} ${styles.clickable}`} onClick={props.nextStep.bind(this, { ...props })}>
               <FontIcon value='arrow-right'/>

src/components/transactions/transactionRow.test.js

@@ -56,9 +56,7 @@ describe('TransactionRow', () => {
       </Router>
     </Provider>, options);
 
-    const expectedValue = /flexboxgrid__col/g;
-    const html = wrapper.find('.transactionsRow').html();
-    expect(html.match(expectedValue)).to.have.lengthOf(4);
+    expect(wrapper.find('.transactions-cell')).to.have.lengthOf(4);
   });
 
   it('should render Spinner if no value.confirmations" ', () => {