diff options
| author | sdtsui <szehungdanieltsui@gmail.com> | 2017-08-11 13:16:42 +0800 |
|---|---|---|
| committer | sdtsui <szehungdanieltsui@gmail.com> | 2017-08-11 13:16:42 +0800 |
| commit | 7a664a7f720f43679dad6f8857790af84b8b7da6 (patch) | |
| tree | 80ada872c82759127e83358b0ff507aabe8d5541 /ui/app/css/itcss | |
| parent | 3188cc2ef08ec959ccfa5cba43e75326eae153d0 (diff) | |
| download | tangerine-wallet-browser-7a664a7f720f43679dad6f8857790af84b8b7da6.tar tangerine-wallet-browser-7a664a7f720f43679dad6f8857790af84b8b7da6.tar.gz tangerine-wallet-browser-7a664a7f720f43679dad6f8857790af84b8b7da6.tar.bz2 tangerine-wallet-browser-7a664a7f720f43679dad6f8857790af84b8b7da6.tar.lz tangerine-wallet-browser-7a664a7f720f43679dad6f8857790af84b8b7da6.tar.xz tangerine-wallet-browser-7a664a7f720f43679dad6f8857790af84b8b7da6.tar.zst tangerine-wallet-browser-7a664a7f720f43679dad6f8857790af84b8b7da6.zip | |
Improve text positioning on mobile view
Diffstat (limited to 'ui/app/css/itcss')
| -rw-r--r-- | ui/app/css/itcss/components/hero-balance.scss | 4 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/transaction-list.scss | 72 |
2 files changed, 50 insertions, 26 deletions
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index f657e4f2c..2dd9bf973 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -1,7 +1,3 @@ -$break-small: 575px; -$break-medium: 780px; -$break-large: 576px; - .hero-balance { @media screen and (max-width: $break-small) { diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 700214e30..41543c347 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -18,14 +18,26 @@ flex: 0 0 70px; align-items: stretch; justify-content: flex-start; - margin: 0em 1.3em 0em 1.3em; + @media screen and (max-width: $break-small) { + margin: 0em 1.3em 0.95em 1.3em; + } + + @media screen and (min-width: $break-large) { + margin: 0em 1.3em 0em 1.3em; + } } .tx-list-date-wrapper { flex-grow: 1; flex-shrink: 1; flex-basis: auto; - margin-top: 6px; + @media screen and (max-width: $break-small) { + margin-top: 6px; + margin-bottom: 20px; + } + @media screen and (min-width: $break-large) { + margin-top: 6px; + } } .tx-list-content-wrapper { @@ -44,34 +56,50 @@ margin-left: 3px; } -.tx-list-account-wrapper { - flex: 3 3 auto; - align-self: center; -} +.tx-list-account-and-status-wrapper { + display: flex; + flex: 8 8 auto; -.tx-list-account { - font-size: 16px; -} + @media screen and (max-width: $break-small) { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + align-self: center; + } -.tx-list-status-wrapper { - align-self: center; - flex: 5 5 auto; -} + @media screen and (min-width: $break-large) { + flex-direction: row; + justify-content: flex-start; + align-items: center; -.tx-list-status { - color: $dusty-gray; - font-size: 16px; + .tx-list-account-wrapper { + flex: 2 2 auto; + } + + .tx-list-status-wrapper { + flex: 6 6 auto; + } + } + + .tx-list-account { + font-size: 16px; + } + + .tx-list-status { + color: $dusty-gray; + font-size: 16px; + } } .tx-list-details-wrapper { align-self: center; flex: 2 2 auto; -} -.tx-list-value { - font-size: 16px; -} + .tx-list-value { + font-size: 16px; + } -.tx-list-fiat-value { - font-size: 12px; + .tx-list-fiat-value { + font-size: 12px; + } }
\ No newline at end of file |