diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts index 762e49c74..cbf33933c 100644 --- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts @@ -213,6 +213,7 @@ export class BlockFeeRatesGraphComponent implements OnInit { }, }, legend: (data.series.length === 0) ? undefined : { + padding: [10, 75], data: data.legends, selected: JSON.parse(this.storageService.getValue('fee_rates_legend')) ?? { 'Min': true, diff --git a/frontend/src/app/lightning/channel/channel.component.scss b/frontend/src/app/lightning/channel/channel.component.scss index 333955212..9405af103 100644 --- a/frontend/src/app/lightning/channel/channel.component.scss +++ b/frontend/src/app/lightning/channel/channel.component.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: row; - @media (max-width: 768px) { + @media (max-width: 767.98px) { flex-direction: column; } } @@ -10,16 +10,13 @@ .tx-link { display: flex; flex-grow: 1; - @media (min-width: 650px) { + @media (min-width: 768px) { + top: 1px; + position: relative; align-self: end; margin-left: 15px; margin-top: 0px; - margin-bottom: -3px; - } - @media (min-width: 768px) { margin-bottom: 4px; - top: 1px; - position: relative; } @media (max-width: 768px) { order: 2; diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html index 16d02807c..b997b6e6d 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html @@ -56,7 +56,7 @@
-
+
Liquidity Ranking
@@ -70,7 +70,7 @@
-
+
- +
diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss index 97a3e76f6..70b01d8b3 100644 --- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss +++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss @@ -42,14 +42,14 @@ } .rank { - width: 20%; + width: 8%; @media (max-width: 576px) { display: none } } .name { - width: 20%; + width: 36%; @media (max-width: 576px) { width: 80%; max-width: 150px; @@ -59,21 +59,21 @@ } .share { - width: 20%; + width: 15%; @media (max-width: 576px) { display: none } } .nodes { - width: 20%; + width: 15%; @media (max-width: 576px) { width: 10%; } } .capacity { - width: 20%; + width: 26%; @media (max-width: 576px) { width: 10%; max-width: 100px; @@ -91,3 +91,8 @@ a:hover .link { .flag { font-size: 20px; } + +.text-truncate .link { + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html index 60f5ca9d4..c73e936c0 100644 --- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html +++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html @@ -51,7 +51,7 @@ -
Rank
+
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html index c62716624..9a169bb44 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html @@ -4,7 +4,7 @@
-
Rank
+
@@ -29,10 +29,10 @@ {{ node.channels | number }}
Alias - + - + diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss index 2b927db7f..59151f6b2 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss @@ -1,7 +1,7 @@ .container-xl { max-width: 1400px; padding-bottom: 100px; - @media (min-width: 767.98px) { + @media (min-width: 960px) { padding-left: 50px; padding-right: 50px; } @@ -15,40 +15,44 @@ width: 5%; } .widget .rank { - @media (min-width: 767.98px) { + @media (min-width: 960px) { width: 13%; } - @media (max-width: 767.98px) { + @media (max-width: 960px) { padding-left: 0px; padding-right: 0px; } } .full .alias { - width: 10%; + width: 20%; overflow: hidden; text-overflow: ellipsis; max-width: 350px; - @media (max-width: 767.98px) { - max-width: 175px; + @media (max-width: 960px) { + width: 40%; + max-width: 500px; } } .widget .alias { - width: 55%; + width: 60%; overflow: hidden; text-overflow: ellipsis; max-width: 350px; - @media (max-width: 767.98px) { + @media (max-width: 960px) { max-width: 175px; } } .full .capacity { width: 10%; + @media (max-width: 960px) { + width: 30%; + } } .widget .capacity { width: 32%; - @media (max-width: 767.98px) { + @media (max-width: 960px) { padding-left: 0px; padding-right: 0px; } @@ -57,28 +61,31 @@ .full .channels { width: 15%; padding-right: 50px; - @media (max-width: 767.98px) { + @media (max-width: 960px) { display: none; } } .full .timestamp-first { - width: 15%; - @media (max-width: 767.98px) { + width: 10%; + @media (max-width: 960px) { display: none; } } .full .timestamp-update { - width: 15%; - @media (max-width: 767.98px) { + width: 10%; + @media (max-width: 960px) { display: none; } } .full .location { - width: 10%; - @media (max-width: 767.98px) { + width: 15%; + @media (max-width: 960px) { + width: 30%; + } + @media (max-width: 600px) { display: none; } } \ No newline at end of file diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html index f321573c1..7d02e510f 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html @@ -29,10 +29,10 @@ - + - + diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss index 5af0e8339..59151f6b2 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss @@ -1,7 +1,7 @@ .container-xl { max-width: 1400px; padding-bottom: 100px; - @media (min-width: 767.98px) { + @media (min-width: 960px) { padding-left: 50px; padding-right: 50px; } @@ -15,70 +15,77 @@ width: 5%; } .widget .rank { - @media (min-width: 767.98px) { + @media (min-width: 960px) { width: 13%; } - @media (max-width: 767.98px) { + @media (max-width: 960px) { padding-left: 0px; padding-right: 0px; } } .full .alias { - width: 10%; + width: 20%; overflow: hidden; text-overflow: ellipsis; max-width: 350px; - @media (max-width: 767.98px) { - max-width: 175px; + @media (max-width: 960px) { + width: 40%; + max-width: 500px; } } .widget .alias { - width: 55%; + width: 60%; overflow: hidden; text-overflow: ellipsis; max-width: 350px; - @media (max-width: 767.98px) { + @media (max-width: 960px) { max-width: 175px; } } -.full .channels { +.full .capacity { width: 10%; + @media (max-width: 960px) { + width: 30%; + } } -.widget .channels { +.widget .capacity { width: 32%; - @media (max-width: 767.98px) { + @media (max-width: 960px) { padding-left: 0px; padding-right: 0px; } } -.full .capacity { +.full .channels { width: 15%; padding-right: 50px; - @media (max-width: 767.98px) { + @media (max-width: 960px) { display: none; } } .full .timestamp-first { - width: 15%; - @media (max-width: 767.98px) { + width: 10%; + @media (max-width: 960px) { display: none; } } .full .timestamp-update { - width: 15%; - @media (max-width: 767.98px) { + width: 10%; + @media (max-width: 960px) { display: none; } } .full .location { - width: 10%; - @media (max-width: 767.98px) { + width: 15%; + @media (max-width: 960px) { + width: 30%; + } + @media (max-width: 600px) { display: none; } } \ No newline at end of file diff --git a/frontend/src/app/shared/components/timestamp/timestamp.component.html b/frontend/src/app/shared/components/timestamp/timestamp.component.html index 69abce53f..b0d4f3b3f 100644 --- a/frontend/src/app/shared/components/timestamp/timestamp.component.html +++ b/frontend/src/app/shared/components/timestamp/timestamp.component.html @@ -1,7 +1,7 @@ - ‎{{ seconds * 1000 | date: customFormat ?? 'yyyy-MM-dd HH:mm' }} -
+
()
diff --git a/frontend/src/app/shared/components/timestamp/timestamp.component.ts b/frontend/src/app/shared/components/timestamp/timestamp.component.ts index 120a5dfe4..e3b96c376 100644 --- a/frontend/src/app/shared/components/timestamp/timestamp.component.ts +++ b/frontend/src/app/shared/components/timestamp/timestamp.component.ts @@ -10,6 +10,7 @@ export class TimestampComponent implements OnChanges { @Input() unixTime: number; @Input() dateString: string; @Input() customFormat: string; + @Input() hideTimeSince: boolean = false; seconds: number | undefined = undefined;