aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorsdtsui <szehungdanieltsui@gmail.com>2017-08-03 13:23:48 +0800
committersdtsui <szehungdanieltsui@gmail.com>2017-08-03 13:23:48 +0800
commitb523faba1333caa2f05d7721b8b623a84047ac40 (patch)
treefd04b14571e9b49c7471023df83dcc47340fe477
parentff7ba83a6c62abb42c0141d4cd5a53a7870a9199 (diff)
downloadtangerine-wallet-browser-b523faba1333caa2f05d7721b8b623a84047ac40.tar.gz
tangerine-wallet-browser-b523faba1333caa2f05d7721b8b623a84047ac40.tar.zst
tangerine-wallet-browser-b523faba1333caa2f05d7721b8b623a84047ac40.zip
Make mobile view flush with header
-rw-r--r--ui/app/css/index.css29
-rw-r--r--ui/app/main-container.js21
2 files changed, 30 insertions, 20 deletions
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 9e63c9e55..ceeffdd27 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -721,6 +721,17 @@ div.message-container > div:first-child {
transform: scale(1.1);
}
+.main-container {
+ width: 100%;
+ z-index: 18;
+ box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+ font-family: DIN OT;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: stretch;
+ overflow-y: scroll;
+}
+
@media screen and (min-width: 576px) {
.lap-visible {
display: flex;
@@ -730,6 +741,18 @@ div.message-container > div:first-child {
display: none;
}
+ .main-container {
+ // position: absolute;
+ // margin-top: 35px;
+ // z-index: 18;
+ // box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+ // font-family: DIN OT;
+ // display: flex;
+ // flex-wrap: wrap;
+ // align-items: stretch;
+ // overflow-y: scroll;
+ // width: 100%;
+ }
}
@media screen and (max-width: 575px) {
@@ -741,4 +764,8 @@ div.message-container > div:first-child {
display: flex;
}
-}
+ .main-container {
+ position: absolute;
+ margin-top: 35px;
+ }
+} \ No newline at end of file
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index 84d8c5435..af722d100 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -15,12 +15,6 @@ function MainContainer () {
MainContainer.prototype.render = function () {
- // 1. Fixing Mobile View: flush container
- // media query for mobile view:
- // position: absolute;
- // margin-top: 35px;
- // width: 100%;
- //
// 2. Fix responsive sizing - smaller
// https://puu.sh/x0gDA/5ff3b734eb.png
//
@@ -33,19 +27,8 @@ MainContainer.prototype.render = function () {
//
// 4. style all buttons as <button>s: accessibility + mobile focus
- return h('div', {
- style: {
- position: 'absolute',
- marginTop: '35px',
- width: '98%',
- zIndex: 20,
- boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
- fontFamily: 'DIN OT',
- display: 'flex',
- flexWrap: 'wrap',
- alignItems: 'stretch',
- overflowY: 'scroll',
- }
+ return h('div.main-container', {
+ style: {}
}, [h(AccountAndTransactionDetails, {}, [])])
}