Update block, address & tx preview layouts

frontend/src/app/components/address/address-preview.component.html

@@ -1,12 +1,12 @@
 <div class="box preview-box" *ngIf="address && !error">
+  <h2 class="preview-header" i18n="shared.address">Address</h2>
   <div class="row">
     <div class="col-md">
-      <div class="title-address">
+      <div class="row d-flex justify-content-between">
-        <h1 i18n="shared.address">Address</h1>
+        <div class="title-wrapper">
+          <h1 class="title truncated"><span class="first">{{addressString.slice(0,-4)}}</span><span class="last-four">{{addressString.slice(-4)}}</span></h1>
+        </div>
       </div>
-      <a [routerLink]="['/address/' | relativeUrl, addressString]" class="address-link" >
-        <span class="truncated-address">{{addressString.slice(0,-4)}}</span><span class="last-four">{{addressString.slice(-4)}}</span>
-      </a>
       <table class="table table-borderless table-striped">
         <tbody>
           <tr *ngIf="addressInfo && addressInfo.unconfidential">

frontend/src/app/components/address/address-preview.component.scss

@@ -1,6 +1,5 @@
-h1 {
+.title-wrapper {
-  font-size: 52px;
+  padding: 0 15px;
-  margin: 0;
 }
 
 .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;
-  }
-}

frontend/src/app/components/block/block-preview.component.html

@@ -1,19 +1,16 @@
 <div class="box preview-box" *ngIf="!error">
+  <h2 class="preview-header" i18n="shared.block-title">Block</h2>
   <div class="row">
     <div class="col-sm">
-      <h1 class="block-title">
+      <div class="row d-flex justify-content-between">
-        <ng-template [ngIf]="blockHeight === 0"><ng-container i18n="@@2303359202781425764">Genesis</ng-container>
+        <div class="title-wrapper">
-          <span class="next-previous-blocks">
+          <h1 class="title">
-            <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
+            <ng-template [ngIf]="blockHeight === 0"><ng-container i18n="@@2303359202781425764">Genesis</ng-container></ng-template>
-          </span>
+            <ng-template [ngIf]="blockHeight" i18n="shared.block-title">{{ blockHeight }}</ng-template>
-        </ng-template>
+          </h1>
-        <ng-template [ngIf]="blockHeight" i18n="shared.block-title">Block <ng-container *ngTemplateOutlet="blockTemplateContent"></ng-container></ng-template>
+        </div>
-        <ng-template #blockTemplateContent>
+      </div>
-          <span class="next-previous-blocks">
+      <a class="subtitle truncated" [routerLink]="['/block/' | relativeUrl, blockHash]"><span class="first">{{blockHash.slice(0,-4)}}</span><span class="last-four">{{blockHash.slice(-4)}}</span></a>
-            <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
-          </span>
-        </ng-template>
-      </h1>
       <table class="table table-borderless table-striped">
         <tbody>
           <!-- <tr>

frontend/src/app/components/block/block-preview.component.scss

@@ -1,14 +1,10 @@
-.block-title {
-  margin-bottom: 48px;
-  font-size: 52px;
-
-  ::ng-deep .next-previous-blocks {
-    font-size: 52px;
-  }
-}
-
 .table {
   font-size: 32px;
+  margin-top: 6px;
+}
+
+.title-wrapper {
+  padding-left: 15px;
 }
 
 .chart-container {

frontend/src/app/components/master-page-preview/master-page-preview.component.scss

@@ -37,6 +37,8 @@
   ::ng-deep .preview-header {
     position: absolute;
     top: -80px;
+    left: 0;
+    right: 0;
     width: 100%;
     padding: 0 220px;
     text-align: center;
@@ -44,5 +46,53 @@
     text-overflow: ellipsis;
     z-index: 101;
     line-height: 80px;
+    text-transform: capitalize;
+  }
+
+  ::ng-deep .title {
+    font-size: 52px;
+  }
+  ::ng-deep .subtitle {
+    font-size: 28px;
+  }
+
+  ::ng-deep .title, ::ng-deep .subtitle {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+    display: inline-block;
+
+    &.truncated {
+      text-overflow: unset;
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+
+      .first {
+        flex-grow: 1;
+        flex-shrink: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: -2px;
+      }
+
+      .last-four {
+        flex-shrink: 0;
+        flex-grow: 0;
+      }
+    }
+  }
+
+  ::ng-deep .title-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    margin: 0;
+    width: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
   }
 }

