fix menu responsive bug

This commit is contained in:
Çetin 2022-01-31 14:24:59 +03:00
parent 70446d56b5
commit 9e4b3f12b5
4 changed files with 13 additions and 11 deletions

View File

@ -158,7 +158,7 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
} }
isDesktop() { isDesktop() {
return window.innerWidth > 1024; return window.innerWidth > 992;
} }
isMobile(){ isMobile(){

View File

@ -68,7 +68,7 @@
<p-button styleClass="p-button-outlined mr-2 mb-2"> <p-button styleClass="p-button-outlined mr-2 mb-2">
<img alt="logo" src="https://primefaces.org/primeng/showcase/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/> <img alt="logo" src="https://primefaces.org/primeng/showcase/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
<span class="ml-2 p-text-bold">PrimeNG</span> <span class="ml-2 font-bold">PrimeNG</span>
</p-button> </p-button>
</div> </div>
</div> </div>

View File

@ -71,8 +71,10 @@
<span [class]="'product-badge status-' + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : '')">{{product.inventoryStatus}}</span> <span [class]="'product-badge status-' + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : '')">{{product.inventoryStatus}}</span>
</td> </td>
<td> <td>
<button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="editProduct(product)"></button> <div class="flex">
<button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning mt-2" (click)="deleteProduct(product)"></button> <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="editProduct(product)"></button>
<button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="deleteProduct(product)"></button>
</div>
</td> </td>
</tr> </tr>
</ng-template> </ng-template>

View File

@ -4,13 +4,13 @@
<h5>DataView</h5> <h5>DataView</h5>
<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid"> <p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter flex-column md:flex-row justify-content-between">
<div class="col-6 text-left"> <p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)"></p-dropdown>
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)"></p-dropdown> <span class="p-input-icon-left mb-2 md:mb-0">
</div> <i class="pi pi-search"></i>
<div class="col-6 text-right"> <input type="search" pInputText placeholder="Search by Name" (input)="dv.filter($event.target.value)">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions> </span>
</div> <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div> </div>
</ng-template> </ng-template>