From 8f878abab11b440ead26280eaff9873c24640ef3 Mon Sep 17 00:00:00 2001 From: William O'Beirne Date: Tue, 5 Dec 2017 14:51:21 -0500 Subject: [PATCH] Mobile CSS Improvements (#525) * Banner announcement cuts off mailchimp on mobile * Hide site version on mobile. Added version to footer as well in case someone _really_ needs to check it. * Shrink pre-footer font size on mobile. * Fix column breakpoint for force offline send (Was stacking, now remains side-by-side.) * Reduce header dropdown sizes at mobile. Force gas dropdown to the left side so its not offscreen. * Columnify contracts for better mobile behavior and less code. * Remove leftover string interpolation * Better mobile header / nav sizing. --- .../BalanceSidebar/OfflineToggle.tsx | 9 +- common/components/Footer/PreFooter.scss | 5 ++ common/components/Footer/index.tsx | 87 ++++++++----------- .../Header/components/GasPriceDropdown.scss | 5 ++ .../Header/components/GasPriceDropdown.tsx | 28 +++--- .../Header/components/Navigation.scss | 3 +- common/components/Header/index.scss | 11 +++ common/components/Header/index.tsx | 21 ++--- common/config/data.ts | 27 +++--- .../components/InteractForm/InteractForm.scss | 14 --- .../components/InteractForm/index.tsx | 31 +++---- 11 files changed, 102 insertions(+), 139 deletions(-) delete mode 100644 common/containers/Tabs/Contracts/components/Interact/components/InteractForm/InteractForm.scss diff --git a/common/components/BalanceSidebar/OfflineToggle.tsx b/common/components/BalanceSidebar/OfflineToggle.tsx index a132ed17..5175765e 100644 --- a/common/components/BalanceSidebar/OfflineToggle.tsx +++ b/common/components/BalanceSidebar/OfflineToggle.tsx @@ -1,8 +1,5 @@ import React from 'react'; -import { - forceOfflineConfig as dForceOfflineConfig, - TForceOfflineConfig -} from 'actions/config'; +import { forceOfflineConfig as dForceOfflineConfig, TForceOfflineConfig } from 'actions/config'; import OfflineSymbol from 'components/ui/OfflineSymbol'; import { connect } from 'react-redux'; import { AppState } from 'reducers'; @@ -24,10 +21,10 @@ class OfflineToggle extends React.Component {
{!offline ? (
-
+
-
+
diff --git a/common/components/Footer/PreFooter.scss b/common/components/Footer/PreFooter.scss index c4dbc3a0..d188b1f0 100644 --- a/common/components/Footer/PreFooter.scss +++ b/common/components/Footer/PreFooter.scss @@ -6,7 +6,12 @@ margin-top: 5rem; background-color: white; text-align: center; + p { font-size: $font-size-medium; + + @media screen and (max-width: $screen-sm) { + font-size: $font-size-small; + } } } diff --git a/common/components/Footer/index.tsx b/common/components/Footer/index.tsx index 9ebd4c97..e5478aff 100644 --- a/common/components/Footer/index.tsx +++ b/common/components/Footer/index.tsx @@ -4,7 +4,8 @@ import { ledgerReferralURL, trezorReferralURL, bitboxReferralURL, - donationAddressMap + donationAddressMap, + VERSION } from 'config/data'; import React from 'react'; import translate from 'translations'; @@ -120,9 +121,7 @@ export default class Footer extends React.Component { }; public render() { - const buttons: IButton[] = [ - { text: 'Okay', type: 'default', onClick: this.closeModal } - ]; + const buttons: IButton[] = [{ text: 'Okay', type: 'default', onClick: this.closeModal }]; return (
@@ -159,66 +158,59 @@ export default class Footer extends React.Component {

Be safe & secure: - We highly recommend that you read our guide on How to Prevent - Loss & Theft for some recommendations on how to be proactive - about your security. + We highly recommend that you read our guide on How to Prevent Loss & Theft for + some recommendations on how to be proactive about your security.

Always backup your keys: - MyEtherWallet.com & MyEtherWallet CX are not "web wallets". You - do not create an account or give us your funds to hold onto. No - data leaves your computer / your browser. We make it easy for - you to create, save, and access your information and interact - with the blockchain. + MyEtherWallet.com & MyEtherWallet CX are not "web wallets". You do not create an + account or give us your funds to hold onto. No data leaves your computer / your + browser. We make it easy for you to create, save, and access your information and + interact with the blockchain.

We are not responsible for any loss: - Ethereum, MyEtherWallet.com & MyEtherWallet CX, and some of the - underlying Javascript libraries we use are under active - development. While we have thoroughly tested & tens of thousands - of wallets have been successfully created by people all over the - globe, there is always the possibility something unexpected - happens that causes your funds to be lost. Please do not invest - more than you are willing to lose, and please be careful. + Ethereum, MyEtherWallet.com & MyEtherWallet CX, and some of the underlying + Javascript libraries we use are under active development. While we have thoroughly + tested & tens of thousands of wallets have been successfully created by people all + over the globe, there is always the possibility something unexpected happens that + causes your funds to be lost. Please do not invest more than you are willing to + lose, and please be careful.

Translations of MyEtherWallet: - The community has done an amazing job translating MyEtherWallet - into a variety of languages. However, MyEtherWallet can only - verify the validity and accuracy of the information provided in - English and, because of this, the English version of our website - is the official text. + The community has done an amazing job translating MyEtherWallet into a variety of + languages. However, MyEtherWallet can only verify the validity and accuracy of the + information provided in English and, because of this, the English version of our + website is the official text.

MIT License Copyright © 2015-2017 MyEtherWallet LLC

- Permission is hereby granted, free of charge, to any person - obtaining a copy of this software and associated documentation - files (the "Software"), to deal in the Software without - restriction, including without limitation the rights to use, - copy, modify, merge, publish, distribute, sublicense, and/or - sell copies of the Software, and to permit persons to whom the - Software is furnished to do so, subject to the following - conditions: + Permission is hereby granted, free of charge, to any person obtaining a copy of this + software and associated documentation files (the "Software"), to deal in the + Software without restriction, including without limitation the rights to use, copy, + modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, + and to permit persons to whom the Software is furnished to do so, subject to the + following conditions:

- The above copyright notice and this permission notice shall be - included in all copies or substantial portions of the Software. + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software.

- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES - OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT - HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, - WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - OTHER DEALINGS IN THE SOFTWARE. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, + INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A + PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT + HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF + CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE + OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Latest Block#: {this.props.latestBlock}

+

v{VERSION}

© 2017 MyEtherWallet, LLC

@@ -229,10 +221,7 @@ export default class Footer extends React.Component {

Consider using our affiliate links to

    - +

Buy a

    @@ -248,11 +237,7 @@ export default class Footer extends React.Component {
  • ETH: mewtopia.eth{' '} - + {donationAddressMap.ETH} diff --git a/common/components/Header/components/GasPriceDropdown.scss b/common/components/Header/components/GasPriceDropdown.scss index e4273712..02362049 100644 --- a/common/components/Header/components/GasPriceDropdown.scss +++ b/common/components/Header/components/GasPriceDropdown.scss @@ -5,6 +5,11 @@ &-dropdown-menu { padding: 0.5rem !important; min-width: 300px !important; + + @media screen and (max-width: $screen-xs) { + left: 0; + right: auto; + } } &-header { diff --git a/common/components/Header/components/GasPriceDropdown.tsx b/common/components/Header/components/GasPriceDropdown.tsx index 5567d572..ad4bd3ba 100644 --- a/common/components/Header/components/GasPriceDropdown.tsx +++ b/common/components/Header/components/GasPriceDropdown.tsx @@ -29,7 +29,11 @@ export default class GasPriceDropdown extends Component { } private renderLabel = () => { - return `Gas Price: ${this.props.value} Gwei`; + return ( + + Gas Price: {this.props.value} Gwei + + ); }; private renderOptions = () => { @@ -45,20 +49,14 @@ export default class GasPriceDropdown extends Component { max={gasPriceDefaults.gasPriceMaxGwei} onChange={this.handleGasPriceChange} /> -

    - Not So Fast -

    -

    - Fast -

    -

    - Fast AF -

    +

    Not So Fast

    +

    Fast

    +

    Fast AF

    Gas Price is the amount you pay per unit of gas.{' '} - TX fee = gas price * gas limit & is paid to miners for - including your TX in a block. Higher the gas price = faster - transaction, but more expensive. Default is 21 GWEI. + TX fee = gas price * gas limit & is paid to miners for including your TX in + a block. Higher the gas price = faster transaction, but more expensive. Default is{' '} + 21 GWEI.

    {/* TODO: maybe not hardcode a link? :) */} @@ -78,9 +76,7 @@ export default class GasPriceDropdown extends Component { this.props.onChange(parseInt(value, 10)); }; - private handleGasPriceChange = ( - e: React.SyntheticEvent - ) => { + private handleGasPriceChange = (e: React.SyntheticEvent) => { this.updateGasPrice((e.target as HTMLInputElement).value); }; } diff --git a/common/components/Header/components/Navigation.scss b/common/components/Header/components/Navigation.scss index c9ac603c..71191f1e 100644 --- a/common/components/Header/components/Navigation.scss +++ b/common/components/Header/components/Navigation.scss @@ -14,8 +14,9 @@ margin-bottom: -20px; font-size: 0; white-space: nowrap; + @media screen and (max-width: $screen-sm) { - margin: 0 -5% -20px; + padding: 0; } } diff --git a/common/components/Header/index.scss b/common/components/Header/index.scss index 7f8aae6e..233f540c 100644 --- a/common/components/Header/index.scss +++ b/common/components/Header/index.scss @@ -28,6 +28,10 @@ $small-size: 900px; .Header { margin-bottom: 2rem; + @media screen and (max-width: $screen-sm) { + margin-bottom: 1rem; + } + &-announcement { padding: 4px 10px; line-height: 26px; @@ -110,6 +114,7 @@ $small-size: 900px; flex: 1 auto; text-align: right; padding: 0 0 5px; + @include small-query { text-align: center; } @@ -128,6 +133,12 @@ $small-size: 900px; &-dropdown { margin-left: 6px; + @media screen and (max-width: $screen-xs) { + .btn { + padding: .3rem .5rem; + } + } + &-add { text-align: center; padding-top: $space-sm !important; diff --git a/common/components/Header/index.tsx b/common/components/Header/index.tsx index 111a8a04..1a40197b 100644 --- a/common/components/Header/index.tsx +++ b/common/components/Header/index.tsx @@ -67,13 +67,8 @@ export default class Header extends Component { } = this.props; const { isAddingCustomNode } = this.state; const selectedLanguage = languageSelection; - const selectedNetwork = getNetworkConfigFromId( - node.network, - customNetworks - ); - const LanguageDropDown = Dropdown as new () => Dropdown< - typeof selectedLanguage - >; + const selectedNetwork = getNetworkConfigFromId(node.network, customNetworks); + const LanguageDropDown = Dropdown as new () => Dropdown; const nodeOptions = Object.keys(NODES) .map(key => { @@ -120,11 +115,7 @@ export default class Header extends Component {

    - + {/* TODO - don't hardcode image path*/} { />
    - v{VERSION} + v{VERSION}
    {
    https://myetherwallet.com.
    - If you're interested in recieving updates about the MyEtherWallet V4 Alpha, you can subscribe via mailchimp :) + `; const etherScan = 'https://etherscan.io'; const blockChainInfo = 'https://blockchain.info'; const ethPlorer = 'https://ethplorer.io'; -export const ETHTxExplorer = (txHash: string): string => - `${etherScan}/tx/${txHash}`; -export const BTCTxExplorer = (txHash: string): string => - `${blockChainInfo}/tx/${txHash}`; -export const ETHAddressExplorer = (address: string): string => - `${etherScan}/address/${address}`; -export const ETHTokenExplorer = (address: string): string => - `${ethPlorer}/address/${address}`; +export const ETHTxExplorer = (txHash: string): string => `${etherScan}/tx/${txHash}`; +export const BTCTxExplorer = (txHash: string): string => `${blockChainInfo}/tx/${txHash}`; +export const ETHAddressExplorer = (address: string): string => `${etherScan}/address/${address}`; +export const ETHTokenExplorer = (address: string): string => `${ethPlorer}/address/${address}`; export const donationAddressMap = { BTC: '1MEWT2SGbqtz6mPCgFcnea8XmWV5Z4Wc6', @@ -41,8 +43,7 @@ export const gasPriceDefaults = { }; export const bityReferralURL = 'https://bity.com/af/jshkb37v'; -export const ledgerReferralURL = - 'https://www.ledgerwallet.com/r/fa4b?path=/products/'; +export const ledgerReferralURL = 'https://www.ledgerwallet.com/r/fa4b?path=/products/'; export const trezorReferralURL = 'https://trezor.io/?a=myetherwallet.com'; export const bitboxReferralURL = 'https://digitalbitbox.com/?ref=mew'; @@ -286,9 +287,7 @@ export async function initWeb3Node(): Promise { } if (networkId === 'loading') { - throw new Error( - 'MetaMask / Mist is still loading. Please refresh the page and try again.' - ); + throw new Error('MetaMask / Mist is still loading. Please refresh the page and try again.'); } NODES.web3 = { diff --git a/common/containers/Tabs/Contracts/components/Interact/components/InteractForm/InteractForm.scss b/common/containers/Tabs/Contracts/components/Interact/components/InteractForm/InteractForm.scss deleted file mode 100644 index 488526e7..00000000 --- a/common/containers/Tabs/Contracts/components/Interact/components/InteractForm/InteractForm.scss +++ /dev/null @@ -1,14 +0,0 @@ -.InteractForm { - &-address { - display: flex; - - > * { - flex: 1; - margin-right: 10px; - - &:last-child { - margin-right: 0; - } - } - } -} diff --git a/common/containers/Tabs/Contracts/components/Interact/components/InteractForm/index.tsx b/common/containers/Tabs/Contracts/components/Interact/components/InteractForm/index.tsx index e8516a1e..5d621f5f 100644 --- a/common/containers/Tabs/Contracts/components/Interact/components/InteractForm/index.tsx +++ b/common/containers/Tabs/Contracts/components/Interact/components/InteractForm/index.tsx @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import translate from 'translations'; -import './InteractForm.scss'; import { NetworkContract } from 'config/data'; import { getNetworkContracts } from 'selectors/config'; import { connect } from 'react-redux'; @@ -65,26 +64,22 @@ e":"a", "type":"uint256"}], "name":"foo", "outputs": [] }]'; // TODO: Use common components for address, abi json return (
    -
    -