frontend/src/app/components/transaction/transaction-preview.component.html

@@ -1,10 +1,9 @@
 <div class="box preview-box" *ngIf="tx && !error">
-
+  <h2 class="preview-header" i18n="shared.transaction">Transaction</h2>
-  <div class="page-title">
+  <div class="row d-flex justify-content-between full-width-row">
-    <h1 i18n="shared.transaction">Transaction</h1>
+    <div class="title-wrapper">
-    <a class="tx-link" [routerLink]="['/tx/' | relativeUrl, txId]">
+      <h1 class="title truncated"><span class="first">{{txId.slice(0,-4)}}</span><span class="last-four">{{txId.slice(-4)}}</span></h1>
-      <span class="truncated">{{txId.slice(0,-4)}}</span><span class="last-four">{{txId.slice(-4)}}</span>
+    </div>
-    </a>
     <div *ngIf="network !== 'liquid' && network !== 'liquidtestnet'" class="features">
       <app-tx-features [tx]="tx"></app-tx-features>
       <span *ngIf="cpfpInfo && cpfpInfo.bestDescendant" class="badge badge-primary mr-1">
@@ -15,7 +14,6 @@
       </span>
     </div>
   </div>
-
   <div class="top-data row">
     <span class="field col-sm-4 text-left">
       <ng-template [ngIf]="isLiquid && haveBlindedOutputValues(tx)" [ngIfElse]="defaultAmount" i18n="shared.confidential">Confidential</ng-template>

frontend/src/app/components/transaction/transaction-preview.component.scss

@@ -26,56 +26,9 @@
 	margin-top: 0px;
 }
 
