mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 14:50:52 +01:00
Code Issues Projects Releases Wiki Activity

[css] fix search bar align issue when hamburger icon is showing

Browse source
This commit is contained in:
nymkappa 2023-11-01 17:47:20 +09:00
parent 7d3f82eca0
commit a68c2a2be6
No known key found for this signature in database
GPG key ID: E155910B16E8BD04
4 changed files with 12 additions and 3 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

@ -71,7 +71,7 @@
<a class="nav-link" [routerLink]="['/about']" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
</li>
</ul>
<app-search-form class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
<app-search-form [hamburgerOpen]="user != null" class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
</div>
</nav>
</header>

2
frontend/src/app/components/search-form/search-form.component.html
View file

@ -1,4 +1,4 @@
<form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
<form [class]="{hamburgerOpen: hamburgerOpen}" [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
<div class="d-flex">
<div class="search-box-container mr-2">
<input #searchInput (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="Explore the full Bitcoin ecosystem">

7
frontend/src/app/components/search-form/search-form.component.scss
View file

@ -26,6 +26,13 @@ form {
@media (min-width: 992px) {
width: 100%;
}
&.hamburgerOpen {
@media (max-width: 613px) {
margin-left: 0px;
margin-right: 0px;
}
}
}
.btn-block {

4
frontend/src/app/components/search-form/search-form.component.ts
View file

@ -1,4 +1,4 @@
import { Component, OnInit, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, HostListener, ElementRef } from '@angular/core';
import { Component, OnInit, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, HostListener, ElementRef, Input } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { EventType, NavigationStart, Router } from '@angular/router';
import { AssetsService } from '../../services/assets.service';
@ -17,6 +17,8 @@ import { SearchResultsComponent } from './search-results/search-results.componen
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchFormComponent implements OnInit {
@Input() hamburgerOpen = false;
network = '';
assets: object = {};
isSearching = false;