From 0cd72db2d2aa575420befa687156cf2bd271b6dd Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 4 Aug 2017 12:57:16 -0700 Subject: [PATCH 1/2] Adds early breakpoint from @frankiebee 's + @kumavis 's CR --- ui/app/css/lib.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 6fff4f56a..e7b3bab05 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -276,3 +276,27 @@ i.fa.fa-question-circle.fa-lg.menu-icon { color: red; } +// Account Subsection + Tab Section Breakpoints Hack: +// Resolves issue from @frankiebee in: +// https://github.com/MetaMask/metamask-extension/pull/1835 +// Please remove this when integrating new designs +@media screen and (min-width: 575px) and (max-width: 800px) { + .account-data-subsection { + flex: 0 0 auto !important; // needs to remove default flex settings + width: 40%; + margin-left: 10px !important; + margin-right: 10px !important; + } + + .tabSection { + flex: 0 0 auto !important; // needs to remove default flex settings + width: 49%; + min-width: 305px; // min-width needs to be low for an early break + margin-left: 10px !important; + margin-right: 10px !important; + } + + .name-label { + width: 80%; // repositions dropdown after early break + } +} From 8cc3ae5988d652b73217e80df93a685d7e5a8422 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 4 Aug 2017 13:19:06 -0700 Subject: [PATCH 2/2] Cleanup breakpoint css + comment on hackiness --- ui/app/css/lib.css | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index e7b3bab05..81647d1c1 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -276,27 +276,30 @@ i.fa.fa-question-circle.fa-lg.menu-icon { color: red; } -// Account Subsection + Tab Section Breakpoints Hack: -// Resolves issue from @frankiebee in: -// https://github.com/MetaMask/metamask-extension/pull/1835 -// Please remove this when integrating new designs +/* + Hacky breakpoint fix for account + tab sections + Resolves issue from @frankiebee in + https://github.com/MetaMask/metamask-extension/pull/1835 + Please remove this when integrating new designs + */ + @media screen and (min-width: 575px) and (max-width: 800px) { .account-data-subsection { - flex: 0 0 auto !important; // needs to remove default flex settings - width: 40%; - margin-left: 10px !important; + flex: 0 0 auto !important; // reset flex + margin-left: 10px !important; // create additional horizontal space margin-right: 10px !important; + width: 40%; } .tabSection { - flex: 0 0 auto !important; // needs to remove default flex settings - width: 49%; - min-width: 305px; // min-width needs to be low for an early break + flex: 0 0 auto !important; margin-left: 10px !important; margin-right: 10px !important; + min-width: 285px; + width: 49%; } .name-label { - width: 80%; // repositions dropdown after early break + width: 80%; } }