-.page-title {
+.features {
-  display: flex;
+  font-size: 24px;
-  flex-direction: row;
+  margin-left: 1em;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 2px;
-  max-width: 100%;
-
-  h1 {
-    font-size: 52px;
-    margin: 0;
-    line-height: 1;
-  }
-
-  .features {
-    font-size: 24px;
-  }
-
-  & > * {
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-
-  .tx-link {
-    flex-grow: 1;
-    flex-shrink: 1;
-    margin: 0 1em;
-    overflow: hidden;
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-
-    .truncated {
-      flex-grow: 1;
-      flex-shrink: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-right: -2px;
-    }
-
-    .last-four {
-      flex-shrink: 0;
-      flex-grow: 0;
-    }
-  }
-
-  .features {
-    align-self: center;
-  }
 }
 
 .top-data {

frontend/src/app/lightning/channel/channel-preview.component.html

@@ -1,7 +1,9 @@
 <div class="box preview-box" *ngIf="(channel$ | async) as channel">
-  <h2 class="preview-header" i18n="lightning.channel">Lightning channel</h2>
+  <h2 class="preview-header" i18n="lightning.channel">lightning channel</h2>
   <div class="row d-flex justify-content-between full-width-row">
-    <h1 class="title">{{ channel.short_id }}</h1>
+    <div class="title-wrapper">
+      <h1 class="title">{{ channel.short_id }}</h1>
+    </div>
     <div class="badges mb-2">
       <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>
       <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1">Active</span>
@@ -10,20 +12,11 @@
       <app-closing-type [type]="channel.closing_reason" *ngIf="channel.status === 2"></app-closing-type>
     </div>
   </div>
-  <div class="row d-flex justify-content-between full-width-row nodes">
-    <span class="node left">
-      {{ channel.node_left.alias || '?' }}
-    </span>
-    <fa-icon class="between-arrow" [icon]="['fas', 'arrow-right-arrow-left']" [fixedWidth]="true" title="channel between"></fa-icon>
-    <span class="node right">
-      {{ channel.node_right.alias || '?' }}
-    </span>
-  </div>
   <div class="row">
     <div class="col-md">
+      <a class="subtitle" [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
       <table class="table table-borderless table-striped">
         <tbody>
-          <tr></tr>
           <tr>
             <td i18n="channel.created">Created</td>
             <td>{{ channel.created | date:'yyyy-MM-dd HH:mm' }}</td>
@@ -59,6 +52,15 @@
       <app-nodes-channels-map *ngIf="!error" [style]="'channelpage'" [channel]="channelGeo" [fitContainer]="true" [placeholder]="true" (readyEvent)="onMapReady()"></app-nodes-channels-map>
     </div>
   </div>
+  <div class="row d-flex justify-content-between full-width-row nodes">
+    <span class="node left">
+      {{ channel.node_left.alias || '?' }}
+    </span>
+    <fa-icon class="between-arrow" [icon]="['fas', 'arrow-right-arrow-left']" [fixedWidth]="true" title="channel between"></fa-icon>
+    <span class="node right">
+      {{ channel.node_right.alias || '?' }}
+    </span>
+  </div>
 </div>
 
 <ng-template [ngIf]="error">

frontend/src/app/lightning/channel/channel-preview.component.scss

@@ -1,17 +1,6 @@
-.title {
-  font-size: 52px;
-  margin: 0;
-  width: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .table {
   font-size: 32px;
-  margin-top: 36px;
+  margin-top: 10px;
 }
 
 .badges {
@@ -37,11 +26,11 @@
   padding-left: 15px;
   padding-right: 15px;
   flex-wrap: nowrap;
+}
 
-  &:nth-child(odd) {
+.row.nodes {
-    background: #181b2d;
+  background: #181b2d;
-    margin: 15px 0;
+  margin: 15px 0 0;
-  }
 }
 
 .nodes {
@@ -60,7 +49,7 @@
   min-width: 470px;
   padding: 0;
   background: #181b2d;
-  max-height: 470px;
+  max-height: 350px;
   overflow: hidden;
 }
 

frontend/src/app/lightning/node/node-preview.component.html

@@ -1,13 +1,17 @@
 <div class="box preview-box" *ngIf="(node$ | async) as node">
-  <h2 class="preview-header" i18n="lightning.node">Lightning node</h2>
+  <h2 class="preview-header" i18n="lightning.node">lightning node</h2>
   <div class="row d-flex justify-content-between full-width-row">
-    <h1 class="title">{{ node.alias }}</h1>
+    <h1 class="title"></h1>
+    <div class="title-wrapper">
+      <h1 class="title">{{ node.alias }}</h1>
+    </div>
     <div class="badges mb-2">
       <span class="badge rounded-pill badge-success" *ngFor="let socketType of socketTypes">{{ socketType }}</span>
     </div>
   </div>
   <div class="row">
     <div class="col-md">
+      <a class="subtitle" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">{{ node.public_key }}</a>
       <table class="table table-borderless table-striped">
         <tbody>
           <tr>

frontend/src/app/lightning/node/node-preview.component.scss

@@ -1,16 +1,5 @@
-.title {
-  font-size: 52px;
-  margin: 0;
-  width: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .table {
-  margin-top: 48px;
+  margin-top: 6px;
   font-size: 32px;
 }
 
@@ -33,14 +22,14 @@
   flex-grow: 0;
   flex-shrink: 0;
   width: 470px;
-  height: 390px;
+  height: 408px;
   min-width: 470px;
-  min-height: 390px;
+  min-height: 408px;
-  max-height: 390px;
+  max-height: 408px;
   padding: 0;
   background: #181b2d;
   overflow: hidden;
-  margin-top: 18px;
+  margin-top: 6px;
 }
 
 .row {

frontend/src/styles.scss

@@ -89,7 +89,7 @@ body {
 
 .preview-box {
   min-height: 520px;
-  padding: 1.5rem 3rem;
+  padding: 1rem 3rem 1.5rem;
 }
 
 @media (max-width: 767.98px) {