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

Merge pull request #2151 from mempool/simon/navbar-logos-fixes

Browse Source 
Navbar logos fix
This commit is contained in:
wiz 2022-07-22 16:09:02 +02:00 committed by GitHub
commit d0ff377086
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 12 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

@ -1,12 +1,12 @@
<ng-container *ngIf="{ val: network$ | async } as network"> <ng-container *ngIf="{ val: network$ | async } as network">
<header> <header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" [routerLink]="['/' | relativeUrl]">
<ng-template [ngIf]="subdomain"> <ng-template [ngIf]="subdomain">
<div class="subdomain_container"> <div class="subdomain_container">
<img [src]="'/api/v1/enterprise/images/' + subdomain + '/logo'" class="subdomain_logo"> <img [src]="'/api/v1/enterprise/images/' + subdomain + '/logo'" class="subdomain_logo">
</div> </div>
</ng-template> </ng-template>
<a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
<ng-container *ngIf="{ val: connectionState$ | async } as connectionState"> <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"> <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" style="width: 140px; height: 35px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>

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

@ -68,10 +68,6 @@ li.nav-item {
} }
} }
.navbar-brand {
width: 60%;
}
.navbar { .navbar {
.dropdown { .dropdown {
.dropdown-toggle { .dropdown-toggle {
@ -80,10 +76,8 @@ li.nav-item {
} }
} }
@media (min-width: 576px) { .navbar-brand {
.navbar-brand { position: relative;
width: 140px;
}
} }
nav { nav {
@ -93,8 +87,7 @@ nav {
.connection-badge { .connection-badge {
position: absolute; position: absolute;
top: 13px; top: 13px;
left: 0px; width: 100%;
width: 140px;
} }
.badge { .badge {
@ -150,10 +143,21 @@ nav {
max-height: 45px; max-height: 45px;
max-width: 140px; max-width: 140px;
margin: auto; margin: auto;
align-self: center;
} }
.subdomain_container { .subdomain_container {
width: 140px; width: 140px;
margin-right: 15px; margin-right: 15px;
text-align: center; text-align: center;
} }
.logo-holder {
display: flex;
flex-direction: row;
}
.navbar-brand {
flex-direction: row;
display: flex;
}