From 4b268e5d1bfd65d7bab0e4b42497892219783b99 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Tue, 20 Apr 2021 22:44:12 +0300
Subject: [PATCH] (apps/file-manager) Better grid

---
 .../apps/file-manager/list/list.component.html | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/app/modules/admin/apps/file-manager/list/list.component.html b/src/app/modules/admin/apps/file-manager/list/list.component.html
index 83cc8b75..3a4fa299 100644
--- a/src/app/modules/admin/apps/file-manager/list/list.component.html
+++ b/src/app/modules/admin/apps/file-manager/list/list.component.html
@@ -47,8 +47,7 @@
                         <!-- Folders -->
                         <div class="font-medium">Folders</div>
                         <div
-                            class="grid gap-4 mt-4"
-                            style="grid-template-columns: repeat(auto-fill,minmax(160px,1fr))">
+                            class="flex flex-wrap -m-2 mt-2">
                             <ng-container *ngFor="let folder of items.folders; trackBy:trackByFn">
                                 <ng-container *ngTemplateOutlet="item, context: {$implicit: folder}"></ng-container>
                             </ng-container>
@@ -57,8 +56,7 @@
                         <!-- Files -->
                         <div class="font-medium mt-8">Files</div>
                         <div
-                            class="grid gap-4 mt-4"
-                            style="grid-template-columns: repeat(auto-fill,minmax(160px,1fr))">
+                            class="flex flex-wrap -m-2 mt-2">
                             <ng-container *ngFor="let file of items.files; trackBy:trackByFn">
                                 <ng-container *ngTemplateOutlet="item, context: {$implicit: file}"></ng-container>
                             </ng-container>
@@ -71,7 +69,7 @@
                     #item
                     let-item>
                     <div
-                        class="flex flex-col shadow rounded-2xl cursor-pointer bg-card"
+                        class="flex flex-col w-40 h-40 m-2 p-4 shadow rounded-2xl cursor-pointer bg-card"
                         (click)="goToItem(item.id)">
                         <div class="aspect-w-9 aspect-h-6">
                             <div class="flex items-center justify-center">
@@ -103,12 +101,12 @@
                                 </ng-container>
                             </div>
                         </div>
-                        <div
-                            class="pb-4 px-4 text-center text-sm font-medium"
-                            [matTooltip]="item.name">
-                            <div class="truncate">{{item.name}}</div>
+                        <div class="flex flex-col flex-auto justify-center text-center text-sm font-medium">
+                            <div
+                                class="truncate"
+                                [matTooltip]="item.name">{{item.name}}</div>
                             <ng-container *ngIf="item.contents">
-                                <div class="mt-0.5 text-secondary truncate">{{item.contents}}</div>
+                                <div class="text-secondary truncate">{{item.contents}}</div>
                             </ng-container>
                         </div>
                     </div>