Mobile layout fixes.

This commit is contained in:
softsimon
2022-02-06 04:44:40 +04:00
parent 91082f27e7
commit ff4c097c48
6 changed files with 43 additions and 20 deletions

View File

@@ -3,24 +3,26 @@
<h1 i18n="Assets page header">Assets</h1>
</div>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/assets/all']" routerLinkActive="active">All</a>
</li>
</ul>
<div class="nav-container">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/assets/all']" routerLinkActive="active">All</a>
</li>
</ul>
<form [formGroup]="searchForm" class="form-inline">
<div class="input-group mb-2">
<input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" [resultFormatter]="formatterFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
<div class="input-group-append">
<button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
<form [formGroup]="searchForm">
<div class="input-group mb-2">
<input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" [resultFormatter]="formatterFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
<div class="input-group-append">
<button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
</div>
</div>
</div>
</form>
</form>
</div>
<div class="clearfix"></div>

View File

@@ -6,4 +6,19 @@ ul {
form {
float: right;
width: 300px;
@media (max-width: 767.98px) {
width: 90%;
margin-bottom: 15px;
}
}
@media (max-width: 767.98px) {
.nav-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto;
}
}