style(portals): some cosmetic changes in card design

4gray · Sep 8, 2023 · 81fde2c · 81fde2c · vercel · Sep 8, 2023
1 parent b2fee4b
commit 81fde2c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/src/app/xtream/category-content-view/category-content-view.component.html b/src/app/xtream/category-content-view/category-content-view.component.html
@@ -1,8 +1,9 @@
 <ng-container *ngIf="items?.length > 0; else noItems">
     <div class="grid">
         <mat-card
+            appearance="outlined"
             *ngFor="
-                let item of items | filterBy : searchPhrase() : 'name';
+                let item of items | filterBy: searchPhrase() : 'name';
                 trackBy: trackByFn
             "
             (click)="itemClicked.emit(item)"
@@ -27,7 +28,7 @@
         </mat-card>
         <div
             class="no-content"
-            *ngIf="!(items | filterBy : searchPhrase() : 'name')?.length"
+            *ngIf="!(items | filterBy: searchPhrase() : 'name')?.length"
         >
             <mat-icon class="icon">search</mat-icon>
             <div>Nothing found, try to change you search request</div>

diff --git a/src/app/xtream/category-content-view/category-content-view.component.scss b/src/app/xtream/category-content-view/category-content-view.component.scss
@@ -3,6 +3,15 @@
     padding: 20px;
 }
 
+mat-card {
+    overflow: hidden;
+    transition: all 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+mat-card:hover {
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 25%), 0 10px 10px rgba(0, 0, 0, 22%);
+}
+
 .grid {
     display: flex;
     flex-wrap: wrap;
@@ -53,13 +62,3 @@
         width: 64px;
     }
 }
-
-mat-card {
-    overflow: hidden;
-
-    transition: all 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-mat-card:hover {
-    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-}
diff --git a/src/app/xtream/category-view/category-view.component.ts b/src/app/xtream/category-view/category-view.component.ts
@@ -14,10 +14,11 @@ import { PortalStore } from '../portal.store';
         <ng-container *ngIf="items?.length > 0; else noItems">
             <div class="grid">
                 <mat-card
+                    appearance="outlined"
                     class="category-item"
                     *ngFor="
                         let item of items
-                            | filterBy : searchText() : 'category_name';
+                            | filterBy: searchText() : 'category_name';
                         trackBy: trackByFn
                     "
                     (click)="categoryClicked.emit(item)"
@@ -29,7 +30,7 @@ import { PortalStore } from '../portal.store';
                 <div
                     class="no-content"
                     *ngIf="
-                        !(items | filterBy : searchText() : 'category_name')
+                        !(items | filterBy: searchText() : 'category_name')
                             ?.length
                     "
                 >