From f9432c59826d95dbdaf70a3da4a8a453137efb11 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 19:55:01 -0700 Subject: Move Txs list item styles into classes --- ui/app/css/itcss/components/transaction-list.scss | 44 +++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 ui/app/css/itcss/components/transaction-list.scss (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss new file mode 100644 index 000000000..ff482fd4a --- /dev/null +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -0,0 +1,44 @@ +.tx-list-item-wrapper { + align-items: stretch; + justify-content: 'flex-start', + margin: '0.6em 1.3em 0.6em 1.3em', + overflow: 'scroll', +} + +.tx-list-date-wrapper { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 'auto'; + margin-top: '0.3em'; +} + +.tx-list-content-wrapper { + alignItems: 'stretch'; +} + +.tx-list-date { + color: $dusty-gray; + font-size: 8px; +} + +.tx-list-identicon-wrapper { + flex: 1 1 auto; +} + +.tx-list-account-wrapper { + flex: 3 3 auto; + font-size: 12px; +} + +.tx-list-status-wrapper { + flex: 5 5 auto; +} + +.tx-list-status { + color: $dusty-gray; + font-size: 12px; +} + +.tx-list-details-wrapper { + flex: 2 2 auto; +} \ No newline at end of file -- cgit From e31c2982888fcfef5383124db4ca606644a29044 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 20:52:22 -0700 Subject: Implement widescreen layout for tx list --- ui/app/css/itcss/components/transaction-list.scss | 51 +++++++++++++++++++---- 1 file changed, 42 insertions(+), 9 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index ff482fd4a..700214e30 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -1,44 +1,77 @@ +.tx-list-header { + margin: 1.8em 1.3em 1.8em 1.3em; +} + +.tx-list-content-divider { + margin: 0.1em 1.3em 0.1em 1.3em; + height: 1px; + background: rgb(231, 231, 231); + flex: 0 0 1px; +} + +.tx-list-container { + height: 87.5%; + overflow-y: scroll; +} + .tx-list-item-wrapper { + flex: 0 0 70px; align-items: stretch; - justify-content: 'flex-start', - margin: '0.6em 1.3em 0.6em 1.3em', - overflow: 'scroll', + justify-content: flex-start; + margin: 0em 1.3em 0em 1.3em; } .tx-list-date-wrapper { flex-grow: 1; flex-shrink: 1; - flex-basis: 'auto'; - margin-top: '0.3em'; + flex-basis: auto; + margin-top: 6px; } .tx-list-content-wrapper { - alignItems: 'stretch'; + align-items: stretch; + margin-bottom: 8px; } .tx-list-date { color: $dusty-gray; - font-size: 8px; + font-size: 14px; } .tx-list-identicon-wrapper { + align-self: center; flex: 1 1 auto; + margin-left: 3px; } .tx-list-account-wrapper { flex: 3 3 auto; - font-size: 12px; + align-self: center; +} + +.tx-list-account { + font-size: 16px; } .tx-list-status-wrapper { + align-self: center; flex: 5 5 auto; } .tx-list-status { color: $dusty-gray; - font-size: 12px; + font-size: 16px; } .tx-list-details-wrapper { + align-self: center; flex: 2 2 auto; +} + +.tx-list-value { + font-size: 16px; +} + +.tx-list-fiat-value { + font-size: 12px; } \ No newline at end of file -- cgit From 7a664a7f720f43679dad6f8857790af84b8b7da6 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 22:16:42 -0700 Subject: Improve text positioning on mobile view --- ui/app/css/itcss/components/transaction-list.scss | 72 ++++++++++++++++------- 1 file changed, 50 insertions(+), 22 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') 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 -- cgit From 58b61eb1fc2d4add59f6225ddf4df09fdfa5b92b Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 22:47:56 -0700 Subject: Add UI tweaks, including separation of overflow logic for mobile (full-height) vs laptop (tx-view-only) --- ui/app/css/itcss/components/transaction-list.scss | 46 +++++++++++++++++++---- 1 file changed, 39 insertions(+), 7 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 41543c347..02409fb3e 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -1,23 +1,54 @@ -.tx-list-header { - margin: 1.8em 1.3em 1.8em 1.3em; +.tx-list-container { + height: 87.5%; + @media screen and (min-width: $break-large) { + overflow-y: scroll; + } +} + +@media screen and (max-width: $break-small) { + .tx-list-header-wrapper { + margin-top: 1em; + margin-bottom: 1.4em; + justify-content: center; + } + + .tx-list-header { + align-self: center; + font-size: 12px; + color: $dusty-gray; + } +} + +@media screen and (min-width: $break-large) { + .tx-list-header-wrapper { + flex: 0 0 55px; + } + + .tx-list-header { + font-size: 16px; + margin: 1.8em 1.3em 1.8em 1.3em; + } } .tx-list-content-divider { - margin: 0.1em 1.3em 0.1em 1.3em; height: 1px; background: rgb(231, 231, 231); flex: 0 0 1px; -} -.tx-list-container { - height: 87.5%; - overflow-y: scroll; + @media screen and (max-width: $break-small) { + margin: 0.1em 0em 0.1em 0em; + } + + @media screen and (min-width: $break-large) { + margin: 0.1em 1.3em 0.1em 1.3em; + } } .tx-list-item-wrapper { flex: 0 0 70px; align-items: stretch; justify-content: flex-start; + @media screen and (max-width: $break-small) { margin: 0em 1.3em 0.95em 1.3em; } @@ -31,6 +62,7 @@ flex-grow: 1; flex-shrink: 1; flex-basis: auto; + @media screen and (max-width: $break-small) { margin-top: 6px; margin-bottom: 20px; -- cgit From 9954c95b4a582d13c3b184b4e18f240865bc45f9 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 11 Aug 2017 00:42:44 -0700 Subject: [WIP] Begin fixing responsive layout with many wallets --- ui/app/css/itcss/components/transaction-list.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 02409fb3e..ca32508b8 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -7,8 +7,12 @@ @media screen and (max-width: $break-small) { .tx-list-header-wrapper { - margin-top: 1em; - margin-bottom: 1.4em; + margin-top: 0.2em; + margin-bottom: 0.6em; + // TODO: Resolve Layout Conflicst in Wallet View + // - This fixes txlist "transactions" title dispay + // margin-top: 0.2em; + // margin-bottom: 0.6em; justify-content: center; } -- cgit From 2eadf72fb772b5b6bd32f04c9d439cc0f1ab0453 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 10:31:27 +0200 Subject: Lint and cleanup all scss --- ui/app/css/itcss/components/transaction-list.scss | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index ca32508b8..a6e68df42 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -1,5 +1,6 @@ .tx-list-container { height: 87.5%; + @media screen and (min-width: $break-large) { overflow-y: scroll; } @@ -7,8 +8,8 @@ @media screen and (max-width: $break-small) { .tx-list-header-wrapper { - margin-top: 0.2em; - margin-bottom: 0.6em; + margin-top: .2em; + margin-bottom: .6em; // TODO: Resolve Layout Conflicst in Wallet View // - This fixes txlist "transactions" title dispay // margin-top: 0.2em; @@ -30,7 +31,7 @@ .tx-list-header { font-size: 16px; - margin: 1.8em 1.3em 1.8em 1.3em; + margin: 1.8em 1.3em; } } @@ -40,11 +41,11 @@ flex: 0 0 1px; @media screen and (max-width: $break-small) { - margin: 0.1em 0em 0.1em 0em; + margin: .1em 0; } @media screen and (min-width: $break-large) { - margin: 0.1em 1.3em 0.1em 1.3em; + margin: .1em 1.3em; } } @@ -54,23 +55,22 @@ justify-content: flex-start; @media screen and (max-width: $break-small) { - margin: 0em 1.3em 0.95em 1.3em; + margin: 0 1.3em .95em; } @media screen and (min-width: $break-large) { - margin: 0em 1.3em 0em 1.3em; + margin: 0 1.3em; } } .tx-list-date-wrapper { - flex-grow: 1; - flex-shrink: 1; - flex-basis: auto; + flex: 1 1 auto; @media screen and (max-width: $break-small) { margin-top: 6px; margin-bottom: 20px; } + @media screen and (min-width: $break-large) { margin-top: 6px; } @@ -138,4 +138,4 @@ .tx-list-fiat-value { font-size: 12px; } -} \ No newline at end of file +} -- cgit From 5d8bf6c86ad9cee9aec5e14ca9d57719e6e8e254 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 22:27:08 -0230 Subject: Adjust left margin in main container. --- ui/app/css/itcss/components/transaction-list.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index a6e68df42..8589a3aa2 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -31,7 +31,7 @@ .tx-list-header { font-size: 16px; - margin: 1.8em 1.3em; + margin: 1.8em 1.8em; } } @@ -45,7 +45,7 @@ } @media screen and (min-width: $break-large) { - margin: .1em 1.3em; + margin: .1em 1.8em; } } @@ -59,7 +59,7 @@ } @media screen and (min-width: $break-large) { - margin: 0 1.3em; + margin: 0 1.8em; } } -- cgit From 3cb51e32c9706aebd47859018aff4e1917065b16 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 22:33:32 -0230 Subject: Capitalizations via text-transform for main screen transactions. --- ui/app/css/itcss/components/transaction-list.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 8589a3aa2..69a7e6718 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -6,6 +6,10 @@ } } +.tx-list-header { + text-transform: capitalize; +} + @media screen and (max-width: $break-small) { .tx-list-header-wrapper { margin-top: .2em; @@ -124,6 +128,7 @@ .tx-list-status { color: $dusty-gray; font-size: 16px; + text-transform: capitalize; } } -- cgit From 7d6ad48f15aa65d28de724f550f911234ad2c58e Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 31 Aug 2017 04:58:45 -0230 Subject: Touch up transaction list item styles, remove main-content scroll bars, align buttons with main-content.. --- ui/app/css/itcss/components/transaction-list.scss | 26 +++++++++++++++-------- 1 file changed, 17 insertions(+), 9 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 69a7e6718..8dca35a17 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -35,7 +35,11 @@ .tx-list-header { font-size: 16px; - margin: 1.8em 1.8em; + margin: 1.5em 2.37em; + } + + .tx-list-container::-webkit-scrollbar { + display: none; } } @@ -49,7 +53,7 @@ } @media screen and (min-width: $break-large) { - margin: .1em 1.8em; + margin: .1em 2.37em; } } @@ -63,7 +67,7 @@ } @media screen and (min-width: $break-large) { - margin: 0 1.8em; + margin: 0 2.37em; } } @@ -76,24 +80,24 @@ } @media screen and (min-width: $break-large) { - margin-top: 6px; + margin-top: 13px; } } .tx-list-content-wrapper { align-items: stretch; - margin-bottom: 8px; + margin-bottom: 4px; + margin-top: 2px; } .tx-list-date { color: $dusty-gray; - font-size: 14px; + font-size: 12px; } .tx-list-identicon-wrapper { align-self: center; - flex: 1 1 auto; - margin-left: 3px; + flex: 0.5 1 auto; } .tx-list-account-and-status-wrapper { @@ -113,7 +117,7 @@ align-items: center; .tx-list-account-wrapper { - flex: 2 2 auto; + flex: 1.3 2 auto; } .tx-list-status-wrapper { @@ -123,6 +127,7 @@ .tx-list-account { font-size: 16px; + color: $scorpion; } .tx-list-status { @@ -135,12 +140,15 @@ .tx-list-details-wrapper { align-self: center; flex: 2 2 auto; + color: $dusty-gray; .tx-list-value { font-size: 16px; + text-align: right; } .tx-list-fiat-value { font-size: 12px; + text-align: right; } } -- cgit From 983fa2a11721aa7d1307ef76d516e25a50d0eedf Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 7 Sep 2017 03:14:53 -0700 Subject: Add Contract Tx List Item; Update Token Tx on select --- ui/app/css/itcss/components/transaction-list.scss | 56 +++++++++++++++-------- 1 file changed, 37 insertions(+), 19 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 8dca35a17..bdf84b919 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -61,14 +61,6 @@ flex: 0 0 70px; align-items: stretch; justify-content: flex-start; - - @media screen and (max-width: $break-small) { - margin: 0 1.3em .95em; - } - - @media screen and (min-width: $break-large) { - margin: 0 2.37em; - } } .tx-list-date-wrapper { @@ -93,11 +85,13 @@ .tx-list-date { color: $dusty-gray; font-size: 12px; + font-family: "Montserrat UltraLight"; } .tx-list-identicon-wrapper { align-self: center; - flex: 0.5 1 auto; + flex: 0 0 auto; + margin-right: 16px; } .tx-list-account-and-status-wrapper { @@ -118,6 +112,7 @@ .tx-list-account-wrapper { flex: 1.3 2 auto; + min-width: 153px; } .tx-list-status-wrapper { @@ -137,18 +132,41 @@ } } -.tx-list-details-wrapper { - align-self: center; - flex: 2 2 auto; - color: $dusty-gray; +.tx-list-item { + border-top: 1px solid rgb(231, 231, 231); - .tx-list-value { - font-size: 16px; - text-align: right; + @media screen and (max-width: $break-small) { + margin: 0 1.3em .95em; } - .tx-list-fiat-value { - font-size: 12px; - text-align: right; + @media screen and (min-width: $break-large) { + margin: 0 2.37em; + } + + &:last-of-type { + border-bottom: 1px solid rgb(231, 231, 231); + margin-bottom: 32px; + } + + &__wrapper { + align-self: center; + flex: 2 2 auto; + color: $dusty-gray; + + .tx-list-value { + font-size: 16px; + text-align: right; + } + + .tx-list-fiat-value { + font-size: 12px; + text-align: right; + } + } + + &--empty { + text-align: center; + border-bottom: none !important; + padding: 16px; } } -- cgit From 17b5afb8deb50bf117a888ab24856661f67d3547 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 08:03:00 -0230 Subject: Create tx-list-item component. --- ui/app/css/itcss/components/transaction-list.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index bdf84b919..87e8e693e 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -61,6 +61,22 @@ flex: 0 0 70px; align-items: stretch; justify-content: flex-start; + + @media screen and (max-width: $break-small) { + padding: 0 1.3em .95em; + } + + @media screen and (min-width: $break-large) { + margin: 0 2.37em; + } +} + +.tx-list-pending-item-container { + cursor: pointer; +} + +.tx-list-pending-item-container:hover { + background: $alto; } .tx-list-date-wrapper { -- cgit From 64f8a4d22b2f967087e02b5c80e1b7036a38bc61 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 09:39:04 -0230 Subject: Improve tx-list item hover scss. --- ui/app/css/itcss/components/transaction-list.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 87e8e693e..ba2f631ae 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -73,10 +73,10 @@ .tx-list-pending-item-container { cursor: pointer; -} -.tx-list-pending-item-container:hover { - background: $alto; + &:hover { + background: rgba($alto, .2); + } } .tx-list-date-wrapper { -- cgit From eabbfb83197ce948f59e0762a30d1d30266ad11c Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 7 Sep 2017 13:48:13 -0230 Subject: Link user from transaction list to etherscan if they have a transaction hash. --- ui/app/css/itcss/components/transaction-list.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index ba2f631ae..f3bba574e 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -71,7 +71,7 @@ } } -.tx-list-pending-item-container { +.tx-list-clickable { cursor: pointer; &:hover { @@ -79,6 +79,11 @@ } } +.tx-list-pending-item-container { + cursor: pointer; + opacity: 0.5; +} + .tx-list-date-wrapper { flex: 1 1 auto; -- cgit From 687d2f755d4fe9129d785603e5332c8af71a3481 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 7 Sep 2017 11:25:31 -0700 Subject: Fix css merge conflicts --- ui/app/css/itcss/components/transaction-list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index f3bba574e..298cacec0 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -67,7 +67,7 @@ } @media screen and (min-width: $break-large) { - margin: 0 2.37em; + // margin: 0 2.37em; } } -- cgit From 492507aa94cb5713d5eaa700cfd7e88b2a16ca7a Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 12 Sep 2017 19:29:33 -0230 Subject: [NewUI] Color tx-list-item text depending on transaction status. (#2050) * Color tx-list-item text depending on transaction status. * Handle css change of text colour with scss instead on inline styles, add classnames package and helper function. * Refactored to use classnames with component property className. --- ui/app/css/itcss/components/transaction-list.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 298cacec0..50bdb3cd5 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -151,6 +151,10 @@ font-size: 16px; text-transform: capitalize; } + + .tx-list-status--rejected { + color: $monzo; + } } .tx-list-item { @@ -179,6 +183,10 @@ text-align: right; } + .tx-list-value--confirmed { + color: $caribbean-green; + } + .tx-list-fiat-value { font-size: 12px; text-align: right; @@ -191,3 +199,12 @@ padding: 16px; } } + +.tx-list-value { + font-size: 16px; + text-align: right; +} + +.tx-list-value--confirmed { + color: $caribbean-green; +} -- cgit From d722c1045f70954cb1a97de52cae5084a6f14815 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 13 Sep 2017 19:57:33 -0700 Subject: Update yarn.lock; Fix tx-list-item overflow; Fix gas exchange rate --- ui/app/css/itcss/components/transaction-list.scss | 59 +++++++++++++++++++++-- 1 file changed, 55 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 50bdb3cd5..589d18b72 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -39,7 +39,7 @@ } .tx-list-container::-webkit-scrollbar { - display: none; + display: none; } } @@ -58,9 +58,12 @@ } .tx-list-item-wrapper { - flex: 0 0 70px; + flex: 1 1 auto; + width: 0; align-items: stretch; justify-content: flex-start; + display: flex; + flex-flow: column nowrap; @media screen and (max-width: $break-small) { padding: 0 1.3em .95em; @@ -76,6 +79,10 @@ &:hover { background: rgba($alto, .2); + + .tx-list-details-wrapper { + background: transparent; + } } } @@ -101,6 +108,30 @@ align-items: stretch; margin-bottom: 4px; margin-top: 2px; + flex: 1 0 auto; + width: 100%; + display: flex; + flex-flow: row nowrap; + + @media screen and (max-width: $break-small) { + font-size: 12px; + + .tx-list-status { + font-size: 12px !important; + } + + .tx-list-account { + font-size: 14px !important; + } + + .tx-list-value { + font-size: 14px; + } + + .tx-list-fiat-value { + font-size: 12px; + } + } } .tx-list-date { @@ -117,7 +148,8 @@ .tx-list-account-and-status-wrapper { display: flex; - flex: 8 8 auto; + flex: 1 1 auto; + width: 0; @media screen and (max-width: $break-small) { flex-direction: column; @@ -159,9 +191,12 @@ .tx-list-item { border-top: 1px solid rgb(231, 231, 231); + flex: 0 0 auto; + display: flex; + flex-flow: row nowrap; @media screen and (max-width: $break-small) { - margin: 0 1.3em .95em; + // margin: 0 1.3em .95em; !important } @media screen and (min-width: $break-large) { @@ -200,9 +235,25 @@ } } +.tx-list-details-wrapper { + overflow: hidden; + flex: 0 0 35%; + background: rgba($white, .8); +} + .tx-list-value { font-size: 16px; text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.tx-list-fiat-value { + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .tx-list-value--confirmed { -- cgit From 93a1089e085cb70ddbd58721a140ab8d3b6b79eb Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 14 Sep 2017 01:09:57 -0700 Subject: Show token tx properly --- ui/app/css/itcss/components/transaction-list.scss | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 589d18b72..e3fe1a8b3 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -66,11 +66,11 @@ flex-flow: column nowrap; @media screen and (max-width: $break-small) { - padding: 0 1.3em .95em; + padding: 0 1.3em; } @media screen and (min-width: $break-large) { - // margin: 0 2.37em; + padding-bottom: 12px; } } @@ -79,16 +79,12 @@ &:hover { background: rgba($alto, .2); - - .tx-list-details-wrapper { - background: transparent; - } } } .tx-list-pending-item-container { cursor: pointer; - opacity: 0.5; + opacity: .5; } .tx-list-date-wrapper { @@ -96,11 +92,10 @@ @media screen and (max-width: $break-small) { margin-top: 6px; - margin-bottom: 20px; } @media screen and (min-width: $break-large) { - margin-top: 13px; + margin-top: 12px; } } @@ -149,6 +144,7 @@ .tx-list-account-and-status-wrapper { display: flex; flex: 1 1 auto; + flex-flow: row wrap; width: 0; @media screen and (max-width: $break-small) { @@ -184,7 +180,8 @@ text-transform: capitalize; } - .tx-list-status--rejected { + .tx-list-status--rejected, + .tx-list-status--failed { color: $monzo; } } @@ -238,7 +235,6 @@ .tx-list-details-wrapper { overflow: hidden; flex: 0 0 35%; - background: rgba($white, .8); } .tx-list-value { -- cgit From 57179d2b05a4efae06c2375e01e9a01a5519543b Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 12 Oct 2017 18:46:09 -0400 Subject: Various styling fixes --- ui/app/css/itcss/components/transaction-list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index e3fe1a8b3..76fac09e2 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -132,7 +132,7 @@ .tx-list-date { color: $dusty-gray; font-size: 12px; - font-family: "Montserrat UltraLight"; + font-family: Roboto; } .tx-list-identicon-wrapper { -- cgit From 0458643f104d7b328e24c4403e4e3d91b4d5de92 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 19 Oct 2017 14:08:52 -0700 Subject: various styling fix on mobile --- ui/app/css/itcss/components/transaction-list.scss | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 76fac09e2..a5d508f11 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -19,12 +19,15 @@ // margin-top: 0.2em; // margin-bottom: 0.6em; justify-content: center; + flex: 0 0 auto; } .tx-list-header { align-self: center; font-size: 12px; color: $dusty-gray; + font-family: Roboto; + text-transform: uppercase; } } @@ -66,7 +69,7 @@ flex-flow: column nowrap; @media screen and (max-width: $break-small) { - padding: 0 1.3em; + padding: 0 1.3em .8em; } @media screen and (min-width: $break-large) { @@ -112,7 +115,7 @@ font-size: 12px; .tx-list-status { - font-size: 12px !important; + font-size: 14px !important; } .tx-list-account { @@ -121,10 +124,12 @@ .tx-list-value { font-size: 14px; + line-height: 18px; } .tx-list-fiat-value { font-size: 12px; + line-height: 16px; } } } @@ -152,6 +157,14 @@ justify-content: flex-start; align-items: flex-start; align-self: center; + + .tx-list-account-wrapper { + height: 18px; + + .tx-list-account { + line-height: 14px; + } + } } @media screen and (min-width: $break-large) { -- cgit From 208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 10 Jan 2018 21:09:09 -0800 Subject: Update main view styling --- ui/app/css/itcss/components/transaction-list.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index a5d508f11..0ff0b3dda 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -32,13 +32,9 @@ } @media screen and (min-width: $break-large) { - .tx-list-header-wrapper { - flex: 0 0 55px; - } - .tx-list-header { font-size: 16px; - margin: 1.5em 2.37em; + margin: 1.1em 2.37em .8em; } .tx-list-container::-webkit-scrollbar { -- cgit From 7c97b2f37c0226daef734bae3392b6ade2b2956f Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 11 Jan 2018 13:51:41 -0330 Subject: Fix padding of a hovered tx-list-item (#2859) --- ui/app/css/itcss/components/transaction-list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index a5d508f11..fb09fd800 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -210,7 +210,7 @@ } @media screen and (min-width: $break-large) { - margin: 0 2.37em; + padding: 0 2.37em; } &:last-of-type { -- cgit From 40e58d31326cc4e759991d15e7e84140e483a791 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 16 Jan 2018 11:58:02 -0800 Subject: Fix tx-list, confirmation screen styling --- ui/app/css/itcss/components/transaction-list.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 19dadc69a..29001a842 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -6,6 +6,10 @@ } } +.tx-list-header-wrapper { + flex: 0 0 auto; +} + .tx-list-header { text-transform: capitalize; } -- cgit From b05d21b1ba308bdb5b758d53dd79593a7a2bf26e Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 17 Jan 2018 20:08:29 -0800 Subject: Fix transaction list font sizes, padding --- ui/app/css/itcss/components/transaction-list.scss | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) (limited to 'ui/app/css/itcss/components/transaction-list.scss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 29001a842..c3df493df 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -73,7 +73,7 @@ } @media screen and (min-width: $break-large) { - padding-bottom: 12px; + padding-bottom: 8px; } } @@ -91,21 +91,13 @@ } .tx-list-date-wrapper { + margin-top: 6px; flex: 1 1 auto; - - @media screen and (max-width: $break-small) { - margin-top: 6px; - } - - @media screen and (min-width: $break-large) { - margin-top: 12px; - } } .tx-list-content-wrapper { align-items: stretch; margin-bottom: 4px; - margin-top: 2px; flex: 1 0 auto; width: 100%; display: flex; @@ -115,7 +107,7 @@ font-size: 12px; .tx-list-status { - font-size: 14px !important; + font-size: 12px !important; } .tx-list-account { @@ -129,7 +121,7 @@ .tx-list-fiat-value { font-size: 12px; - line-height: 16px; + line-height: 22px; } } } @@ -259,6 +251,8 @@ } .tx-list-fiat-value { + font-size: 12px; + line-height: initial; text-align: right; text-overflow: ellipsis; white-space: nowrap; -- cgit