css

matsen-tool/src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <div class="home-container pb-5">
-    <div class="p-4">
+    <div class="pt-4">
         <div class="container">
             <h1>Hi {{ user?.firstName }}!</h1>
             <p><a routerLink="/users">Manage Users</a></p>
@@ -7,25 +7,25 @@
     </div>
 
     <div class="container">
-        <div class="row p-4 d-flex">
+        <div class="row pt-4 pb-4 d-flex">
             <div class="col d-flex">
                 <a class="card" routerLink="/users" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-x-square">
-                        <p class="position-absolute m-0">Users</p>
+                    <div class="card-body position-relative bi bi-emoji-heart-eyes">
+                        <h3 class="position-absolute m-0">Kunden</h3>
                     </div>
                 </a>
             </div>
             <div class="col d-flex">
                 <a class="card" routerLink="/users" routerLinkActive="active">
-                    <div class="card-body position-relative">
-                        <p class="position-absolute m-0">Users<br>user</p>
+                    <div class="card-body position-relative bi bi-emoji-kiss">
+                        <h3 class="position-absolute m-0">Dienstleister</h3>
                     </div>
                 </a>
             </div>
             <div class="col d-flex">
                 <a class="card" routerLink="/users" routerLinkActive="active">
-                    <div class="card-body position-relative">
-                        <p class="position-absolute m-0">Users<br>user</p>
+                    <div class="card-body position-relative bi bi-emoji-smile">
+                        <h3 class="position-absolute m-0">Lieferanten</h3>
                     </div>
                 </a>
             </div>
@@ -33,30 +33,71 @@
     </div>
 
     <div class="container">
-        <div class="row p-4 d-flex">
+        <div class="row pt-4 pb-4 d-flex">
             <div class="col d-flex">
                 <a class="card" routerLink="/users" routerLinkActive="active">
-                    <div class="card-body position-relative">
-                        <p class="position-absolute m-0">Users</p>
+                    <div class="card-body position-relative bi bi-droplet-fill">
+                        <h3 class="position-absolute m-0">Produkte</h3>
                     </div>
                 </a>
             </div>
             <div class="col d-flex">
                 <a class="card" routerLink="/users" routerLinkActive="active">
-                    <div class="card-body position-relative">
-                        <p class="position-absolute m-0">Users<br>user</p>
+                    <div class="card-body position-relative bi bi-list-check">
+                        <h3 class="position-absolute m-0">Aufgaben</h3>
                     </div>
                 </a>
             </div>
             <div class="col d-flex">
                 <a class="card" routerLink="/users" routerLinkActive="active">
-                    <div class="card-body position-relative">
-                        <p class="position-absolute m-0">Users<br>user</p>
+                    <div class="card-body position-relative bi bi-journals">
+                        <h3 class="position-absolute m-0">Dokumente</h3>
                     </div>
                 </a>
             </div>
         </div>
     </div>
+
+    <div class="container spt-accordion">
+
+        <h2>Meine Aufgaben</h2>
+
+        <div class="card mb-3 p-3">
+            <div class="position-relative" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+                <h3 class="m-0">Matsen AG</h3>
+                <span class="info d-flex position-absolute">
+                    <span class="due-date">01.10.2023</span>
+                    <span class="importance" data-importance="1"></span>
+                </span>
+                <h2 class="m-0">Wichtige Info: Unbedingt melden!</h2>
+            </div>
+            <div class="collapse" id="collapseExample">
+                <div class="pt-3 pe-5 position-relative">
+                    <p class="m-0">Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p>
+                    <span class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit"></span>
+                </div>
+            </div>
+        </div>
+
+        <div class="card mb-3 p-3">
+            <div class="position-relative" data-bs-toggle="collapse" data-bs-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
+                <h3 class="m-0">Matsen AG</h3>
+                <span class="info d-flex position-absolute">
+                    <span class="due-date">01.10.2023</span>
+                    <span class="importance" data-importance="1"></span>
+                </span>
+                <h2 class="m-0">Wichtige Info: Unbedingt melden!</h2>
+            </div>
+            <div class="collapse" id="collapseExample2">
+                <div class="pt-3 pe-5 position-relative">
+                    <p class="m-0">Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p>
+                    <span class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit"></span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
 </div>
 <ul>
     <li>Posts</li>

matsen-tool/src/app/home/home.component.scss

@@ -21,7 +21,7 @@
       font-size: 50px;
     }
   }
-  p {
+  h3 {
     right: 10px;
     bottom: 10px;
   }

matsen-tool/src/styles.scss

@@ -3,6 +3,10 @@
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
+@mixin transition {
+  transition: all 0.3s ease-out;
+}
+
 .app-container {
   min-height: 320px;
   overflow: hidden;
@@ -13,3 +17,31 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   text-align: center;
   box-sizing: content-box;
 }
+
+.spt-accordion {
+  .info {
+    right: 0;
+    top: 0;
+  }
+  .due-date {
+
+  }
+  .importance {
+
+  }
+
+  [data-type="user-tool"] {
+    cursor: pointer;
+    font-size: 20px;
+    @include transition();
+
+    &:hover {
+      color: green;
+    }
+  }
+
+  [data-action="edit"] {
+    right: 0;
+    bottom: 0;
+  }
+}