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

Fix search bar result overflow

Browse Source
This commit is contained in:
natsee 2024-01-22 11:29:41 +01:00
parent 6671746fc5
commit 0663cc2cfa
No known key found for this signature in database
GPG Key ID: 233CF3150A89BED8
3 changed files with 3 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/search-form/search-form.component.scss
View File

@ -1,15 +1,11 @@
:host ::ng-deep { :host ::ng-deep {
.dropdown-item { .dropdown-item {
white-space: nowrap; white-space: nowrap;
width: calc(100% - 34px);
} }
.dropdown-menu { .dropdown-menu {
width: calc(100% - 34px); width: calc(100% - 34px);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.dropdown-item {
width: 410px;
}
.dropdown-menu { .dropdown-menu {
width: 410px; width: 410px;
} }

4
frontend/src/app/components/search-form/search-results/search-results.component.html
View File

@ -26,7 +26,7 @@
<ng-template [ngIf]="results.address"> <ng-template [ngIf]="results.address">
<div class="card-title" i18n="search.bitcoin-address">Bitcoin Address</div> <div class="card-title" i18n="search.bitcoin-address">Bitcoin Address</div>
<button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item"> <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
<ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : isMobile ? 20 : 30 }"></ng-container> <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : isMobile ? 17 : 30 }"></ng-container>
</button> </button>
</ng-template> </ng-template>
<ng-template [ngIf]="results.blockHash"> <ng-template [ngIf]="results.blockHash">
@ -39,7 +39,7 @@
<div class="card-title danger" i18n="search.other-networks">Other Network Address</div> <div class="card-title danger" i18n="search.other-networks">Other Network Address</div>
<ng-template ngFor [ngForOf]="results.otherNetworks" let-otherNetwork let-i="index"> <ng-template ngFor [ngForOf]="results.otherNetworks" let-otherNetwork let-i="index">
<button (click)="clickItem(results.hashQuickMatch + i)" [class.active]="(results.hashQuickMatch + i) === activeIdx" [class.inactive]="!otherNetwork.isNetworkAvailable" type="button" role="option" class="dropdown-item"> <button (click)="clickItem(results.hashQuickMatch + i)" [class.active]="(results.hashQuickMatch + i) === activeIdx" [class.inactive]="!otherNetwork.isNetworkAvailable" type="button" role="option" class="dropdown-item">
<ng-container *ngTemplateOutlet="goTo; context: { $implicit: otherNetwork.address| shortenString : isMobile ? 20 : 25 }"></ng-container>&nbsp;<b>({{ otherNetwork.network.charAt(0).toUpperCase() + otherNetwork.network.slice(1) }})</b> <ng-container *ngTemplateOutlet="goTo; context: { $implicit: otherNetwork.address| shortenString : isMobile ? 12 : 20 }"></ng-container>&nbsp;<b>({{ otherNetwork.network.charAt(0).toUpperCase() + otherNetwork.network.slice(1) }})</b>
</button> </button>
</ng-template> </ng-template>
</ng-template> </ng-template>

2
frontend/src/app/components/search-form/search-results/search-results.component.ts
View File

@ -10,7 +10,7 @@ export class SearchResultsComponent implements OnChanges {
@Input() results: any = {}; @Input() results: any = {};
@Output() selectedResult = new EventEmitter(); @Output() selectedResult = new EventEmitter();
isMobile = (window.innerWidth <= 767.98); isMobile = (window.innerWidth <= 1150);
resultsFlattened = []; resultsFlattened = [];
activeIdx = 0; activeIdx = 0;
focusFirst = true; focusFirst = true;