Merge pull request #2480 from mempool/simon/node-alias-ellipsis

Node aliase ellipsis
mempool · Aug 31, 2022 · 10bca8f · 10bca8f
2 parents 8a2925a + 0bc3102
commit 10bca8f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 27 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;
+  };
+}