Move lightning preview headers to top bar
This commit is contained in:
parent
3da76892d5
commit
4ee5ef336c
@ -7,12 +7,12 @@
|
|||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div [ngSwitch]="network.val">
|
<div [ngSwitch]="network.val">
|
||||||
<span *ngSwitchCase="'signet'" class="network signet"><app-svg-images name="signet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Signet <ng-template [ngIf]="(lightning$ | async)">Lightning</ng-template></span>
|
<span *ngSwitchCase="'signet'" class="network signet"><app-svg-images name="signet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Signet</span>
|
||||||
<span *ngSwitchCase="'testnet'" class="network testnet"><app-svg-images name="testnet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Testnet <ng-template [ngIf]="(lightning$ | async)">Lightning</ng-template></span>
|
<span *ngSwitchCase="'testnet'" class="network testnet"><app-svg-images name="testnet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Testnet</span>
|
||||||
<span *ngSwitchCase="'bisq'" class="network bisq"><app-svg-images name="bisq" width="35" height="35" viewBox="0 0 75 75" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Bisq</span>
|
<span *ngSwitchCase="'bisq'" class="network bisq"><app-svg-images name="bisq" width="35" height="35" viewBox="0 0 75 75" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Bisq</span>
|
||||||
<span *ngSwitchCase="'liquid'" class="network liquid"><app-svg-images name="liquid" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Liquid</span>
|
<span *ngSwitchCase="'liquid'" class="network liquid"><app-svg-images name="liquid" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Liquid</span>
|
||||||
<span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><app-svg-images name="liquidtestnet" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</span>
|
<span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><app-svg-images name="liquidtestnet" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</span>
|
||||||
<span *ngSwitchDefault class="network mainnet"><app-svg-images name="bitcoin" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Mainnet <ng-template [ngIf]="(lightning$ | async)">Lightning</ng-template></span>
|
<span *ngSwitchDefault class="network mainnet"><app-svg-images name="bitcoin" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Mainnet</span>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
|
@ -33,4 +33,16 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::ng-deep .preview-header {
|
||||||
|
position: absolute;
|
||||||
|
top: -80px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 220px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
z-index: 101;
|
||||||
|
line-height: 80px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,7 @@
|
|||||||
<div class="box preview-box" *ngIf="(channel$ | async) as channel">
|
<div class="box preview-box" *ngIf="(channel$ | async) as channel">
|
||||||
|
<h2 class="preview-header" i18n="lightning.channel">Lightning channel</h2>
|
||||||
<div class="row d-flex justify-content-between full-width-row">
|
<div class="row d-flex justify-content-between full-width-row">
|
||||||
<div class="title-container mb-0" *ngIf="!error">
|
<h1 class="title">{{ channel.short_id }}</h1>
|
||||||
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
|
|
||||||
<h1 class="mb-0 text-truncate">{{ channel.short_id }}</h1>
|
|
||||||
</div>
|
|
||||||
<div class="badges mb-2">
|
<div class="badges mb-2">
|
||||||
<span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>
|
<span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>
|
||||||
<span class="badge rounded-pill badge-success" *ngIf="channel.status === 1">Active</span>
|
<span class="badge rounded-pill badge-success" *ngIf="channel.status === 1">Active</span>
|
||||||
|
@ -1,28 +1,28 @@
|
|||||||
.title-container {
|
.title {
|
||||||
|
font-size: 52px;
|
||||||
|
margin: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
h5 {
|
white-space: nowrap;
|
||||||
font-size: 28px;
|
|
||||||
margin-top: -4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 52px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: -8px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
margin-top: 14px;
|
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
|
margin-top: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badges {
|
.badges {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
::ng-deep .badge {
|
::ng-deep .badge {
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
@ -38,7 +38,7 @@
|
|||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
&:nth-child(even) {
|
&:nth-child(odd) {
|
||||||
background: #181b2d;
|
background: #181b2d;
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
}
|
}
|
||||||
@ -47,7 +47,6 @@
|
|||||||
.nodes {
|
.nodes {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.between-arrow {
|
.between-arrow {
|
||||||
|
@ -1,9 +1,7 @@
|
|||||||
<div class="box preview-box" *ngIf="(node$ | async) as node">
|
<div class="box preview-box" *ngIf="(node$ | async) as node">
|
||||||
|
<h2 class="preview-header" i18n="lightning.node">Lightning node</h2>
|
||||||
<div class="row d-flex justify-content-between full-width-row">
|
<div class="row d-flex justify-content-between full-width-row">
|
||||||
<div class="title-container mb-0" *ngIf="!error">
|
<h1 class="title">{{ node.alias }}</h1>
|
||||||
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
|
|
||||||
<h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
|
|
||||||
</div>
|
|
||||||
<div class="badges mb-2">
|
<div class="badges mb-2">
|
||||||
<span class="badge rounded-pill badge-success" *ngFor="let socketType of socketTypes">{{ socketType }}</span>
|
<span class="badge rounded-pill badge-success" *ngFor="let socketType of socketTypes">{{ socketType }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,28 +1,28 @@
|
|||||||
.title-container {
|
.title {
|
||||||
|
font-size: 52px;
|
||||||
|
margin: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
h5 {
|
white-space: nowrap;
|
||||||
font-size: 28px;
|
|
||||||
margin-top: -4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 52px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: -8px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
margin-top: 26px;
|
margin-top: 48px;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badges {
|
.badges {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
::ng-deep .badge {
|
::ng-deep .badge {
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
@ -33,14 +33,14 @@
|
|||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 470px;
|
width: 470px;
|
||||||
height: 386px;
|
height: 390px;
|
||||||
min-width: 470px;
|
min-width: 470px;
|
||||||
min-height: 386px;
|
min-height: 390px;
|
||||||
max-height: 386px;
|
max-height: 390px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: #181b2d;
|
background: #181b2d;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-top: 0;
|
margin-top: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user