Improved rendering of dashboard

albaintor · Oct 22, 2024 · a7b48ac · a7b48ac
1 parent 528ff84
commit a7b48ac
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 13 deletions.
diff --git a/src/app/activity-player/activity-player.component.css b/src/app/activity-player/activity-player.component.css
@@ -1,29 +1,49 @@
-.widget-dialog {
+.activity-player-header {
   padding: 0 !important;
-  transition: width 1s, height 1s;
+  opacity: 0.7;
+  transition: width 1s ease-in-out, height 1s ease-in-out, opacity 0.5s ease, background-color 0.5s ease;
+  transition-delay: 5s;
+  animation: blur-out 500ms 0s forwards;
+}
+
+.activity-player-header:hover {
+  opacity: 1;
+  transition-delay: 0s;
+  animation: blur-in 500ms 0s forwards;
 }
 
-.widget-header {
+.activity-player-dialog {
   padding: 0 !important;
-  opacity: 0.7;
-  transition: width 1s ease-in-out, height 1s ease-in-out, opacity 0.5s ease;
-  transition-delay: 5s;
+  transition: width 1s ease-in-out, height 1s ease-in-out, opacity 0.5s ease, background-color 0.5s ease;
+  animation: blur-out 500ms 0s forwards;
+}
+
+.activity-player-dialog:hover {
+  opacity: 1;
+  transition-delay: 0s;
+  background: transparent !important;
+  animation: blur-in 500ms 0s forwards;
 }
 
-.widget-header .p-dialog-header
+.activity-player-header > div {
+  background: rgba(31, 41, 55, 0.7);
+}
+
+.activity-player-header:hover > div {
+  background: rgba(0, 0, 0, 0);
+}
+
+.activity-player-header .p-dialog-header
 {
   padding: 6px !important;
 }
 
-.widget {
+.activity-player {
   padding: 0.1rem !important;
   transition: width 1s, height 1s;
 }
 
-.widget-header:hover {
-  opacity: 1;
-  transition-delay: 0s;
-}
+
 
 .grid-pagination {
   position: absolute;
@@ -42,3 +62,22 @@
   height: 2rem !important;
   padding: 0;
 }
+
+
+@keyframes blur-in {
+  from {
+    backdrop-filter: blur(0px);
+  }
+  to {
+    backdrop-filter: blur(30px);
+  }
+}
+
+@keyframes blur-out {
+  from {
+    backdrop-filter: blur(30px);
+  }
+  to {
+    backdrop-filter: blur(0px);
+  }
+}
diff --git a/src/app/activity-player/activity-player.component.html b/src/app/activity-player/activity-player.component.html
@@ -1,6 +1,6 @@
 <p-toast key="activityPlayer"/>
 <p-dialog *ngIf="!smallSizeMode" #dialog [modal]="false" position="topright" [showHeader]="true" [closable]="false" [visible]="visible" [draggable]="true"
-          contentStyleClass="widget-dialog" class="widget" styleClass="widget-header" appendTo="body"
+          contentStyleClass="activity-player-dialog" class="activity-player" styleClass="activity-player-header" appendTo="body"
           (close)="closeDialog($event);dialog.close($event)" [style]="{'width': (scale*400+30)+'px', 'max-height': 'calc(100vh - 20px)'}">
   <ng-template pTemplate="header">
     <div class="flex align-items-start justify-content-center"