highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-04-07 11:28:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2172 from mempool/simon/jumping-logo-fix

Browse Source 
Fix for mempool logo jumping with various sizes of enterprise logo
This commit is contained in:
wiz 2022-07-25 00:42:29 +02:00 committed by GitHub
commit 65cd708295
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/master-page/master-page.component.html
View File

@ -9,7 +9,7 @@
</ng-template>
<ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
<img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }" alt="The Mempool Open Source Project logo">
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 140px; height: 35px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
<div class="connection-badge">
<div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
<div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>

10
frontend/src/app/components/master-page/master-page.component.scss
View File

@ -78,6 +78,7 @@ li.nav-item {
.navbar-brand {
position: relative;
height: 65px;
}
nav {
@ -86,7 +87,7 @@ nav {
.connection-badge {
position: absolute;
top: 13px;
top: 22px;
width: 100%;
}
@ -150,6 +151,7 @@ nav {
width: 140px;
margin-right: 15px;
text-align: center;
align-self: center;
}
.logo-holder {
@ -161,3 +163,9 @@ nav {
flex-direction: row;
display: flex;
}
app-svg-images {
align-self: center;
width: 140px;
height: 35px;
}