Move lightning preview headers to top bar

This commit is contained in:
Mononaut
2022-09-01 14:57:14 +00:00
parent 3da76892d5
commit 4ee5ef336c
6 changed files with 50 additions and 43 deletions

View File

@@ -1,9 +1,7 @@
<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="title-container mb-0" *ngIf="!error">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
<h1 class="mb-0 text-truncate">{{ channel.short_id }}</h1>
</div>
<h1 class="title">{{ channel.short_id }}</h1>
<div class="badges mb-2">
<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>

View File

@@ -1,28 +1,28 @@
.title-container {
.title {
font-size: 52px;
margin: 0;
width: 0;
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
h5 {
font-size: 28px;
margin-top: -4px;
}
h1 {
font-size: 52px;
margin-bottom: 0;
margin-top: -8px;
}
text-overflow: ellipsis;
white-space: nowrap;
}
.table {
margin-top: 14px;
font-size: 32px;
margin-top: 36px;
}
.badges {
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 {
margin-left: 0.5em;
@@ -38,7 +38,7 @@
padding-right: 15px;
flex-wrap: nowrap;
&:nth-child(even) {
&:nth-child(odd) {
background: #181b2d;
margin: 15px 0;
}
@@ -47,7 +47,6 @@
.nodes {
font-size: 36px;
align-items: center;
margin-top: 0px;
}
.between-arrow {

View File

@@ -1,9 +1,7 @@
<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="title-container mb-0" *ngIf="!error">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
<h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
</div>
<h1 class="title">{{ node.alias }}</h1>
<div class="badges mb-2">
<span class="badge rounded-pill badge-success" *ngFor="let socketType of socketTypes">{{ socketType }}</span>
</div>

View File

@@ -1,28 +1,28 @@
.title-container {
.title {
font-size: 52px;
margin: 0;
width: 0;
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
h5 {
font-size: 28px;
margin-top: -4px;
}
h1 {
font-size: 52px;
margin-bottom: 0;
margin-top: -8px;
}
text-overflow: ellipsis;
white-space: nowrap;
}
.table {
margin-top: 26px;
margin-top: 48px;
font-size: 32px;
}
.badges {
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 {
margin-left: 0.5em;
@@ -33,14 +33,14 @@
flex-grow: 0;
flex-shrink: 0;
width: 470px;
height: 386px;
height: 390px;
min-width: 470px;
min-height: 386px;
max-height: 386px;
min-height: 390px;
max-height: 390px;
padding: 0;
background: #181b2d;
overflow: hidden;
margin-top: 0;
margin-top: 18px;
}
.row {