From 3da76892d5bd64ddc414b0906c8c8da34eae0389 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Wed, 31 Aug 2022 22:49:59 +0000 Subject: [PATCH 1/8] Restyle ln preview titles to match main pages --- .../channel/channel-preview.component.html | 8 ++--- .../channel/channel-preview.component.scss | 23 +++++++++++--- .../node/node-preview.component.html | 8 ++--- .../node/node-preview.component.scss | 30 ++++++++++++++----- 4 files changed, 49 insertions(+), 20 deletions(-) diff --git a/frontend/src/app/lightning/channel/channel-preview.component.html b/frontend/src/app/lightning/channel/channel-preview.component.html index a847975c2..364e8c9fe 100644 --- a/frontend/src/app/lightning/channel/channel-preview.component.html +++ b/frontend/src/app/lightning/channel/channel-preview.component.html @@ -1,9 +1,9 @@
-

- Channel: - {{ channel.short_id }} -

+
+
Lightning channel
+

{{ channel.short_id }}

+
Inactive Active diff --git a/frontend/src/app/lightning/channel/channel-preview.component.scss b/frontend/src/app/lightning/channel/channel-preview.component.scss index e89733ff3..e8e08d5e2 100644 --- a/frontend/src/app/lightning/channel/channel-preview.component.scss +++ b/frontend/src/app/lightning/channel/channel-preview.component.scss @@ -1,11 +1,24 @@ -.title { - font-size: 52px; - margin: 0; +.title-container { + width: 0; + flex-grow: 1; + flex-shrink: 1; + overflow: hidden; + + h5 { + font-size: 28px; + margin-top: -4px; + } + + h1 { + font-size: 52px; + margin-bottom: 0; + margin-top: -8px; + } } .table { + margin-top: 14px; font-size: 32px; - margin-top: 36px; } .badges { @@ -23,6 +36,7 @@ .full-width-row { padding-left: 15px; padding-right: 15px; + flex-wrap: nowrap; &:nth-child(even) { background: #181b2d; @@ -33,6 +47,7 @@ .nodes { font-size: 36px; align-items: center; + margin-top: 0px; } .between-arrow { diff --git a/frontend/src/app/lightning/node/node-preview.component.html b/frontend/src/app/lightning/node/node-preview.component.html index a94882161..22a8095b1 100644 --- a/frontend/src/app/lightning/node/node-preview.component.html +++ b/frontend/src/app/lightning/node/node-preview.component.html @@ -1,9 +1,9 @@
-

- Node: - {{ node.alias }} -

+
+
Lightning node
+

{{ node.alias }}

+
{{ socketType }}
diff --git a/frontend/src/app/lightning/node/node-preview.component.scss b/frontend/src/app/lightning/node/node-preview.component.scss index c6b2ea9d7..b629bbcae 100644 --- a/frontend/src/app/lightning/node/node-preview.component.scss +++ b/frontend/src/app/lightning/node/node-preview.component.scss @@ -1,10 +1,23 @@ -.title { - font-size: 52px; - margin-bottom: 0; +.title-container { + width: 0; + flex-grow: 1; + flex-shrink: 1; + overflow: hidden; + + h5 { + font-size: 28px; + margin-top: -4px; + } + + h1 { + font-size: 52px; + margin-bottom: 0; + margin-top: -8px; + } } .table { - margin-top: 48px; + margin-top: 26px; font-size: 32px; } @@ -20,14 +33,14 @@ flex-grow: 0; flex-shrink: 0; width: 470px; - height: 390px; + height: 386px; min-width: 470px; - min-height: 390px; - max-height: 390px; + min-height: 386px; + max-height: 386px; padding: 0; background: #181b2d; overflow: hidden; - margin-top: 18px; + margin-top: 0; } .row { @@ -36,6 +49,7 @@ .full-width-row { padding-left: 15px; + flex-wrap: nowrap; } ::ng-deep .symbol { From 4ee5ef336c2ad6c39d201a01e50a17f6e1e5629e Mon Sep 17 00:00:00 2001 From: Mononaut Date: Thu, 1 Sep 2022 14:57:14 +0000 Subject: [PATCH 2/8] Move lightning preview headers to top bar --- .../master-page-preview.component.html | 6 ++-- .../master-page-preview.component.scss | 12 +++++++ .../channel/channel-preview.component.html | 6 ++-- .../channel/channel-preview.component.scss | 29 ++++++++-------- .../node/node-preview.component.html | 6 ++-- .../node/node-preview.component.scss | 34 +++++++++---------- 6 files changed, 50 insertions(+), 43 deletions(-) diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.html b/frontend/src/app/components/master-page-preview/master-page-preview.component.html index b08c991de..917a44486 100644 --- a/frontend/src/app/components/master-page-preview/master-page-preview.component.html +++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.html @@ -7,12 +7,12 @@
- Signet Lightning - Testnet Lightning + Signet + Testnet Bisq Liquid Liquid Testnet - Mainnet Lightning + Mainnet
diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss index 605c4f6d9..4d5f173fa 100644 --- a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss +++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss @@ -33,4 +33,16 @@ justify-content: flex-start; align-items: center; } + + ::ng-deep .preview-header { + position: absolute; + top: -80px; + width: 100%; + padding: 0 220px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + z-index: 101; + line-height: 80px; + } } diff --git a/frontend/src/app/lightning/channel/channel-preview.component.html b/frontend/src/app/lightning/channel/channel-preview.component.html index 364e8c9fe..bf7d5dab3 100644 --- a/frontend/src/app/lightning/channel/channel-preview.component.html +++ b/frontend/src/app/lightning/channel/channel-preview.component.html @@ -1,9 +1,7 @@
+

Lightning channel

-
-
Lightning channel
-

{{ channel.short_id }}

-
+

{{ channel.short_id }}

Inactive Active diff --git a/frontend/src/app/lightning/channel/channel-preview.component.scss b/frontend/src/app/lightning/channel/channel-preview.component.scss index e8e08d5e2..cee0f1bcb 100644 --- a/frontend/src/app/lightning/channel/channel-preview.component.scss +++ b/frontend/src/app/lightning/channel/channel-preview.component.scss @@ -1,28 +1,28 @@ -.title-container { +.title { + font-size: 52px; + margin: 0; width: 0; flex-grow: 1; flex-shrink: 1; overflow: hidden; - - h5 { - font-size: 28px; - margin-top: -4px; - } - - h1 { - font-size: 52px; - margin-bottom: 0; - margin-top: -8px; - } + text-overflow: ellipsis; + white-space: nowrap; } .table { - margin-top: 14px; font-size: 32px; + margin-top: 36px; } .badges { font-size: 28px; + flex-shrink: 0; + flex-grow: 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: baseline; + justify-content: flex-end; ::ng-deep .badge { margin-left: 0.5em; @@ -38,7 +38,7 @@ padding-right: 15px; flex-wrap: nowrap; - &:nth-child(even) { + &:nth-child(odd) { background: #181b2d; margin: 15px 0; } @@ -47,7 +47,6 @@ .nodes { font-size: 36px; align-items: center; - margin-top: 0px; } .between-arrow { diff --git a/frontend/src/app/lightning/node/node-preview.component.html b/frontend/src/app/lightning/node/node-preview.component.html index 22a8095b1..4ebbf5cfd 100644 --- a/frontend/src/app/lightning/node/node-preview.component.html +++ b/frontend/src/app/lightning/node/node-preview.component.html @@ -1,9 +1,7 @@
+

Lightning node

-
-
Lightning node
-

{{ node.alias }}

-
+

{{ node.alias }}

{{ socketType }}
diff --git a/frontend/src/app/lightning/node/node-preview.component.scss b/frontend/src/app/lightning/node/node-preview.component.scss index b629bbcae..c0b86ce42 100644 --- a/frontend/src/app/lightning/node/node-preview.component.scss +++ b/frontend/src/app/lightning/node/node-preview.component.scss @@ -1,28 +1,28 @@ -.title-container { +.title { + font-size: 52px; + margin: 0; width: 0; flex-grow: 1; flex-shrink: 1; overflow: hidden; - - h5 { - font-size: 28px; - margin-top: -4px; - } - - h1 { - font-size: 52px; - margin-bottom: 0; - margin-top: -8px; - } + text-overflow: ellipsis; + white-space: nowrap; } .table { - margin-top: 26px; + margin-top: 48px; font-size: 32px; } .badges { font-size: 28px; + flex-shrink: 0; + flex-grow: 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: baseline; + justify-content: flex-end; ::ng-deep .badge { margin-left: 0.5em; @@ -33,14 +33,14 @@ flex-grow: 0; flex-shrink: 0; width: 470px; - height: 386px; + height: 390px; min-width: 470px; - min-height: 386px; - max-height: 386px; + min-height: 390px; + max-height: 390px; padding: 0; background: #181b2d; overflow: hidden; - margin-top: 0; + margin-top: 18px; } .row { From 2a28ccc7588403b7651a03e213bc0567583d875f Mon Sep 17 00:00:00 2001 From: Mononaut Date: Thu, 1 Sep 2022 17:01:31 +0000 Subject: [PATCH 3/8] Update block, address & tx preview layouts --- .../address/address-preview.component.html | 10 ++-- .../address/address-preview.component.scss | 27 ++-------- .../block/block-preview.component.html | 23 ++++---- .../block/block-preview.component.scss | 14 ++--- .../master-page-preview.component.scss | 50 +++++++++++++++++ .../transaction-preview.component.html | 12 ++--- .../transaction-preview.component.scss | 53 ++----------------- .../channel/channel-preview.component.html | 26 ++++----- .../channel/channel-preview.component.scss | 23 +++----- .../node/node-preview.component.html | 8 ++- .../node/node-preview.component.scss | 21 ++------ frontend/src/styles.scss | 2 +- 12 files changed, 114 insertions(+), 155 deletions(-) diff --git a/frontend/src/app/components/address/address-preview.component.html b/frontend/src/app/components/address/address-preview.component.html index 30b9c29e6..6a2d1efee 100644 --- a/frontend/src/app/components/address/address-preview.component.html +++ b/frontend/src/app/components/address/address-preview.component.html @@ -1,12 +1,12 @@
+

Address

-
-

Address

+
+
+

{{addressString.slice(0,-4)}}{{addressString.slice(-4)}}

+
- - {{addressString.slice(0,-4)}}{{addressString.slice(-4)}} - diff --git a/frontend/src/app/components/address/address-preview.component.scss b/frontend/src/app/components/address/address-preview.component.scss index 2de368547..afa8cb4b4 100644 --- a/frontend/src/app/components/address/address-preview.component.scss +++ b/frontend/src/app/components/address/address-preview.component.scss @@ -1,6 +1,5 @@ -h1 { - font-size: 52px; - margin: 0; +.title-wrapper { + padding: 0 15px; } .qr-wrapper { @@ -23,27 +22,9 @@ h1 { .table { font-size: 32px; + margin-top: 48px; ::ng-deep .symbol { font-size: 24px; } -} - -.address-link { - font-size: 24px; - margin-bottom: 0.5em; - display: flex; - flex-direction: row; - align-items: baseline; - .truncated-address { - text-overflow: ellipsis; - overflow: hidden; - max-width: calc(640px - 4em); - display: inline-block; - white-space: nowrap; - } - .last-four { - display: inline-block; - white-space: nowrap; - } -} +} \ No newline at end of file diff --git a/frontend/src/app/components/block/block-preview.component.html b/frontend/src/app/components/block/block-preview.component.html index 768bc3da3..38018bbb4 100644 --- a/frontend/src/app/components/block/block-preview.component.html +++ b/frontend/src/app/components/block/block-preview.component.html @@ -1,19 +1,16 @@
+

Block

-

- Genesis - - {{ blockHeight }} - - - Block - - - {{ blockHeight }} - - -

+
+
+

+ Genesis + {{ blockHeight }} +

+
+
+ {{blockHash.slice(0,-4)}}{{blockHash.slice(-4)}}