MINT-295 hotfix: mobile styles (#185)

Chrono-Tech · Jul 3, 2017 · 8d5409a · 8d5409a
1 parent 1b24747
commit 8d5409a
Show file tree

Hide file tree

Showing 22 changed files with 241 additions and 79 deletions.
diff --git a/src/components/dashboard/DepositTokens/DepositTokens.scss b/src/components/dashboard/DepositTokens/DepositTokens.scss
@@ -20,7 +20,18 @@
 
 .actions {
   text-align: right;
+
   .action {
     margin-left: 40px;
+
+    @media only screen and (max-width: $media-size-md) {
+      margin-left: 20px;
+      margin-bottom: 20px;
+      display: inline-block;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
   }
 }
diff --git a/src/components/dashboard/IconSection.scss b/src/components/dashboard/IconSection.scss
@@ -42,6 +42,11 @@
   }
 
   .right {
+
+    @media only screen and (max-width: $media-size-md) {
+      margin-left: 25px;
+    }
+
     :global {
       .icon {
         border-radius: 12px;

diff --git a/src/components/dashboard/SendTokens.jsx b/src/components/dashboard/SendTokens.jsx
@@ -231,7 +231,8 @@ export class SendTokens extends React.Component {
     return (
       <div styleName="form">
         <div>
-          <TextField style={{width: '330px'}}
+          <TextField
+            fullWidth
             onChange={(event, value) => this.handleRecipientChanged(value)}
             value={this.state.recipient.value}
             floatingLabelText="Recipient address"

diff --git a/src/components/dashboard/TransactionsTable.scss b/src/components/dashboard/TransactionsTable.scss
@@ -31,6 +31,11 @@ $cell-padding: 24px 0px;
       position: relative;
       table-layout: fixed;
 
+      @media only screen and (max-width: $media-size-md) {
+        display: block;
+        overflow-x: scroll;
+      }
+
       .table-head {
 
         display: table-row-group;
@@ -66,6 +71,10 @@ $cell-padding: 24px 0px;
             padding: $cell-padding;
             position: relative;
             overflow: hidden;
+
+            @media only screen and (max-width: $media-size-md) {
+              overflow: visible;
+            }
           }
         }
       }
@@ -98,6 +107,11 @@ $cell-padding: 24px 0px;
         text-overflow: ellipsis;
         white-space: nowrap;
         margin-right: 20px;
+
+        @media only screen and (max-width: $media-size-md) {
+          overflow: visible;
+          white-space: normal;
+        }
       }
 
       .text-faded {

diff --git a/src/components/dialogs/AddCurrencyDialog.scss b/src/components/dialogs/AddCurrencyDialog.scss
@@ -6,7 +6,6 @@
 
   .content {
 
-    width: 928px;
     background-color: $color-white;
 
     .header {
@@ -58,6 +57,11 @@
       color: $color-primary-0;
       display: flex;
       padding: 36px 0px;
+
+      @media only screen and (max-width: $media-size-md) {
+        display: block;
+      }
+
       :global {
         td {
           cursor: pointer;
@@ -70,6 +74,10 @@
         width: 50%;
         padding: 0px 24px;
 
+        @media only screen and (max-width: $media-size-md) {
+          width: 100%;
+        }
+
         h5 {
           margin: 0;
           font-size: 24px;

diff --git a/src/components/dialogs/AddTokenDialog.scss b/src/components/dialogs/AddTokenDialog.scss
@@ -6,7 +6,6 @@
 
   .content {
 
-    width: 362px;
     background-color: $color-white;
 
     .header {

diff --git a/src/components/dialogs/BuyTokensDialog.scss b/src/components/dialogs/BuyTokensDialog.scss
@@ -3,7 +3,6 @@
 
 .root {
 
-  width: 928px;
   background-color: $color-white;
 
   .header {

diff --git a/src/components/dialogs/ConfirmTxDialog/ConfirmTxDialog.scss b/src/components/dialogs/ConfirmTxDialog/ConfirmTxDialog.scss
@@ -2,8 +2,6 @@
 @import '~styles/partials/variables';
 
 .root {
-
-  width: 700px;
   background-color: $color-white;
 
   .header {

diff --git a/src/components/dialogs/ModalDialog.scss b/src/components/dialogs/ModalDialog.scss
@@ -9,10 +9,22 @@
   align-items: center;
   justify-content: center;
 
+  @media only screen and (max-width: $media-size-md) {
+    display: block;
+  }
+
   .dialog {
-    flex: 0 0 auto;
+    //flex: 0 0 auto;
     position: relative;
 
+    display: block;
+    width: 90%;
+    max-width: 900px;
+
+    @media only screen and (max-width: $media-size-md) {
+      margin: 20px auto;
+    }
+
     .content {
       position: relative;
     }
@@ -34,7 +46,7 @@
 
 :global(.ModalDialog) {
   &__backdrop {
-
+    overflow: scroll;
     background: $color-modal-backdrop-bg;
   }
 

diff --git a/src/components/pages/LoginPage/GenerateWallet/GenerateWallet.js b/src/components/pages/LoginPage/GenerateWallet/GenerateWallet.js
@@ -105,15 +105,15 @@ class GenerateWallet extends Component {
                 />
               </div>
             )}
-            <div>
+            <div styleName='action'>
               <FlatButton
                 secondary
                 label='Back'
                 onTouchTap={this.handleBackClick}
                 style={styles.secondaryButton}
               />
             </div>
-            <div>
+            <div styleName='action'>
               <RaisedButton
                 label='Download Wallet'
                 primary

diff --git a/src/components/pages/LoginPage/GenerateWallet/GenerateWallet.scss b/src/components/pages/LoginPage/GenerateWallet/GenerateWallet.scss
@@ -18,8 +18,23 @@
   align-items: center;
   margin-top: 32px;
   justify-content: flex-end;
+
+  @media only screen and (max-width: $media-size-md) {
+    flex-wrap: wrap;
+  }
 }
 
 .grow {
   flex-grow: 1;
+
+  @media only screen and (max-width: $media-size-md) {
+    width: 100%;
+    padding: 10px 0;
+  }
+}
+
+.action {
+  @media only screen and (max-width: $media-size-md) {
+    width: 50%;
+  }
 }
diff --git a/src/components/pages/LoginPage/LoginInfura/LoginInfura.scss b/src/components/pages/LoginPage/LoginInfura/LoginInfura.scss
@@ -1,13 +1,25 @@
+@import "~styles/partials/variables";
+
 $gutter: 20px;
 
 .row {
   display: flex;
-  margin: 20px (-$gutter / 2) 0
+  margin: 20px (-$gutter / 2) 0;
+
+  @media only screen and (max-width: $media-size-md) {
+    display: block;
+  }
 }
 
 .col {
   width: 50%;
   margin: 0 ($gutter/ 2);
+
+  @media only screen and (max-width: $media-size-md) {
+    width: 100%;
+    margin: 0;
+    padding: 10px 10px 0;
+  }
 }
 
 .generateIcon {

diff --git a/src/layouts/Markup.scss b/src/layouts/Markup.scss
@@ -7,14 +7,28 @@
   flex-direction: row;
 
   .drawer {
-    position: relative;
     flex: 0 0 auto;
-    width: 60px;
-    display: none; // TODO @bshevchenko: display: flex;
+    display: none;
     flex-direction: column;
 
     background-color: $color-white;
-    box-shadow: $box-shadow-0;
+
+    width: 60px;
+    height: 60px;
+    overflow: hidden;
+    position: absolute;
+
+    &:hover {
+      width: auto;
+      height: auto;
+      overflow: visible;
+      box-shadow: $box-shadow-0;
+      position: relative;
+    }
+
+    @media only screen and (max-width: $media-size-md) {
+      display: flex;
+    }
   }
 
   .middle {

diff --git a/src/layouts/partials/DrawerPartial.jsx b/src/layouts/partials/DrawerPartial.jsx
@@ -1,44 +1,60 @@
 import React from 'react'
-
+import { connect } from 'react-redux'
 import { List, ListItem, IconButton, FontIcon } from 'material-ui'
-
+import { menu } from './HeaderPartial'
 import styles from './styles'
+import { logout } from '../../redux/session/actions'
+import { Link } from 'react-router'
 import './DrawerPartial.scss'
 
+const mapStateToProps = (state) => ({
+  isCBE: state.get('session').isCBE
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  handleLogout: () => dispatch(logout())
+})
+
+@connect(mapStateToProps, mapDispatchToProps)
 export default class DrawerPartial extends React.Component {
 
-  constructor(props) {
+  constructor (props) {
     super(props)
+    this.menu = [...menu]
+
+    if (!props.isCBE) {
+      this.menu.push({key: 'cbeDashboard', title: 'CBE Dashboard', icon: 'dashboard', path: '/cbe'})
+    } else {
+      this.menu.push({key: 'oldInterface', title: 'Old Interface', icon: 'dashboard', path: '/profile'})
+    }
   }
 
-  render() {
+  render () {
     return (
-      <div styleName="root">
-        <div styleName="content">
-          <div styleName="menu">
+      <div styleName='root'>
+        <div styleName='content'>
+          <div styleName='menu'>
             <IconButton>
-              <FontIcon className="material-icons">menu</FontIcon>
+              <FontIcon className='material-icons'>menu</FontIcon>
             </IconButton>
           </div>
           <List>
-            <ListItem styleName="item" style={styles.drawer.itemActive.style} primaryText="Dashboard" leftIcon={
-              <FontIcon style={styles.drawer.itemActive.iconStyle} className='material-icons'>dashboard</FontIcon>
-            } />
-            <ListItem styleName="item" style={styles.drawer.item.style} primaryText="Wallet" leftIcon={
-              <FontIcon style={styles.drawer.item.iconStyle} className='material-icons'>account_balance_wallet</FontIcon>
-            } />
-            <ListItem styleName="item" style={styles.drawer.item.style} primaryText="Exchange" leftIcon={
-              <FontIcon style={styles.drawer.item.iconStyle} className='material-icons'>compare_arrows</FontIcon>
-            } />
-            <ListItem styleName="item" style={styles.drawer.item.style} primaryText="History" leftIcon={
-              <FontIcon style={styles.drawer.item.iconStyle} className='material-icons'>history</FontIcon>
-            } />
-            <ListItem styleName="item" style={styles.drawer.item.style} primaryText="Rewards" leftIcon={
-              <FontIcon style={styles.drawer.item.iconStyle} className='material-icons'>attach_money</FontIcon>
-            } />
-            <ListItem styleName="item" style={styles.drawer.item.style} primaryText="Voting" leftIcon={
-              <FontIcon style={styles.drawer.item.iconStyle} className='material-icons'>record_voice_over</FontIcon>
-            } />
+            {this.menu.map(item => (
+              <ListItem
+                key={item.key}
+                styleName='item'
+                style={styles.drawer.item.style}
+                primaryText={item.title}
+                leftIcon={
+                  <FontIcon
+                    style={styles.drawer.item.iconStyle}
+                    className='material-icons'>{item.icon}</FontIcon>
+                }
+                containerElement={
+                  <Link activeClassName={'drawer-item-active'} to={{pathname: item.path}} />
+                }
+              />
+            ))}
           </List>
         </div>
       </div>

diff --git a/src/layouts/partials/DrawerPartial.scss b/src/layouts/partials/DrawerPartial.scss
@@ -4,7 +4,7 @@
 .root {
 
   @include position(absolute);
-  overflow: hidden;
+  overflow: visible;
   box-shadow: $box-shadow-0;
   z-index: 200;
 
@@ -29,8 +29,10 @@
       }
     }
   }
+}
 
-  &:hover {
-    overflow: visible;
+:global {
+  .drawer-item-active {
+    color: $color-primary-0 !important;
   }
 }
diff --git a/src/layouts/partials/FooterPartial.scss b/src/layouts/partials/FooterPartial.scss
@@ -11,13 +11,16 @@
   background-image: $bg-gradient-0;
 
   .row {
-
     margin: 40px 80px;
-
     display: flex;
     flex-direction: row;
     position: relative;
 
+    @media only screen and (max-width: $media-size-md) {
+      flex-direction: column;
+      margin: 25px;
+    }
+
     .column {
       position: relative;
       flex: 1 1 auto;