machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages 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> <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> </li>
</ul> </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> </div>
</nav> </nav>
</header> </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="d-flex">
<div class="search-box-container mr-2"> <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"> <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) { @media (min-width: 992px) {
width: 100%; width: 100%;
} }
&.hamburgerOpen {
@media (max-width: 613px) {
margin-left: 0px;
margin-right: 0px;
}
}
} }
.btn-block { .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 { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { EventType, NavigationStart, Router } from '@angular/router'; import { EventType, NavigationStart, Router } from '@angular/router';
import { AssetsService } from '../../services/assets.service'; import { AssetsService } from '../../services/assets.service';
@ -17,6 +17,8 @@ import { SearchResultsComponent } from './search-results/search-results.componen
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class SearchFormComponent implements OnInit { export class SearchFormComponent implements OnInit {
@Input() hamburgerOpen = false;
network = ''; network = '';
assets: object = {}; assets: object = {};
isSearching = false; isSearching = false;