Finished adding backend features to frontend

2023-05-17 11:05:03 +02:00
parent 12f1e04487
commit 3d84e513fa
3 changed files with 13 additions and 24 deletions
--- a/Frontend/assets/css/tools/mock/r11popup.css
+++ b/Frontend/assets/css/tools/mock/r11popup.css
@@ -2,11 +2,6 @@
    animation: blur 0.5s ease-in-out ;
    animation-fill-mode: forwards;
 }
-.popup-flex:has(.hiddable-container){
-    animation: deblur 0.3s ease-in-out ;
-    animation-direction: reverse;
-    animation-fill-mode: forwards;
-}
 .popup-flex{
    display: flex; 
    align-items: center;
@@ -66,28 +61,12 @@
    0% {
      backdrop-filter: blur(0px);
    }
-  
+
    50% {
      backdrop-filter: blur(5px);
    }
-  
+
    100% {
      backdrop-filter: blur(10px);
    }
  }
-
-@keyframes deblur {
-    0%{
-        backdrop-filter: blur(10px);
-      }
-    
-      50% {
-        backdrop-filter: blur(5px);
-      }
-    
-      100% {
-        backdrop-filter: blur(0px);
-        display: none;
-      }
-    
-}
--- a/Frontend/assets/scripts/tools/mock/uianimation.js
+++ b/Frontend/assets/scripts/tools/mock/uianimation.js
@@ -81,6 +81,16 @@ function showHeadersHistory(element){
    $('.popup-flex').removeClass('hiddable-container');
    document.getElementById('header-history-table-body').innerHTML = historyTable;
 }
+    window.addEventListener(
+        'click' ,
+        (clickedElement) => {
+            console.log(clickedElement.target);
+            if(!document.getElementById('header-history-popup').contains(clickedElement.target) && clickedElement.target.className == 'popup-flex' ) {
+                $('.popup-flex').addClass('hiddable-container');
+            }
+        }
+    );
+

 function focusInTip(element){
    showTip(element);
--- a/Frontend/tools/mock.html
+++ b/Frontend/tools/mock.html
@@ -11,7 +11,7 @@
 </head>
 <body>
        <div class="popup-flex hiddable-container"> 
-            <div class="popup-body">
+            <div class="popup-body" id="header-history-popup">
                <div class="popup-button-close-container">
                    <button type="button" class="popup-button-close"> X </button>
                </div>