fix: search bar not covering buttons correctly (#145)

* fix: search bar not covering buttons correctly * update expandable-input * update patch version --------- Co-authored-by: Alexander Bashmakov <[email protected]>
openpassphrase · Aug 7, 2023 · 305555b · 305555b
1 parent f39ad28
commit 305555b
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opp",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "license": "MIT",
   "engines": {
     "node": ">=18.10.0",
@@ -40,7 +40,7 @@
     "@ngneat/elf": "^2.3.0",
     "@ngneat/elf-cli-ng": "^1.0.0",
     "@ngneat/elf-entities": "^4.4.3",
-    "@ngspot/expandable-input": "^3.0.0",
+    "@ngspot/expandable-input": "^3.0.1",
     "@ngspot/ngx-errors": "^3.2.1",
     "core-js": "^3.1.3",
     "ng-let": "^15.0.1",
@@ -97,4 +97,4 @@
       ]
     }
   }
-}
+}
diff --git a/src/app/content/components/category-list/category-list.component.html b/src/app/content/components/category-list/category-list.component.html
@@ -34,6 +34,7 @@
 
     <div
       class="same-area"
+      [@z-index]="searchExpInput.isOpen"
       [@margin-right]="searchExpInput.isOpen"
       [@smoothHorizontalCollapse]="addCategoryForm.isOpen"
     >

diff --git a/src/app/content/components/category-list/category-list.component.ts b/src/app/content/components/category-list/category-list.component.ts
@@ -13,10 +13,10 @@ import {
 import { UntypedFormControl } from '@angular/forms';
 import { MatExpansionPanelHeader } from '@angular/material/expansion';
 import {
-  animateCssProperty,
   ANIMATION_DURATION,
   ANIMATION_EASING,
   ExpandableInputComponent,
+  animateCssProperty,
   smoothHorizontalCollapse,
 } from '@ngspot/expandable-input';
 import { unparse } from 'papaparse';
@@ -30,7 +30,7 @@ import {
   IUpdateCategoryPayload,
   IUpdateItemPayload,
 } from '../../models';
-import { paginate, PaginationService } from '../../services/pagination';
+import { PaginationService, paginate } from '../../services/pagination';
 import { CategoriesRepository } from '../../state';
 
 @Component({
@@ -58,6 +58,13 @@ import { CategoriesRepository } from '../../state';
       durationMs: ANIMATION_DURATION,
       easing: ANIMATION_EASING,
     }),
+    animateCssProperty({
+      propName: 'z-index',
+      falseValue: '',
+      trueValue: '10',
+      durationMs: ANIMATION_DURATION,
+      easing: ANIMATION_EASING,
+    }),
   ],
 })
 export class CategoryListComponent implements OnInit, AfterViewInit, OnDestroy {

diff --git a/yarn.lock b/yarn.lock
@@ -2536,10 +2536,10 @@
   resolved "https://registry.yarnpkg.com/@ngneat/elf/-/elf-2.3.0.tgz#c046b0344b05ffdd2e0735122a31dfa2d67c6794"
   integrity sha512-uGoKOHu1T4KPKJSAf6y1VHi43eWaYe8Tx+J+o4R8Wki8gpeQUGlQz04qZoPllysLbqetDVXTMmMbQdostgG8Og==
 
-"@ngspot/expandable-input@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@ngspot/expandable-input/-/expandable-input-3.0.0.tgz#b92e4b3e21f65093f7067f5ad76920880d0c5bd0"
-  integrity sha512-G6YUSpHGW2YguwK4sgOvNn7963WFpHB6+YAqNIOitmsSHDjfdch/2GK4mH2E2a0M+Yel+nfjo+PGF2G+uJ6HXQ==
+"@ngspot/expandable-input@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@ngspot/expandable-input/-/expandable-input-3.0.1.tgz#93703d316a813ad453b89c2337c91a0ae6cec0bb"
+  integrity sha512-HLJ00+F/LGPHZbBFAJAnWPiRlUTvAmRaBfvkJHTFi6iarX8QhnGP5/kB6AUucuHiNu0K1U97opPaofboClA1CQ==
   dependencies:
     tslib "^2.3.0"