Merge pull request #203 from LiskHQ/170-l-breakpoint

Fix vertical responsiveness of L breakpoint - Closes #170
LiskHQ · Jan 17, 2018 · 52fb77b · 52fb77b
2 parents 0219f77 + 634b60b
commit 52fb77b
Show file tree

Hide file tree

Showing 15 changed files with 80 additions and 63 deletions.
diff --git a/src/components/account/account.css b/src/components/account/account.css
@@ -92,7 +92,7 @@
 .peer {
   font-size: 16px;
   float: left;
-  margin: 50px 0px;
+  margin: 5vh 0px;  /* stylelint-disable-line */
 }
 
 @media (--medium-viewport) {

diff --git a/src/components/app/app.css b/src/components/app/app.css
@@ -15,7 +15,6 @@ body {
 .bodyWrapper {
   position: absolute;
   width: 100%;
-  height: 100%;
   left: 0;
   top: 0;
   align-items: center;

diff --git a/src/components/app/variables.css b/src/components/app/variables.css
@@ -65,7 +65,7 @@ or "warn/action" ineastd of "red/green"
   --sidebar-width: 162px;
   --sidebar-width-xl: 192px;
   --main-box-width: 1291px;
-  --main-box-height: 788px;
+  --main-box-height: 75vh; /* stylelint-disable-line */
   --border-radius-normal: 3px;
   --m-menu-bar-height: 72px;
   --s-menu-bar-height: 62px;

diff --git a/src/components/box/box.css b/src/components/box/box.css
@@ -1,9 +1,8 @@
-@import '../app/variables.css';
+@import './../app/variables.css';
 
 .wrapper {
   position: relative;
   width: 100%;
-  height: var(--main-box-height);
   display: flex;
   box-sizing: border-box;
   background: var(--color-white);
@@ -14,13 +13,10 @@
   overflow: auto;
   overflow-x: hidden;
   margin: 0px;
+  height: var(--main-box-height);
 
   & footer {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    padding: 50px 30px 20px;
+    padding: 50px 0px;
     text-align: center;
 
     & :global .subTitle {

diff --git a/src/components/header/header.css b/src/components/header/header.css
@@ -11,9 +11,9 @@
 }
 
 .wrapper {
-  padding: 8px;
+  padding: 0px 8px;
   float: right;
-  margin: 50px 0px;
+  margin: 5vh 0px;  /* stylelint-disable-line */
 }
 
 .logoWrapper {

diff --git a/src/components/mainMenu/mainMenu.css b/src/components/mainMenu/mainMenu.css
@@ -41,7 +41,7 @@
   box-shadow: none;
   width: 100% !important;
   border: none !important;
-  padding: 25px 10px !important;
+  padding: 20px 10px !important;
 }
 
 .navigationContainer {

diff --git a/src/components/send/index.js b/src/components/send/index.js
@@ -36,7 +36,8 @@ class Send extends React.Component {
             onClick={this.setSendIsActive.bind(this, false)}>
             {t('Close')} <FontIcon value='close' />
           </span>
-          <MultiStep finalCallback={this.setSendIsActive.bind(this, false)}>
+          <MultiStep finalCallback={this.setSendIsActive.bind(this, false)}
+            className={styles.wrapper}>
             <SendWritable autoFocus={this.state.sendIsActive || window.innerWidth > 1024}/>
             <SendReadable />
             <ResultBox />

diff --git a/src/components/send/styles.css b/src/components/send/styles.css
@@ -64,3 +64,9 @@
     font-size: 18px;
   }
 }
+
+.wrapper {
+  display: flex;
+  height: 100%;
+  justify-content: space-between;
+}
diff --git a/src/components/sendReadable/send.css b/src/components/sendReadable/send.css
@@ -4,6 +4,16 @@
   --tab-inactive-color: --color-grayscale-dark;
 }
 
+.wrapper {
+  padding: 0px 30px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  overflow-y: hidden;
+  box-sizing: border-box;
+}
+
 .fee {
   text-align: right;
   margin-top: -12px;

diff --git a/src/components/sendReadable/send.js b/src/components/sendReadable/send.js
@@ -93,7 +93,7 @@ class SendReadable extends React.Component {
 
   render() {
     return (
-      <div className='boxPadding send'>
+      <div className={`${styles.wrapper} send`}>
         <div className={styles.header}>
           <header className={styles.headerWrapper}>
             <h2>{this.props.t('Confirm transfer')}</h2>
@@ -105,7 +105,7 @@ class SendReadable extends React.Component {
             <AccountVisual address={this.state.recipient.value} size={60} />
           </figure>
         </div>
-        <form onSubmit={this.send.bind(this)}>
+        <form>
           <Input label={this.props.t('Send to Address')}
             className={`recipient ${styles.disabledInput}`}
             value={this.props.recipient}
@@ -127,29 +127,30 @@ class SendReadable extends React.Component {
             theme={inputStyles}
             columns={{ xs: 6, sm: 4, md: 4 }}
           />
-          <footer>
-            <section className={grid.row} >
-              <div className={grid['col-xs-4']}>
-                <Button
-                  label={this.props.t('Back')}
-                  onClick={() => this.props.prevStep()}
-                  type='button'
-                  theme={styles}
-                />
-              </div>
-              <div className={grid['col-xs-8']}>
-                <PrimaryButton
-                  className='send-button'
-                  label={this.props.t('Send')}
-                  type='submit'
-                  theme={styles}
-                  disabled={!authStateIsValid(this.state) || this.state.loading}
-                />
-                <div className='subTitle'>{this.props.t('Transactions can’t be reversed')}</div>
-              </div>
-            </section>
-          </footer>
         </form>
+        <footer>
+          <section className={grid.row} >
+            <div className={grid['col-xs-4']}>
+              <Button
+                label={this.props.t('Back')}
+                onClick={() => this.props.prevStep()}
+                type='button'
+                theme={styles}
+              />
+            </div>
+            <div className={grid['col-xs-8']}>
+              <PrimaryButton
+                className='send-button'
+                label={this.props.t('Send')}
+                type='submit'
+                theme={styles}
+                onClick={this.send.bind(this)}
+                disabled={!authStateIsValid(this.state) || this.state.loading}
+              />
+              <div className='subTitle'>{this.props.t('Transactions can’t be reversed')}</div>
+            </div>
+          </section>
+        </footer>
       </div>
     );
   }

diff --git a/src/components/sendReadable/send.test.js b/src/components/sendReadable/send.test.js
@@ -51,7 +51,7 @@ describe('Send Readable Component', () => {
   it('allows to send a transaction', () => {
     wrapper.find('.amount input').simulate('change', { target: { value: '120.25' } });
     wrapper.find('.recipient input').simulate('change', { target: { value: '11004588490103196952L' } });
-    wrapper.find('.send-button button').simulate('submit');
+    wrapper.find('.send-button button').simulate('click');
     expect(props.sent).to.have.been.calledWith({
       account: props.account,
       activePeer: {},

diff --git a/src/components/sendWritable/send.css b/src/components/sendWritable/send.css
@@ -77,8 +77,13 @@ input:read-only {
   }
 }
 
-.header {
-  height: 300px;
+.sendWrapper {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
 }
 
 @media (--small-viewport) {

diff --git a/src/components/sendWritable/send.js b/src/components/sendWritable/send.js
@@ -72,7 +72,7 @@ class SendWritable extends React.Component {
 
   render() {
     return (
-      <div className='boxPadding'>
+      <div className={`${styles.sendWrapper} boxPadding`}>
         <div className={styles.header}>
           <header className={styles.headerWrapper}>
             <h2>Transfer</h2>
@@ -103,21 +103,20 @@ class SendWritable extends React.Component {
             theme={styles}
             onChange={this.handleChange.bind(this, 'amount')} />
           <div className={styles.fee}> {this.props.t('Fee: {{fee}} LSK', { fee: fromRawLsk(this.fee) })} </div>
-
-          <footer>
-            <Button onClick={() => this.props.nextStep({
-              recipient: this.state.recipient.value,
-              amount: this.state.amount.value,
-            })}
-            disabled={(!!this.state.recipient.error ||
-                          !this.state.recipient.value ||
-                          !!this.state.amount.error ||
-                          !this.state.amount.value)}
-            className={`send-next-button ${styles.nextButton}`}
-            >{this.props.t('Next')}</Button>
-            <div className='subTitle'>{this.props.t('Confirmation in the next step.')}</div>
-          </footer>
         </form>
+        <footer>
+          <Button onClick={() => this.props.nextStep({
+            recipient: this.state.recipient.value,
+            amount: this.state.amount.value,
+          })}
+          disabled={(!!this.state.recipient.error ||
+                    !this.state.recipient.value ||
+                    !!this.state.amount.error ||
+                    !this.state.amount.value)}
+          className={`send-next-button ${styles.nextButton}`}
+          >{this.props.t('Next')}</Button>
+          <div className='subTitle'>{this.props.t('Confirmation in the next step.')}</div>
+        </footer>
       </div>
     );
   }

diff --git a/test/e2e/forging.feature b/test/e2e/forging.feature
@@ -3,7 +3,7 @@ Feature: Forging page
     Given I'm logged in as "delegate"
     When I click "forging" menu
     Then I should see forging center
-    And I should see table with 20 lines
-    And I scroll to the bottom of "forging"
     And I should see table with 40 lines
+    And I scroll to the bottom of "forging"
+    And I should see table with 60 lines
 
diff --git a/test/integration/wallet.test.js b/test/integration/wallet.test.js
@@ -111,7 +111,7 @@ describe('@integration: Wallet', () => {
       step('And I click "send next button"', clickStep.bind(null, 'send next button'));
       step('When I click "send button"', () => {
         requestToActivePeerStub.withArgs(match.any, 'transactions', match.any).returnsPromise().rejects({});
-        wrapper.find('form').simulate('submit');
+        wrapper.find('.send-button button').simulate('click');
       });
       step(`Then I should see text ${errorMessage} in "result box message" element`, shouldContainMessage.bind(this, 'result box message', errorMessage));
     });
@@ -121,7 +121,7 @@ describe('@integration: Wallet', () => {
       step('And I fill in "1" to "amount" field', fillInputField.bind(null, '1', 'amount'));
       step('And I fill in "537318935439898807L" to "recipient" field', fillInputField.bind(null, '537318935439898807L', 'recipient'));
       step('And I click "send next button"', clickStep.bind(null, 'send next button'));
-      step('When I click "send button"', () => { wrapper.find('form').simulate('submit'); });
+      step('When I click "send button"', () => { wrapper.find('.send-button button').simulate('click'); });
       step(`Then I should see text ${successMessage} in "result box message" element`, shouldContainMessage.bind(this, 'result box message', successMessage));
     });
 
@@ -132,7 +132,7 @@ describe('@integration: Wallet', () => {
       step('And I fill in "537318935439898807L" to "recipient" field', fillInputField.bind(null, '537318935439898807L', 'recipient'));
       step('And I click "send next button"', clickStep.bind(null, 'send next button'));
       step('And I fill in passphrase of "genesis" to "passphrase" field', fillInputField.bind(null, passphrase, 'passphrase'));
-      step('When I click "send button"', () => { wrapper.find('form').simulate('submit'); });
+      step('When I click "send button"', () => { wrapper.find('.send-button button').simulate('click'); });
       step(`Then I should see text ${successMessage} in "result box message" element`, shouldContainMessage.bind(this, 'result box message', successMessage));
     });
 
@@ -143,7 +143,7 @@ describe('@integration: Wallet', () => {
       step('And I fill in "537318935439898807L" to "recipient" field', fillInputField.bind(null, '537318935439898807L', 'recipient'));
       step('And I click "send next button"', clickStep.bind(null, 'send next button'));
       step('And I fill in second passphrase of "second passphrase account" to "second passphrase" field', fillInputField.bind(null, secondPassphrase, 'second-passphrase'));
-      step('When I click "send button"', () => { wrapper.find('form').simulate('submit'); });
+      step('When I click "send button"', () => { wrapper.find('.send-button button').simulate('click'); });
       step(`Then I should see text ${successMessage} in "result box message" element`, shouldContainMessage.bind(this, 'result box message', successMessage));
     });
 
@@ -155,7 +155,7 @@ describe('@integration: Wallet', () => {
       step('And I click "send next button"', clickStep.bind(null, 'send next button'));
       step('And I fill in passphrase of "second passphrase account" to "passphrase" field', fillInputField.bind(null, passphrase, 'passphrase'));
       step('And I fill in second passphrase of "second passphrase account" to "second passphrase" field', fillInputField.bind(null, secondPassphrase, 'second-passphrase'));
-      step('When I click "send button"', () => { wrapper.find('form').simulate('submit'); });
+      step('When I click "send button"', () => { wrapper.find('.send-button button').simulate('click'); });
       step(`Then I should see text ${successMessage} in "result box message" element`, shouldContainMessage.bind(this, 'result box message', successMessage));
     });
   });