diff --git a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html
index ea055a96f..d7cb69e4f 100644
--- a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html
+++ b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html
@@ -1,9 +1,10 @@
| TXID |
- Amount |
+ Amount |
{{ currency }} |
Date |
+ Amount |
@@ -12,9 +13,18 @@
- |
+
+
+ |
|
- |
+
+
+
+
+ |
+
+
+ |
@@ -24,9 +34,10 @@
| |
- |
+ |
|
- |
+ |
+ |
-
\ No newline at end of file
+
diff --git a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss
index 851da5996..29806ef4c 100644
--- a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss
+++ b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss
@@ -1,3 +1,9 @@
+@mixin responsive-breakpoint {
+ @media (min-width: 420px) and (max-width: 767px), (min-width: 900px) {
+ @content;
+ }
+}
+
.latest-transactions {
width: 100%;
text-align: left;
@@ -11,34 +17,45 @@
overflow:hidden;
width: 25%;
}
- .table-cell-satoshis {
+ .table-cell-txid {
display: none;
+ @include responsive-breakpoint {
+ display: table-cell;
+ }
+ }
+ .table-cell-satoshis-desktop {
+ display: none;
+ @include responsive-breakpoint {
+ display: table-cell;
+ text-align: right;
+ }
+ }
+ .table-cell-satoshis-mobile {
+ display: table-cell;
text-align: right;
- @media (min-width: 576px) {
- display: table-cell;
- }
- @media (min-width: 768px) {
+ @include responsive-breakpoint {
display: none;
}
- @media (min-width: 1100px) {
- display: table-cell;
- }
}
.table-cell-fiat {
display: none;
text-align: right;
- @media (min-width: 485px) {
- display: table-cell;
- }
- @media (min-width: 768px) {
- display: none;
- }
- @media (min-width: 992px) {
+ @media (min-width: 650px) and (max-width: 767px), (min-width: 1100px) {
display: table-cell;
}
}
.table-cell-date {
- text-align: right;
+ text-align: left;
+ @include responsive-breakpoint {
+ text-align: right;
+ }
+ }
+ .mobile-tx-link {
+ display: inline;
+ @include responsive-breakpoint {
+ color: inherit;
+ pointer-events: none;
+ }
}
}
.skeleton-loader-transactions {
@@ -47,4 +64,4 @@
top: 2px;
margin-bottom: -3px;
height: 18px;
-}
\ No newline at end of file
+}