machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle ln preview titles to match main pages

Browse Source
This commit is contained in:
Mononaut 2022-08-31 22:49:59 +00:00
parent 9047cb5998
commit 3da76892d5
No known key found for this signature in database
GPG Key ID: 61B952CAF4838F94
4 changed files with 49 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/lightning/channel/channel-preview.component.html
View File

@ -1,9 +1,9 @@
<div class="box preview-box" *ngIf="(channel$ | async) as channel"> <div class="box preview-box" *ngIf="(channel$ | async) as channel">
<div class="row d-flex justify-content-between full-width-row"> <div class="row d-flex justify-content-between full-width-row">
<h1 class="title"> <div class="title-container mb-0" *ngIf="!error">
<span i18n="lightning.channel">Channel</span>: <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
<a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]"> {{ channel.short_id }}</a> <h1 class="mb-0 text-truncate">{{ channel.short_id }}</h1>
</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>

23
frontend/src/app/lightning/channel/channel-preview.component.scss
View File

@ -1,11 +1,24 @@
.title { .title-container {
font-size: 52px; width: 0;
margin: 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;
}
} }
.table { .table {
margin-top: 14px;
font-size: 32px; font-size: 32px;
margin-top: 36px;
} }
.badges { .badges {
@ -23,6 +36,7 @@
.full-width-row { .full-width-row {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
flex-wrap: nowrap;
&:nth-child(even) { &:nth-child(even) {
background: #181b2d; background: #181b2d;
@ -33,6 +47,7 @@
.nodes { .nodes {
font-size: 36px; font-size: 36px;
align-items: center; align-items: center;
margin-top: 0px;
} }
.between-arrow { .between-arrow {

8
frontend/src/app/lightning/node/node-preview.component.html
View File

@ -1,9 +1,9 @@
<div class="box preview-box" *ngIf="(node$ | async) as node"> <div class="box preview-box" *ngIf="(node$ | async) as node">
<div class="row d-flex justify-content-between full-width-row"> <div class="row d-flex justify-content-between full-width-row">
<h1 class="title"> <div class="title-container mb-0" *ngIf="!error">
<span i18n="lightning.node">Node</span>: <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
<a [routerLink]="['/lightning/node' | relativeUrl, node.id]"> {{ node.alias }}</a> <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
</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>

30
frontend/src/app/lightning/node/node-preview.component.scss
View File

@ -1,10 +1,23 @@
.title { .title-container {
font-size: 52px; width: 0;
margin-bottom: 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;
}
} }
.table { .table {
margin-top: 48px; margin-top: 26px;
font-size: 32px; font-size: 32px;
} }
@ -20,14 +33,14 @@
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
width: 470px; width: 470px;
height: 390px; height: 386px;
min-width: 470px; min-width: 470px;
min-height: 390px; min-height: 386px;
max-height: 390px; max-height: 386px;
padding: 0; padding: 0;
background: #181b2d; background: #181b2d;
overflow: hidden; overflow: hidden;
margin-top: 18px; margin-top: 0;
} }
.row { .row {
@ -36,6 +49,7 @@
.full-width-row { .full-width-row {
padding-left: 15px; padding-left: 15px;
flex-wrap: nowrap;
} }
::ng-deep .symbol { ::ng-deep .symbol {