From 9e4b3f12b5be0983a2c4a8ba3dc1882ca56f6af1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Mon, 31 Jan 2022 14:24:59 +0300
Subject: [PATCH] fix menu responsive bug

---
 src/app/app.main.component.ts                   |  2 +-
 src/app/components/button/button.component.html |  2 +-
 src/app/components/crud/crud.component.html     |  6 ++++--
 src/app/components/list/list.component.html     | 14 +++++++-------
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app/app.main.component.ts b/src/app/app.main.component.ts
index ebbcb07..42e614d 100644
--- a/src/app/app.main.component.ts
+++ b/src/app/app.main.component.ts
@@ -158,7 +158,7 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
     }
 
     isDesktop() {
-        return window.innerWidth > 1024;
+        return window.innerWidth > 992;
     }
 
     isMobile(){
diff --git a/src/app/components/button/button.component.html b/src/app/components/button/button.component.html
index b5ea3fd..b716932 100644
--- a/src/app/components/button/button.component.html
+++ b/src/app/components/button/button.component.html
@@ -68,7 +68,7 @@
 			
 			<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"/>
-				<span class="ml-2 p-text-bold">PrimeNG</span>
+				<span class="ml-2 font-bold">PrimeNG</span>
 			</p-button>
 		</div>
 	</div>
diff --git a/src/app/components/crud/crud.component.html b/src/app/components/crud/crud.component.html
index 753dd18..1868904 100644
--- a/src/app/components/crud/crud.component.html
+++ b/src/app/components/crud/crud.component.html
@@ -71,8 +71,10 @@
                             <span [class]="'product-badge status-' + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : '')">{{product.inventoryStatus}}</span>
                         </td>
                         <td>
-                            <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 mt-2" (click)="deleteProduct(product)"></button>
+                            <div class="flex">
+                                <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>
                     </tr>
                 </ng-template>
diff --git a/src/app/components/list/list.component.html b/src/app/components/list/list.component.html
index 1a8fcd0..82c0043 100644
--- a/src/app/components/list/list.component.html
+++ b/src/app/components/list/list.component.html
@@ -4,13 +4,13 @@
 			<h5>DataView</h5>
 			<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
 				<ng-template pTemplate="header">
-					<div class="grid grid-nogutter">
-						<div class="col-6 text-left">
-							<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)"></p-dropdown>
-						</div>
-						<div class="col-6 text-right">
-							<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
-						</div>
+					<div class="grid grid-nogutter flex-column md:flex-row justify-content-between">
+						<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">
+                            <i class="pi pi-search"></i>
+                            <input type="search" pInputText placeholder="Search by Name" (input)="dv.filter($event.target.value)">
+                        </span>	
+						<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
 					</div>
 				</ng-template>