diff --git a/Frontend/assets/css/tools/mock/r11popup.css b/Frontend/assets/css/tools/mock/r11popup.css index 06946c6..801d466 100644 --- 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; - } - -} diff --git a/Frontend/assets/scripts/tools/mock/uianimation.js b/Frontend/assets/scripts/tools/mock/uianimation.js index 954078f..4e04f53 100644 --- 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); diff --git a/Frontend/tools/mock.html b/Frontend/tools/mock.html index d9a4500..8a6de09 100644 --- a/Frontend/tools/mock.html +++ b/Frontend/tools/mock.html @@ -11,7 +11,7 @@
-
+