From 348033e38f05e2acb81e0570b707e73377f25cc8 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 20 Dec 2018 16:41:03 +0100 Subject: [PATCH 1/9] fix send button overflow --- src/views/Wallet/views/Account/Send/ethereum/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js index 63a86a14..603d27ca 100644 --- a/src/views/Wallet/views/Account/Send/ethereum/index.js +++ b/src/views/Wallet/views/Account/Send/ethereum/index.js @@ -132,6 +132,7 @@ const ToggleAdvancedSettingsButton = styled(Button)` const SendButton = styled(Button)` min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')}; + word-break: break-all; @media screen and (max-width: ${SmallScreenWidth}) { margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)}; From c7cad093f1192b21a5ec31ad8b6a5e609bb586bb Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 20 Dec 2018 16:42:00 +0100 Subject: [PATCH 2/9] fix token input overflow --- src/components/Select/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Select/index.js b/src/components/Select/index.js index 5c6bef36..086caee9 100644 --- a/src/components/Select/index.js +++ b/src/components/Select/index.js @@ -10,6 +10,10 @@ const styles = isSearchable => ({ width: '100%', color: colors.TEXT_SECONDARY, }), + valueContainer: base => ({ + ...base, + overflow: 'hidden', + }), control: (base, { isDisabled }) => ({ ...base, minHeight: 'initial', From 289c7ddcb55a0ededc0d93b194321706f4e99961 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 20 Dec 2018 18:34:15 +0100 Subject: [PATCH 3/9] collapsible footer --- src/components/Footer/index.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index a629b410..55c3778a 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -25,21 +25,27 @@ const Wrapper = styled.div` font-size: ${FONT_SIZE.SMALL}; background: ${colors.LANDING}; color: ${colors.TEXT_SECONDARY}; - padding: 22px 48px; + padding: 10px 30px; display: flex; + height: 59px; + flex-wrap: wrap; + align-items: center; justify-content: space-between; border-top: 1px solid ${colors.BACKGROUND}; + + @media all and (max-width: 850px) { + justify-content: center; + } `; const StyledLink = styled(Link)` - margin: 0 6px; - margin-right: 20px; + margin: 0 10px; white-space: nowrap; `; const Copy = styled.div` white-space: nowrap; - margin-right: 20px; + margin-right: 10px; `; const Left = styled.div` @@ -48,6 +54,7 @@ const Left = styled.div` const Right = styled.div` white-space: nowrap; + margin: 0 10px; `; const Footer = ({ opened, toggle, isLanding }: Props) => ( @@ -60,7 +67,7 @@ const Footer = ({ opened, toggle, isLanding }: Props) => ( {!isLanding && ( - Exchange rates byCoingecko + Exchange rates by Coingecko )} From 6f287412b85e41dea8c694d9b56cbd86bc6bb42e Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 20 Dec 2018 19:01:14 +0100 Subject: [PATCH 4/9] collapsible buttons in sign n verify tab --- .../Wallet/views/Account/SignVerify/index.js | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js index 5424afa2..951e36f4 100644 --- a/src/views/Wallet/views/Account/SignVerify/index.js +++ b/src/views/Wallet/views/Account/SignVerify/index.js @@ -25,11 +25,29 @@ const RowButtons = styled(Row)` display: flex; align-items: center; justify-content: flex-end; + + @media all and (max-width: 850px) { + flex-wrap: wrap; + margin: -5px; + } `; const StyledButton = styled(Button)` - margin-left: 10px; width: 110px; + margin-left: 10px; + + &:first-child { + margin-left: 0; + } + + @media all and (max-width: 850px) { + flex: 1; + margin: 5px; + + &:first-child { + margin-left: 5px; + } + } `; const Column = styled.div` @@ -117,11 +135,11 @@ class SignVerify extends Component { /> - + signVerifyActions.sign(account.addressPath, signMessage)} >Sign @@ -166,11 +184,11 @@ class SignVerify extends Component { /> - + { From bc3898e4ebe0f4e57e2639ec032e5f15522d5efb Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 20 Dec 2018 19:18:29 +0100 Subject: [PATCH 5/9] make overflow visible and scrollable --- src/views/Wallet/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js index 78679df7..1a63e5f5 100644 --- a/src/views/Wallet/index.js +++ b/src/views/Wallet/index.js @@ -53,7 +53,6 @@ const WalletWrapper = styled.div` display: flex; flex-direction: row; border-radius: 4px 4px 0px 0px; - overflow: hidden; margin-top: 32px; @media screen and (max-width: 1170px) { @@ -66,6 +65,7 @@ const MainContent = styled.article` flex: 1; display: flex; flex-direction: column; + overflow: auto; `; const Navigation = styled.nav` From f44ac15c153b8cdf40cc3df9c4728bd050529088 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 3 Jan 2019 10:56:04 +0100 Subject: [PATCH 6/9] scrollable top navigation --- src/views/Wallet/components/TopNavigationAccount/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js index ecbd0776..dc06738e 100644 --- a/src/views/Wallet/components/TopNavigationAccount/index.js +++ b/src/views/Wallet/components/TopNavigationAccount/index.js @@ -21,8 +21,9 @@ const Wrapper = styled.div` flex: 1; align-items: center; justify-content: space-between; - padding: 0px 30px 0 40px; + padding: 0px 30px 0 35px; max-width: 600px; + overflow-x: scroll; `; const StyledNavLink = styled(NavLink)` From e84e1867c7eba56d370a351d2dde2c7671739d93 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 3 Jan 2019 14:22:43 +0100 Subject: [PATCH 7/9] calculate the Indicator position with scroll offset --- .../TopNavigationAccount/components/Indicator/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js b/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js index 0e5eda43..f3cf54b4 100644 --- a/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js +++ b/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js @@ -76,7 +76,7 @@ class Indicator extends PureComponent { const active = wrapper.querySelector('.active'); if (!active) return; const bounds = active.getBoundingClientRect(); - const left = bounds.left - wrapper.getBoundingClientRect().left; + const left = bounds.left - wrapper.getBoundingClientRect().left + wrapper.scrollLeft; const { state } = this; if (state.style.left !== left) { From 0bae87acda5a8450131a19209a3361af5ef18846 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 3 Jan 2019 18:26:37 +0100 Subject: [PATCH 8/9] fix scrollbars --- .../Wallet/components/TopNavigationAccount/index.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js index dc06738e..e08bbd9a 100644 --- a/src/views/Wallet/components/TopNavigationAccount/index.js +++ b/src/views/Wallet/components/TopNavigationAccount/index.js @@ -20,10 +20,9 @@ const Wrapper = styled.div` height: 100%; flex: 1; align-items: center; - justify-content: space-between; padding: 0px 30px 0 35px; - max-width: 600px; - overflow-x: scroll; + overflow-y: hidden; + overflow-x: auto; `; const StyledNavLink = styled(NavLink)` @@ -31,8 +30,12 @@ const StyledNavLink = styled(NavLink)` font-size: ${FONT_SIZE.TOP_MENU}; color: ${colors.TEXT_SECONDARY}; margin: 0px 4px; - padding: 20px; + padding: 20px 35px; white-space: nowrap; + + @media screen and (max-width: 850px){ + padding: 20px; + } &.active, &:hover { From 656a36a77e1b987e0bb00ff7a23ea85a1521923b Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 3 Jan 2019 18:55:40 +0100 Subject: [PATCH 9/9] same menu item padding for all screen sizes --- src/views/Wallet/components/TopNavigationAccount/index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js index e08bbd9a..7e62f0ab 100644 --- a/src/views/Wallet/components/TopNavigationAccount/index.js +++ b/src/views/Wallet/components/TopNavigationAccount/index.js @@ -33,10 +33,6 @@ const StyledNavLink = styled(NavLink)` padding: 20px 35px; white-space: nowrap; - @media screen and (max-width: 850px){ - padding: 20px; - } - &.active, &:hover { transition: all 0.3s ease-in-out;