Hide new columns when screen width is too small

This commit is contained in:
nymkappa 2023-02-24 14:20:16 +09:00
parent 4e55f5323e
commit a26dc977ba
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
4 changed files with 13 additions and 10 deletions

View File

@ -10,7 +10,7 @@
<thead> <thead>
<th class="text-left" i18n="nodes.alias">Alias</th> <th class="text-left" i18n="nodes.alias">Alias</th>
<th class="liquidity text-right" i18n="node.liquidity">Liquidity</th> <th class="liquidity text-right" i18n="node.liquidity">Liquidity</th>
<th class="d-none d-md-table-cell text-right" i18n="node.liquidity">{{ currency$ | async }}</th> <th class="d-table-cell fiat text-right" [class]="{'widget': widget}">{{ currency$ | async }}</th>
<th *ngIf="!widget" class="d-none d-md-table-cell channels text-right" i18n="lightning.channels">Channels</th> <th *ngIf="!widget" class="d-none d-md-table-cell channels text-right" i18n="lightning.channels">Channels</th>
<th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="transaction.first-seen|Transaction first seen">First seen</th> <th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="transaction.first-seen|Transaction first seen">First seen</th>
<th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="lightning.last_update">Last update</th> <th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="lightning.last_update">Last update</th>
@ -28,7 +28,7 @@
<td class="text-right"> <td class="text-right">
<app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount> <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</td> </td>
<td class="fiat d-none d-md-table-cell text-right"> <td class="d-table-cell fiat text-right" [ngClass]="{'widget': widget}">
<app-fiat [value]="node.capacity"></app-fiat> <app-fiat [value]="node.capacity"></app-fiat>
</td> </td>
<td *ngIf="!widget" class="d-none d-md-table-cell text-right"> <td *ngIf="!widget" class="d-none d-md-table-cell text-right">

View File

@ -45,4 +45,7 @@ tr, td, th {
width: 15%; width: 15%;
font-family: monospace; font-family: monospace;
font-size: 14px; font-size: 14px;
@media (max-width: 991px) {
display: none !important;
}
} }

View File

@ -14,7 +14,7 @@
<th *ngIf="!widget" class="d-none d-md-table-cell text-right" i18n="node.liquidity">{{ currency$ | async }}</th> <th *ngIf="!widget" class="d-none d-md-table-cell text-right" i18n="node.liquidity">{{ currency$ | async }}</th>
<th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="transaction.first-seen|Transaction first seen">First seen</th> <th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="transaction.first-seen|Transaction first seen">First seen</th>
<th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="lightning.last_update">Last update</th> <th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="lightning.last_update">Last update</th>
<th class="d-none d-md-table-cell text-right" i18n="lightning.location">Location</th> <th class="geolocation d-table-cell text-right" i18n="lightning.location">Location</th>
</thead> </thead>
<tbody *ngIf="topNodesPerChannels$ | async as nodes"> <tbody *ngIf="topNodesPerChannels$ | async as nodes">
<tr *ngFor="let node of nodes;"> <tr *ngFor="let node of nodes;">
@ -26,7 +26,7 @@
</div> </div>
</td> </td>
<td class="text-right"> <td class="text-right">
{{ node.channels | number }} {{ node.channels ? (node.channels | number) : '~' }}
</td> </td>
<td *ngIf="!widget" class="d-none d-md-table-cell capacity text-right"> <td *ngIf="!widget" class="d-none d-md-table-cell capacity text-right">
<app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount> <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
@ -40,7 +40,7 @@
<td *ngIf="!widget" class="d-none d-md-table-cell text-right"> <td *ngIf="!widget" class="d-none d-md-table-cell text-right">
<app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt" [hideTimeSince]="true"></app-timestamp> <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt" [hideTimeSince]="true"></app-timestamp>
</td> </td>
<td class="d-none d-md-table-cell text-right text-truncate"> <td class="geolocation d-table-cell text-right text-truncate">
<app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation> <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
</td> </td>
</tr> </tr>

View File

@ -44,8 +44,8 @@ tr, td, th {
} }
} }
.fiat { .geolocation {
width: 15%; @media (max-width: 991px) {
font-family: monospace; display: none !important;
font-size: 14px; }
} }