m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Add responsive UI to send ether modal

Browse Source
This commit is contained in:
Chi Kei Chan 2017-09-14 09:56:40 -07:00
parent 4bcc62500f
commit 35d8671843
6 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/app.js
View File

@ -99,7 +99,7 @@ App.prototype.render = function () {
h('.flex-column.full-height', { h('.flex-column.full-height', {
style: { style: {
overflowX: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
alignItems: 'center', alignItems: 'center',
}, },

15
ui/app/css/itcss/components/header.scss
View File

@ -2,20 +2,22 @@
align-items: center; align-items: center;
visibility: visible; visibility: visible;
background: $gallery; background: $gallery;
height: 14.4vh;
max-height: 97px;
position: relative; position: relative;
z-index: $header-z-index; z-index: $header-z-index;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
position: fixed; padding: 0 12px;
height: 34px;
width: 100%; width: 100%;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08); box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08);
z-index: $mobile-header-z-index; z-index: $mobile-header-z-index;
} }
@media screen and (min-width: 576px) {
height: 14.4vh;
max-height: 97px;
}
} }
.app-header-contents { .app-header-contents {
@ -25,13 +27,16 @@
width: 100%; width: 100%;
height: 6.9vh; height: 6.9vh;
@media screen and (max-width: 575px) {
height: 100%;
}
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
width: 85vw; width: 85vw;
} }
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
width: 80vw; width: 80vw;
height: 6.9vh;
} }
@media screen and (min-width: 1281px) { @media screen and (min-width: 1281px) {

8
ui/app/css/itcss/components/newui-sections.scss
View File

@ -70,7 +70,7 @@ $wallet-view-bg: $wild-sand;
background: rgb(250, 250, 250); background: rgb(250, 250, 250);
z-index: $sidebar-z-index; z-index: $sidebar-z-index;
position: fixed; position: fixed;
top: 35px; top: 41px;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -86,7 +86,7 @@ $wallet-view-bg: $wild-sand;
.sidebar-overlay { .sidebar-overlay {
z-index: $sidebar-overlay-z-index; z-index: $sidebar-overlay-z-index;
position: fixed; position: fixed;
top: 35px; top: 41px;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -142,8 +142,8 @@ $wallet-view-bg: $wild-sand;
} }
.main-container { .main-container {
margin-top: 35px; margin-top: 41px;
height: calc(100% - 34px); height: calc(100% - 41px);
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
background-color: $white; background-color: $white;

20
ui/app/css/itcss/components/send.scss
View File

@ -5,7 +5,12 @@
font-family: 'DIN OT'; font-family: 'DIN OT';
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
top: 33px; width: 100%;
overflow-y: auto;
section {
flex: 0 0 auto;
}
} }
} }
@ -19,6 +24,14 @@
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
width: 498px; width: 498px;
@media screen and (max-width: $break-small) {
top: 0;
width: 100%;
box-shadow: none;
padding: 12px;
flex: 1 0 auto;
}
} }
/* Send Screen */ /* Send Screen */
@ -43,6 +56,11 @@
z-index: 25; z-index: 25;
padding: 4px; padding: 4px;
background-color: $white; background-color: $white;
@media screen and (max-width: $break-small) {
position: relative;
top: 0;
}
} }
.send-screen-input-wrapper { .send-screen-input-wrapper {

5
ui/app/css/itcss/generic/index.scss
View File

@ -42,10 +42,13 @@ textarea:focus {
/* stylelint-disable */ /* stylelint-disable */
#app-content { #app-content {
overflow-x: hidden; overflow-x: hidden;
min-width: 357px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media screen and (max-width: $break-small) {
background-color: $white;
}
} }
/* stylelint-enable */ /* stylelint-enable */

2
ui/app/css/itcss/settings/variables.scss
View File

@ -46,7 +46,7 @@ $dropdown-z-index: 30;
$token-icon-z-index: 15; $token-icon-z-index: 15;
$container-z-index: 15; $container-z-index: 15;
$header-z-index: 12; $header-z-index: 12;
$mobile-header-z-index: 19; $mobile-header-z-index: 26;
$main-container-z-index: 18; $main-container-z-index: 18;
$send-card-z-index: 20; $send-card-z-index: 20;
$sidebar-z-index: 26; $sidebar-z-index: 26;