From 17cc2824a8253e2bb97fd412d30d10edec61d47a Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Sat, 23 Jul 2022 21:36:58 +0200
Subject: [PATCH] fading ads out when in focus mode

---
 frontend/src/styles/ads.scss  | 7 ++++++-
 frontend/src/ts/test/focus.ts | 8 ++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/styles/ads.scss b/frontend/src/styles/ads.scss
index 9df39e3fa..2dfc702c2 100644
--- a/frontend/src/styles/ads.scss
+++ b/frontend/src/styles/ads.scss
@@ -1,7 +1,7 @@
 #ad-vertical-left-wrapper,
 #ad-vertical-right-wrapper {
   margin-top: 2rem;
-  transition: margin-top 0.125s;
+  transition: margin-top 0.125s opacity 0.125s;
 }
 
 #ad-footer-wrapper,
@@ -27,11 +27,16 @@
   background: var(--sub-alt-color);
   display: grid;
   grid-template-areas: "col";
+  transition: opacity 0.125s;
 
   & > div {
     grid-area: col;
   }
 
+  &.focus {
+    opacity: 0;
+  }
+
   .icon {
     font-size: 3rem;
     height: 100%;
diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts
index a44324482..0f55b4d4c 100644
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@@ -14,6 +14,10 @@ export function set(foc: boolean, withCursor = false): void {
     $("#middle").addClass("focus");
     $("#bannerCenter").addClass("focus");
     $("#capsWarning").addClass("focus");
+    $("#ad-vertical-right-wrapper").addClass("focus");
+    $("#ad-vertical-left-wrapper").addClass("focus");
+    $("#ad-footer-wrapper").addClass("focus");
+    $("#ad-footer-small-wrapper").addClass("focus");
   } else if (!foc && state) {
     state = false;
     Caret.startAnimation();
@@ -24,6 +28,10 @@ export function set(foc: boolean, withCursor = false): void {
     $("#bannerCenter").removeClass("focus");
     $("#capsWarning").removeClass("focus");
     $("#app").removeClass("focus");
+    $("#ad-vertical-right-wrapper").removeClass("focus");
+    $("#ad-vertical-left-wrapper").removeClass("focus");
+    $("#ad-footer-wrapper").removeClass("focus");
+    $("#ad-footer-small-wrapper").removeClass("focus");
   }
 }