Fix node header layout

This commit is contained in:
nymkappa 2022-08-31 08:17:42 +02:00
parent 9131521e7d
commit e8151e8393
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
3 changed files with 19 additions and 12 deletions

View File

@ -22,30 +22,30 @@
<div class="row"> <div class="row">
<div class="col-md"> <div class="col-md">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped table-fixed">
<tbody> <tbody>
<tr> <tr>
<td i18n="lightning.active-capacity">Active capacity</td> <td i18n="lightning.active-capacity" class="text-truncate label">Active capacity</td>
<td> <td>
<app-sats [satoshis]="node.capacity"></app-sats> <app-sats [satoshis]="node.capacity"></app-sats>
<app-fiat [value]="node.capacity" digitsInfo="1.0-0"></app-fiat> <app-fiat [value]="node.capacity" digitsInfo="1.0-0"></app-fiat>
</td> </td>
</tr> </tr>
<tr> <tr>
<td i18n="lightning.active-channels">Active channels</td> <td i18n="lightning.active-channels" class="text-truncate label">Active channels</td>
<td> <td>
{{ node.active_channel_count }} {{ node.active_channel_count }}
</td> </td>
</tr> </tr>
<tr> <tr>
<td i18n="lightning.active-channels-avg">Average channel size</td> <td i18n="lightning.active-channels-avg" class="text-wrap label">Average channel size</td>
<td> <td>
<app-sats [satoshis]="node.avgCapacity"></app-sats> <app-sats [satoshis]="node.avgCapacity"></app-sats>
<app-fiat [value]="node.avgCapacity" digitsInfo="1.0-0"></app-fiat> <app-fiat [value]="node.avgCapacity" digitsInfo="1.0-0"></app-fiat>
</td> </td>
</tr> </tr>
<tr *ngIf="node.geolocation"> <tr *ngIf="node.geolocation">
<td i18n="location">Location</td> <td i18n="location" class="text-truncate">Location</td>
<td> <td>
<app-geolocation [data]="node.geolocation" [type]="'node'"></app-geolocation> <app-geolocation [data]="node.geolocation" [type]="'node'"></app-geolocation>
</td> </td>
@ -55,30 +55,30 @@
</div> </div>
<div class="w-100 d-block d-md-none"></div> <div class="w-100 d-block d-md-none"></div>
<div class="col-md"> <div class="col-md">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped table-fixed">
<tbody> <tbody>
<tr> <tr>
<td i18n="address.total-received">First seen</td> <td i18n="address.total-received" class="text-truncate label">First seen</td>
<td> <td>
<app-timestamp [unixTime]="node.first_seen"></app-timestamp> <app-timestamp [unixTime]="node.first_seen"></app-timestamp>
</td> </td>
</tr> </tr>
<tr> <tr>
<td i18n="address.total-sent">Last update</td> <td i18n="address.total-sent" class="text-truncate label">Last update</td>
<td> <td>
<app-timestamp [unixTime]="node.updated_at"></app-timestamp> <app-timestamp [unixTime]="node.updated_at"></app-timestamp>
</td> </td>
</tr> </tr>
<tr> <tr>
<td i18n="address.balance">Color</td> <td i18n="address.balance" class="text-truncate label">Color</td>
<td> <td>
<div [ngStyle]="{'color': node.color}">{{ node.color }}</div> <div [ngStyle]="{'color': node.color}">{{ node.color }}</div>
</td> </td>
</tr> </tr>
<tr *ngIf="node.country"> <tr *ngIf="node.country">
<td i18n="isp">ISP</td> <td i18n="isp" class="text-truncate label">ISP</td>
<td> <td>
<a [routerLink]="['/lightning/nodes/isp' | relativeUrl, node.as_number]"> <a class="d-block text-wrap" [routerLink]="['/lightning/nodes/isp' | relativeUrl, node.as_number]">
{{ node.as_organization }} [ASN {{node.as_number}}] {{ node.as_organization }} [ASN {{node.as_number}}]
</a> </a>
</td> </td>

View File

@ -77,3 +77,10 @@ app-fiat {
left: calc(50% - 15px); left: calc(50% - 15px);
z-index: 100; z-index: 100;
} }
.label {
width: 50%;
@media (min-width: 576px) {
width: 40%;
}
}

View File

@ -1 +1 @@
<span [innerHTML]="formattedLocation"></span> <span class="d-block text-truncate" [innerHTML]="formattedLocation"></span>