mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 06:47:52 +01:00
Code Issues Projects Releases Wiki Activity

Fix some responsive issue on the node component

Browse source
This commit is contained in:
nymkappa 2023-03-12 10:16:49 +09:00
parent 5dc52250e6
commit 31cfbf6625
No known key found for this signature in database
GPG key ID: E155910B16E8BD04
5 changed files with 54 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
View file

@ -4,7 +4,6 @@
<div class="row row-cols-1 row-cols-md-2">
<!-- Temporary stuff here - Will be moved to a component once we have more useful data to show -->
<div class="col">
<div class="main-title">
<span [attr.data-cy]="'reward-stats'" i18n="mining.reward-stats">Reward stats</span>&nbsp;

36
frontend/src/app/lightning/channels-list/channels-list.component.html
View file

@ -36,25 +36,25 @@
<ng-template #tableHeader>
<thead>
<th class="alias text-left" i18n="lightning.alias">Alias</th>
<th class="alias text-left d-none d-md-table-cell">&nbsp;</th>
<th class="alias text-left d-none d-md-table-cell" i18n="status">Status</th>
<th *ngIf="status !== 'closed'" class="channels text-left d-none d-md-table-cell" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
<th *ngIf="status === 'closed'" class="channels text-left d-none d-md-table-cell" i18n="channels.closing_date">Closing date</th>
<th class="capacity text-right d-none d-md-table-cell" i18n="lightning.capacity">Capacity</th>
<th class="capacity text-right" i18n="channels.id">Channel ID</th>
<th class="nodedetails text-left">&nbsp;</th>
<th class="status text-left" i18n="status">Status</th>
<th class="feerate text-left" *ngIf="status !== 'closed'" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
<th class="feerate text-left" *ngIf="status === 'closed'" i18n="channels.closing_date">Closing date</th>
<th class="liquidity text-right" i18n="lightning.capacity">Capacity</th>
<th class="channelid text-right" i18n="channels.id">Channel ID</th>
</thead>
</ng-template>
<ng-template #tableTemplate let-channel let-node="node">
<td class="alias text-left">
<div>{{ node.alias || '?' }}</div>
<app-truncate [text]="node.alias || '?'" [maxWidth]="200" [lastChars]="6"></app-truncate>
<div class="second-line">
<app-truncate [text]="node.public_key" [maxWidth]="200" [lastChars]="6" [link]="['/lightning/node' | relativeUrl, node.public_key]">
<app-clipboard [text]="node.public_key" size="small"></app-clipboard>
</app-truncate>
</div>
</td>
<td class="alias text-left d-none d-md-table-cell">
<td class="nodedetails text-left">
<div class="second-line"><ng-container *ngTemplateOutlet="xChannels; context: {$implicit: node.channels }"></ng-container></div>
<div class="second-line">
<app-amount *ngIf="node.capacity > 100000000; else smallnode" [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
@ -64,7 +64,7 @@
</ng-template>
</div>
</td>
<td class="d-none d-md-table-cell">
<td class="status">
<span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
<span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
<ng-template [ngIf]="channel.status === 2">
@ -74,20 +74,20 @@
</ng-template>
</ng-template>
</td>
<td *ngIf="status !== 'closed'" class="capacity text-left d-none d-md-table-cell">
<td *ngIf="status !== 'closed'" class="feerate text-left">
{{ channel.fee_rate }} <span class="symbol">ppm ({{ channel.fee_rate / 10000 | number }}%)</span>
</td>
<td *ngIf="status === 'closed'" class="capacity text-left d-none d-md-table-cell">
<td *ngIf="status === 'closed'" class="feerate text-left">
<app-timestamp [unixTime]="channel.closing_date"></app-timestamp>
</td>
<td class="capacity text-right d-none d-md-table-cell">
<td class="liquidity text-right">
<app-amount *ngIf="channel.capacity > 100000000; else smallchannel" [satoshis]="channel.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
<ng-template #smallchannel>
{{ channel.capacity | amountShortener: 1 }}
<span class="sats" i18n="shared.sats">sats</span>
</ng-template>
</td>
<td class="capacity text-right">
<td class="channelid text-right">
<a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.short_id }}</a>
</td>
</ng-template>
@ -100,19 +100,19 @@
<td class="alias text-left" style="width: 370px;">
<span class="skeleton-loader"></span>
</td>
<td class="alias text-left">
<td class="nodedetails text-left">
<span class="skeleton-loader"></span>
</td>
<td class="capacity text-left d-none d-md-table-cell">
<td class="status text-left">
<span class="skeleton-loader"></span>
</td>
<td class="channels text-left d-none d-md-table-cell">
<td class="feerate text-left">
<span class="skeleton-loader"></span>
</td>
<td class="channels text-right d-none d-md-table-cell">
<td class="liquidity text-right">
<span class="skeleton-loader"></span>
</td>
<td class="channels text-left">
<td class="channelid text-left">
<span class="skeleton-loader"></span>
</td>
</tr>

32
frontend/src/app/lightning/channels-list/channels-list.component.scss
View file

@ -32,3 +32,35 @@
flex-grow: 1;
}
}
.alias {
padding-left: 0;
}
.feerate {
@media (max-width: 815px) {
display: none;
}
}
.status {
@media (max-width: 710px) {
display: none;
}
}
.nodedetails {
@media (max-width: 600px) {
display: none;
}
}
.liquidity {
@media (max-width: 500px) {
display: none;
}
}
.channelid {
padding-right: 0;
}

2
frontend/src/app/lightning/node/node.component.html
View file

@ -57,7 +57,7 @@
</tr>
<tr *ngIf="(avgChannelDistance$ | async) as avgDistance;">
<td i18n="lightning.avg-distance" class="text-truncate">Avg channel distance</td>
<td class="direction-ltr">{{ avgDistance | number : '1.0-0' }} <span class="symbol">km</span> <span class="separator">/</span> {{ kmToMiles(avgDistance) | number : '1.0-0' }} <span class="symbol">mi</span></td>
<td class="direction-ltr">{{ avgDistance | amountShortener: 1 }} <span class="symbol">km</span> <span class="separator">·</span>{{ kmToMiles(avgDistance) | amountShortener: 1 }} <span class="symbol">mi</span></td>
</tr>
</tbody>
</table>

3
frontend/src/app/lightning/node/node.component.scss
View file

@ -108,5 +108,6 @@ app-fiat {
}
.separator {
margin: 0 1em;
margin: 0 0.25em;
color: slategrey;
}