aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
authorDan Miller <danjm.com@gmail.com>2018-11-16 04:32:12 +0800
committerDan Miller <danjm.com@gmail.com>2018-12-04 11:36:22 +0800
commit4111e9f92d9b87fa46a9f28e767cdf6bfce21fa2 (patch)
tree224cbac81cf070896b53d972d7f268fc51fa06a1 /ui/app
parentd5411e772d1efd8d723eb81403fa22b03b904f49 (diff)
downloadtangerine-wallet-browser-4111e9f92d9b87fa46a9f28e767cdf6bfce21fa2.tar
tangerine-wallet-browser-4111e9f92d9b87fa46a9f28e767cdf6bfce21fa2.tar.gz
tangerine-wallet-browser-4111e9f92d9b87fa46a9f28e767cdf6bfce21fa2.tar.bz2
tangerine-wallet-browser-4111e9f92d9b87fa46a9f28e767cdf6bfce21fa2.tar.lz
tangerine-wallet-browser-4111e9f92d9b87fa46a9f28e767cdf6bfce21fa2.tar.xz
tangerine-wallet-browser-4111e9f92d9b87fa46a9f28e767cdf6bfce21fa2.tar.zst
tangerine-wallet-browser-4111e9f92d9b87fa46a9f28e767cdf6bfce21fa2.zip
Improve responsiveness of customize speed up slider.
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/gas-customization/gas-modal-page-container/index.scss19
-rw-r--r--ui/app/components/sidebars/index.scss5
-rw-r--r--ui/app/components/sidebars/sidebar-content.scss58
3 files changed, 76 insertions, 6 deletions
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/index.scss
index 9486eaf8f..2532c1fc2 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/index.scss
@@ -19,6 +19,13 @@
}
}
+ &__footer {
+ header {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
+ }
+
&__header-close-text {
font-size: 14px;
color: #4EADE7;
@@ -82,6 +89,10 @@
color: $scorpion;
font-size: 12px;
+ @media screen and (max-width: $break-small) {
+ padding: 4px 21px;
+ }
+
&__send-info, &__transaction-info, &__total-info, &__fiat-total-info {
display: flex;
flex-flow: row;
@@ -95,11 +106,19 @@
&__total-info {
&__label {
font-size: 16px;
+
+ @media screen and (max-width: $break-small) {
+ font-size: 14px;
+ }
}
&__value {
font-size: 16px;
font-weight: bold;
+
+ @media screen and (max-width: $break-small) {
+ font-size: 14px;
+ }
}
}
diff --git a/ui/app/components/sidebars/index.scss b/ui/app/components/sidebars/index.scss
index 6fcd93e99..b9845d564 100644
--- a/ui/app/components/sidebars/index.scss
+++ b/ui/app/components/sidebars/index.scss
@@ -60,6 +60,11 @@
width: 408px;
left: calc(100% - 408px);
}
+
+ @media screen and (max-width: $break-small) {
+ width: 100%;
+ left: 0%;
+ }
}
.sidebar-overlay {
diff --git a/ui/app/components/sidebars/sidebar-content.scss b/ui/app/components/sidebars/sidebar-content.scss
index c0973be2c..7d1f719dc 100644
--- a/ui/app/components/sidebars/sidebar-content.scss
+++ b/ui/app/components/sidebars/sidebar-content.scss
@@ -2,10 +2,24 @@
.gas-modal-page-container {
.page-container {
max-width: 100%;
+
+ &__content {
+ display: flex;
+ overflow-y: initial;
+ }
+
+ @media screen and (max-width: $break-small) {
+ max-width: 344px;
+ min-height: auto;
+ }
}
.gas-price-chart {
margin-left: 10px;
+
+ &__root {
+ max-height: 160px !important;
+ }
}
.page-container__bottom {
@@ -20,21 +34,53 @@
}
.basic-tab-content {
- height: 377px;
+ height: 318px;
margin-bottom: 0px;
border-bottom: 1px solid #d2d8dd;
- }
- .advanced-tab__fee-chart {
- height: 320px;
+ @media screen and (max-width: $break-small) {
+ padding-left: 14px;
+ padding-bottom: 21px;
+ }
+
+ .gas-price-button-group--alt {
+ @media screen and (max-width: $break-small) {
+ max-width: 318px;
+
+ &__time-estimate {
+ font-size: 12px;
+ }
+ }
+ }
}
- .advanced-tab__fee-chart__speed-buttons {
- bottom: 77px;
+ .advanced-tab {
+ &__fee-chart {
+ height: 320px;
+
+ @media screen and (max-width: $break-small) {
+ height: initial;
+ }
+ }
+
+ &__fee-chart__speed-buttons {
+ bottom: 77px;
+
+ @media screen and (max-width: $break-small) {
+ display: none;
+ }
+ }
}
+
.gas-modal-content__info-row {
height: 170px;
+
+ @media screen and (max-width: $break-small) {
+ height: initial;
+ display: flex;
+ justify-content: center;
+ }
}
}
} \ No newline at end of file