From 4d3fb39dbc3fc334e927a85aae1bb6e11727087f Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MacBook-Pro-von-Florian.fritz.box>
Date: Tue, 26 Mar 2024 16:14:11 +0100
Subject: [PATCH] fixes

---
 .../new-document/new-document.component.html  |  1 +
 matsen-tool/src/app/home/home.component.html  | 96 ++++++++++---------
 matsen-tool/src/app/home/home.component.scss  | 41 ++++----
 matsen-tool/src/assets/scss/_button.scss      |  4 +
 4 files changed, 75 insertions(+), 67 deletions(-)

diff --git a/matsen-tool/src/app/documents/new-document/new-document.component.html b/matsen-tool/src/app/documents/new-document/new-document.component.html
index a5f5fc2..b3aac2c 100644
--- a/matsen-tool/src/app/documents/new-document/new-document.component.html
+++ b/matsen-tool/src/app/documents/new-document/new-document.component.html
@@ -35,6 +35,7 @@
 
         <div class="mb-3" *ngIf="documentForm.get('documentUrl')?.value !== null">
             <div class="delete-image" (click)="onDeleteFile()">
+                <span class="bi bi-file-earmark-minus p-2" data-type="action-icon"></span>
                 <p class="mb-0 ms-1">{{ 'system.delete-file' | translate }}</p>
             </div>
         </div>
diff --git a/matsen-tool/src/app/home/home.component.html b/matsen-tool/src/app/home/home.component.html
index 23f984d..66cf6bb 100644
--- a/matsen-tool/src/app/home/home.component.html
+++ b/matsen-tool/src/app/home/home.component.html
@@ -6,54 +6,56 @@
         </div>
     </div>
 
-    <div class="container">
-        <div class="row pt-4 pb-4 d-flex">
-            <div class="col d-flex">
-                <a class="card" routerLink="/customer" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-emoji-heart-eyes">
-                        <h3 class="position-absolute m-0">{{ 'basic.customer' | translate }}</h3>
-                    </div>
-                </a>
-            </div>
-            <div class="col d-flex">
-                <a class="card" routerLink="/supplier" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-emoji-kiss">
-                        <h3 class="position-absolute m-0">{{ 'basic.supplier' | translate }}</h3>
-                    </div>
-                </a>
-            </div>
-            <div class="col d-flex">
-                <a class="card" routerLink="/service" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-emoji-smile">
-                        <h3 class="position-absolute m-0">{{ 'basic.service' | translate }}</h3>
-                    </div>
-                </a>
+    <div class="spt-home-cards">
+        <div class="container">
+            <div class="row pt-4 pb-4 d-flex">
+                <div class="col d-flex">
+                    <a class="card" routerLink="/customer" routerLinkActive="active">
+                        <div class="card-body position-relative bi bi-emoji-heart-eyes">
+                            <h3 class="position-absolute m-0">{{ 'basic.customer' | translate }}</h3>
+                        </div>
+                    </a>
+                </div>
+                <div class="col d-flex">
+                    <a class="card" routerLink="/supplier" routerLinkActive="active">
+                        <div class="card-body position-relative bi bi-emoji-kiss">
+                            <h3 class="position-absolute m-0">{{ 'basic.supplier' | translate }}</h3>
+                        </div>
+                    </a>
+                </div>
+                <div class="col d-flex">
+                    <a class="card" routerLink="/service" routerLinkActive="active">
+                        <div class="card-body position-relative bi bi-emoji-smile">
+                            <h3 class="position-absolute m-0">{{ 'basic.service' | translate }}</h3>
+                        </div>
+                    </a>
+                </div>
             </div>
         </div>
-    </div>
 
-    <div class="container mb-5">
-        <div class="row pt-4 pb-4 d-flex">
-            <div class="col d-flex">
-                <a class="card" routerLink="/products" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-droplet-fill">
-                        <h3 class="position-absolute m-0">{{ 'basic.products' | translate }}</h3>
-                    </div>
-                </a>
-            </div>
-            <div class="col d-flex">
-                <a class="card" routerLink="/tasks" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-list-check">
-                        <h3 class="position-absolute m-0">{{ 'basic.tasks' | translate }}</h3>
-                    </div>
-                </a>
-            </div>
-            <div class="col d-flex">
-                <a class="card" routerLink="/documents" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-journals">
-                        <h3 class="position-absolute m-0">{{ 'basic.documents' | translate }}</h3>
-                    </div>
-                </a>
+        <div class="container mb-5">
+            <div class="row pt-4 pb-4 d-flex">
+                <div class="col d-flex">
+                    <a class="card" routerLink="/products" routerLinkActive="active">
+                        <div class="card-body position-relative bi bi-droplet-fill">
+                            <h3 class="position-absolute m-0">{{ 'basic.products' | translate }}</h3>
+                        </div>
+                    </a>
+                </div>
+                <div class="col d-flex">
+                    <a class="card" routerLink="/tasks" routerLinkActive="active">
+                        <div class="card-body position-relative bi bi-list-check">
+                            <h3 class="position-absolute m-0">{{ 'basic.tasks' | translate }}</h3>
+                        </div>
+                    </a>
+                </div>
+                <div class="col d-flex">
+                    <a class="card" routerLink="/documents" routerLinkActive="active">
+                        <div class="card-body position-relative bi bi-journals">
+                            <h3 class="position-absolute m-0">{{ 'basic.documents' | translate }}</h3>
+                        </div>
+                    </a>
+                </div>
             </div>
         </div>
     </div>
@@ -85,7 +87,7 @@
                         </div>
                     </div>
                 </div>
-                <div *ngIf="task.id && taskNotesVisibility.get(task.id)">
+                <ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">
                     <div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
                         <div class="card-body">
                             <div class="d-flex justify-content-between align-items-center">
@@ -99,7 +101,7 @@
                                   data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
                         </div>
                     </div>
-                </div>
+                </ng-container>
 
                 <div class="d-flex justify-content-end mt-1">
                 <span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
diff --git a/matsen-tool/src/app/home/home.component.scss b/matsen-tool/src/app/home/home.component.scss
index 147a600..62102a5 100644
--- a/matsen-tool/src/app/home/home.component.scss
+++ b/matsen-tool/src/app/home/home.component.scss
@@ -3,26 +3,27 @@
   margin-left: auto;
   margin-right: auto;
 }
-
-.card {
-  width: 100%;
-  text-decoration: none;
-}
-.card-body {
-  min-height: 200px;
-  text-transform: uppercase;
-  text-align: right;
-  &.bi {
-    &:before {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%,-50%);
-      font-size: 50px;
-    }
+.spt-home-cards {
+  .card {
+    width: 100%;
+    text-decoration: none;
   }
-  h3 {
-    right: 10px;
-    bottom: 10px;
+  .card-body {
+    min-height: 200px;
+    text-transform: uppercase;
+    text-align: right;
+    &.bi {
+      &:before {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        font-size: 50px;
+      }
+    }
+    h3 {
+      right: 10px;
+      bottom: 10px;
+    }
   }
 }
\ No newline at end of file
diff --git a/matsen-tool/src/assets/scss/_button.scss b/matsen-tool/src/assets/scss/_button.scss
index c87e912..f410972 100644
--- a/matsen-tool/src/assets/scss/_button.scss
+++ b/matsen-tool/src/assets/scss/_button.scss
@@ -4,6 +4,10 @@
   box-sizing: content-box;
 }
 
+[data-type="action-icon"] {
+  font-size: 20px;
+}
+
 [data-type="user-tool"] {
   cursor: pointer;
   font-size: 20px;