Node aliase ellipsis

fixes #2455
mempool · Aug 31, 2022 · e13c89f · e13c89f
1 parent 8a2925a
commit e13c89f
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 28 deletions.
diff --git a/frontend/src/app/lightning/channel/channel-box/channel-box.component.html b/frontend/src/app/lightning/channel/channel-box/channel-box.component.html
@@ -1,6 +1,6 @@
 <div class="mb-2 box-top">
-  <div class="box-left">
-    <h3 class="mb-0">{{ channel.alias || '?' }}</h3>
+  <div class="box-left text-truncate">
+    <h3 class="mb-0 text-truncate">{{ channel.alias || '?' }}</h3>
     <a [routerLink]="['/lightning/node' | relativeUrl, channel.public_key]" >
       {{ channel.public_key | shortenString : 12 }}
     </a>

diff --git a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss b/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
@@ -8,8 +8,8 @@
 
 .box-right {
   text-align: right;
-  width: 50%;
-  margin-top: auto;
+  margin: auto;
+  white-space: nowrap;
 }
 
 .shared-block {

diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html
@@ -158,9 +158,9 @@ <h2 *ngIf="channelsListStatus === 'closed'">
   <div class="container-xl">
     <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
     <div class="title-container mb-2">
-      <h1 class="mb-0"><span class="skeleton-loader" style="width: 250px; height: 36px;"></span></h1>
+      <h1 class="mb-0"><span class="skeleton-loader" style="width: 250px; height: 36px; margin-top: 5px; margin-bottom: 5px;"></span></h1>
       <span class="tx-link">
-        <span class="skeleton-loader" style="margin-bottom: 5px; width: 80%;"></span>
+        <span class="skeleton-loader" style="margin-bottom: 3px; width: 80%;"></span>
       </span>
     </div>
 

diff --git a/frontend/src/app/lightning/node/node.component.scss b/frontend/src/app/lightning/node/node.component.scss
@@ -1,29 +1,11 @@
 .title-container {
   display: flex;
-  flex-direction: row;
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-  }
+  flex-direction: column;
 }
 
 .tx-link {
   display: flex;
-	flex-grow: 1;
-	@media (min-width: 650px) {
-    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;
-	}
+	flex-wrap: wrap;
 }
 
 .qr-wrapper {
@@ -83,4 +65,10 @@ app-fiat {
   @media (min-width: 576px) {
     width: 40%;
   }
-}
+}
+
+@media (max-width: 767.98px) {
+  h1 > .skeleton-loader {
+    height: 28px !important;
+  };
+}
diff --git a/frontend/src/app/lightning/node/node.component.ts b/frontend/src/app/lightning/node/node.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Observable } from 'rxjs';
-import { catchError, map, switchMap } from 'rxjs/operators';
+import { catchError, map, switchMap, delay } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
 import { LightningApiService } from '../lightning-api.service';
 import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
@@ -36,6 +36,7 @@ export class NodeComponent implements OnInit {
           this.publicKey = params.get('public_key');
           return this.lightningApiService.getNode$(params.get('public_key'));
         }),
+        delay(1000),
         map((node) => {
           this.seoService.setTitle(`Node: ${node.alias}`);