Skip to content

Commit

Permalink
Node aliase ellipsis
Browse files Browse the repository at this point in the history
fixes #2455
  • Loading branch information
softsimon committed Aug 31, 2022
1 parent 8a2925a commit e13c89f
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 28 deletions.
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@

.box-right {
text-align: right;
width: 50%;
margin-top: auto;
margin: auto;
white-space: nowrap;
}

.shared-block {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/lightning/node/node.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
30 changes: 9 additions & 21 deletions frontend/src/app/lightning/node/node.component.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -83,4 +65,10 @@ app-fiat {
@media (min-width: 576px) {
width: 40%;
}
}
}

@media (max-width: 767.98px) {
h1 > .skeleton-loader {
height: 28px !important;
};
}
3 changes: 2 additions & 1 deletion frontend/src/app/lightning/node/node.component.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}`);

Expand Down

0 comments on commit e13c89f

Please sign in to comment.