From 5e51a8d5daf22ad55d486455f68a74672f510372 Mon Sep 17 00:00:00 2001
From: Max Ehrlicher-Schmidt <maxes2000@t-online.de>
Date: Mon, 14 Dec 2020 15:21:04 +0100
Subject: [PATCH] Add important fix

---
 src/app/components/table/table.component.html |  2 +-
 src/app/components/table/table.component.scss | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html
index c521f89..ce9aedf 100644
--- a/src/app/components/table/table.component.html
+++ b/src/app/components/table/table.component.html
@@ -1,7 +1,7 @@
 <div class="table-page-wrapper">
   <h1 class="headline" *ngIf="headline">
     {{ headline }}
-    <mat-icon>{{ headlineIconName }}</mat-icon>
+    <mat-icon id="table-icon" (click)="$event.target.classList.add('drive')">{{ headlineIconName }}</mat-icon>
   </h1>
   <div class="table-control">
     <!--<button
diff --git a/src/app/components/table/table.component.scss b/src/app/components/table/table.component.scss
index c208199..fe70132 100644
--- a/src/app/components/table/table.component.scss
+++ b/src/app/components/table/table.component.scss
@@ -9,6 +9,7 @@
     margin-top: 0.25em;
     .mat-icon {
       margin-left: 8px;
+      user-select: none;
     }
   }
   .table-control {
@@ -79,3 +80,29 @@
     }
   }
 }
+
+.drive {
+  animation-name: translate; // Name der Animation
+  animation-duration: 6s; // Dauer der Animation
+  animation-iteration-count: 1; // Anzahl der Wiederholungen
+}
+
+@keyframes translate {
+  0% {
+    transform: translateX(0px);
+  }
+  69% {
+    visibility: hidden;
+    transform: translateX(100vw);
+  }
+  70% {
+    visibility: hidden;
+    transform: translateX(-100vw);
+  }
+  71% {
+    transform: translateX(-100vw);
+  }
+  100% {
+    transform: translateX(0px);
+  }
+}