Merge pull request #1268 from LiskHQ/1201-align-size-gray-part

Align size of gray parts - Closes #1201
LiskHQ · Sep 21, 2018 · 77b6def · 77b6def
2 parents c78761b + 6082a5b
commit 77b6def
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 17 deletions.
diff --git a/src/components/help/help.css b/src/components/help/help.css
@@ -10,6 +10,23 @@
   flex-direction: row;
   align-items: flex-start;
   padding: 0;
+  background-color: rgb(0, 0, 0, 0);
+
+  & > aside {
+    display: flex;
+    height: 100%;
+    background: #f5f8fc;
+    padding: 40px 30px;
+    justify-content: space-between;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  & > section {
+    background: var(--color-white);
+    flex-basis: 70%;
+    max-width: 70%;
+  }
 
   & h2 {
     font-size: var(--font-size-h3);
@@ -107,7 +124,19 @@
 }
 
 @media (--medium-viewport) {
-  .helpSection:first-child {
-    display: none;
+  .sideBar:first-child {
+    flex: 0 0 30%;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .wrapper {
+    flex-direction: column;
+
+    & > section {
+      background: none;
+      flex-basis: 100%;
+      max-width: 100%;
+    }
   }
 }
diff --git a/src/components/help/help.js b/src/components/help/help.js
@@ -22,15 +22,17 @@ class Help extends React.Component {
     const chatIcon = () => (<span className={styles.inlineIcon}><FontIcon>conversation</FontIcon><b>{this.props.t(' Chat')}</b></span>);
     return (
       <Box className={styles.wrapper}>
-        <aside className={`${grid['col-sm-12']} ${grid['col-md-4']} ${styles.helpSection} ${styles.sideBar}`}>
-          <h2>{this.props.t('Help')}</h2>
-          <p>{this.props.t('Search through our tutorials, FAQs or connect to our community all over the world.')}</p>
-          {
-            this.props.account.address ?
-              <a className='help-onboarding' onClick={() => this.initOnboarding() }>{this.props.t('New to Hub? Take a tour')}
-              <FontIcon>arrow-right</FontIcon>
-            </a> : null
-          }
+        <aside className={`${grid['col-sm-12']} ${grid['col-md-4']} ${styles.sideBar}`}>
+          <header>
+            <h2>{this.props.t('Help')}</h2>
+            <p>{this.props.t('Search through our tutorials, FAQs or connect to our community all over the world.')}</p>
+            {
+              this.props.account.address ?
+                <a className='help-onboarding' onClick={() => this.initOnboarding() }>{this.props.t('New to Hub? Take a tour')}
+                <FontIcon>arrow-right</FontIcon>
+              </a> : null
+            }
+          </header>
         </aside>
 
         <section className={`${grid['col-sm-12']} ${grid['col-md-8']} ${styles.helpSection} help-articles`}>

diff --git a/src/components/menuBar/menuBar.css b/src/components/menuBar/menuBar.css
@@ -8,7 +8,7 @@
 
 .menuBar {
   display: none;
-  z-index: 4 !important;
+  z-index: 100 !important;
 }
 
 .openMenu {
@@ -39,7 +39,6 @@
     font-size: var(--menu-bar-font-size-m);
     font-family: var(--heading-font);
     background-color: var(--color-white);
-    z-index: var(--menubar-index);
     flex-direction: row-reverse;
     justify-content: space-between;
   }

diff --git a/src/components/setting/setting.css b/src/components/setting/setting.css
@@ -24,7 +24,6 @@
 
   & > aside {
     display: flex;
-    flex: 0 0 30%;
     height: 100%;
     background: #f5f8fc;
     padding: 40px 30px;
@@ -38,7 +37,6 @@
   }
 
   & > section {
-    flex: 1;
     background: #fff;
     overflow: auto;
     padding: 40px 50px;
@@ -156,11 +154,35 @@
   }
 }
 
+@media (--medium-viewport) {
+  aside:first-child {
+    flex-basis: 30%;
+    max-width: 30%;
+  }
+
+  .wrapper {
+    & > section {
+      flex-basis: 70%;
+      max-width: 70%;
+    }
+  }
+}
+
 @media (--small-viewport) {
+  aside:first-child {
+    flex: 0 0 30%;
+    max-width: 100%;
+  }
+
   .wrapper {
     position: relative;
     margin-bottom: 62px;
     flex-direction: column;
+
+    & > section {
+      flex-basis: 100%;
+      max-width: 100%;
+    }
   }
 
   .carouselNav {

diff --git a/src/components/setting/setting.js b/src/components/setting/setting.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
+
 // import ReactSwipe from 'react-swipe';
 import Checkbox from '../toolbox/sliderCheckbox';
 import styles from './setting.css';
@@ -58,13 +60,13 @@ class Setting extends React.Component {
     const activeCurrency = settings.currency || settingsConst.currencies[0];
 
     return (<Box className={styles.wrapper}>
-      <aside>
+      <aside className={`${grid['col-sm-12']} ${grid['col-md-4']}`}>
         <header>
           <h4>{t('Settings')}</h4>
           <p>{t('Set up Lisk Hub and your account.')}</p>
         </header>
       </aside>
-      <section>
+      <section className={`${grid['col-sm-12']} ${grid['col-md-8']}`}>
         <h4 className={`${allowAuthClass}`}>{t('Security')}</h4>
         <div className={styles.item}>
           <label className={`${allowAuthClass}`}>{t('2nd passphrase (Fee: 5 LSK)')}</label>

diff --git a/src/components/votesPreview/votesPreview.css b/src/components/votesPreview/votesPreview.css
@@ -239,6 +239,11 @@
 
     & .footerWrapper {
       margin: 0 calc(-1 * var(--box-padding-left-M));
+      position: fixed;
+      width: 100%;
+      bottom: 72px;
+      left: var(--box-padding-left-M);
+      z-index: 3;
 
       & .button {
         width: 100%;
@@ -286,6 +291,12 @@
 }
 
 @media (--small-viewport) {
+  .wrapper {
+    & .footerWrapper {
+      bottom: 63px;
+    }
+  }
+
   .surpassMessage.visible {
     bottom: var(--footer-height-s);
   }

diff --git a/src/components/voting/voting.css b/src/components/voting/voting.css
@@ -8,6 +8,15 @@
 .wrapper {
   width: 100%;
   box-shadow: var(--normal-shadow);
+  margin: 0;
+
+  & > aside {
+    padding-left: 0;
+  }
+
+  & > section {
+    padding-right: 0;
+  }
 }
 
 .sideBar {
@@ -40,6 +49,7 @@
       bottom: var(--footer-height-m);
       max-height: 100%;
       height: auto;
+      max-width: 100%;
     }
   }