From f42bfe409001056d20fe2cc79009055f56456781 Mon Sep 17 00:00:00 2001
From: misterpekert <misterpekert@gmail.com>
Date: Tue, 24 Oct 2023 10:01:03 +0200
Subject: [PATCH] add Sentry error clean up css and components from unnecessary
 class

---
 assets/css/global.scss    |  8 --------
 components/ExternalDa.vue | 10 ++++------
 pages/browse/[[term]].vue |  4 ++--
 pages/message/[id].vue    |  4 ++--
 pages/myposts.vue         |  4 ++--
 5 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/assets/css/global.scss b/assets/css/global.scss
index 78f03c61..e0c0af33 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -533,11 +533,3 @@ label {
     font-size: 1.8rem;
   }
 }
-
-.modal-above-fade {
-  // We can't get this quite how we'd like.  We'd like these ads to appear above the modal fade, and below the modal content.
-  // But we can't do that, because of the way that position: fixed locks the z-index of the children.  That means the
-  // effective z-index of the fade and the modal contents is the same.  So we do this, which will occasionally overlap
-  // the modal contents in an annoying way.  It would be nice to figure out something better.
-  //z-index: 1056 !important;
-}
diff --git a/components/ExternalDa.vue b/components/ExternalDa.vue
index 1a213e86..493e6db0 100644
--- a/components/ExternalDa.vue
+++ b/components/ExternalDa.vue
@@ -24,6 +24,7 @@
   </div>
 </template>
 <script setup>
+import * as Sentry from '@sentry/vue';
 import { nextTick } from 'vue'
 import { useMiscStore } from '../stores/misc'
 import { ref, computed, onBeforeUnmount } from '#imports'
@@ -136,12 +137,9 @@ async function visibilityChanged(visible) {
               }, 45000)
             }
           }).addEventListener("slotVisibilityChanged", (event) => {
-            const slot = event.slot;
-            console.group("Visibility of slot", slot.getSlotElementId(), "changed.");
-
-            // Log details of the event.
-            console.log("Visible area:", `${event.inViewPercentage}%`);
-            console.groupEnd();
+            if (event.inViewPercentage < 51) {
+              Sentry.captureMessage(`Visibility of slot ${event.slot.getSlotElementId()} changed. New visibility: ${event.inViewPercentage}%.Viewport size: ${window.innerWidth}x${window.innerHeight}`);
+            }
           });
 
         window.googletag.enableServices()
diff --git a/pages/browse/[[term]].vue b/pages/browse/[[term]].vue
index aa60420b..e9676973 100644
--- a/pages/browse/[[term]].vue
+++ b/pages/browse/[[term]].vue
@@ -6,7 +6,7 @@
         <b-col cols="0" lg="3" class="p-0 pr-1">
           <VisibleWhen
             :not="['xs', 'sm', 'md', 'lg']"
-            class="position-fixed modal-above-fade"
+            class="position-fixed"
             style="width: 300px"
           >
             <ExternalDa
@@ -111,7 +111,7 @@
           <div class="d-flex justify-content-end">
             <VisibleWhen
               :not="['xs', 'sm', 'md', 'lg']"
-              class="position-fixed modal-above-fade"
+              class="position-fixed"
               style="right: 5px"
             >
               <ExternalDa
diff --git a/pages/message/[id].vue b/pages/message/[id].vue
index f86fa3c9..ca628e6b 100644
--- a/pages/message/[id].vue
+++ b/pages/message/[id].vue
@@ -6,7 +6,7 @@
         <b-col cols="0" xl="3" class="d-none d-xl-block">
           <VisibleWhen
             :not="['xs', 'sm', 'md', 'lg']"
-            class="position-fixed modal-above-fade"
+            class="position-fixed"
             style="width: 300px"
           >
             <ExternalDa
@@ -96,7 +96,7 @@
         <b-col cols="0" xl="3" class="d-none d-xl-block">
           <VisibleWhen
             :not="['xs', 'sm', 'md', 'lg']"
-            class="position-fixed modal-above-fade"
+            class="position-fixed"
             style="width: 300px"
           >
             <ExternalDa
diff --git a/pages/myposts.vue b/pages/myposts.vue
index 07688593..8c01173c 100644
--- a/pages/myposts.vue
+++ b/pages/myposts.vue
@@ -11,7 +11,7 @@
         <b-col cols="0" lg="3" class="p-0 pr-1">
           <VisibleWhen
             :not="['xs', 'sm', 'md', 'lg']"
-            class="position-fixed modal-above-fade"
+            class="position-fixed"
             style="width: 300px"
           >
             <ExternalDa
@@ -67,7 +67,7 @@
         <b-col cols="0" lg="3" class="p-0 pl-1">
           <VisibleWhen
             :not="['xs', 'sm', 'md', 'lg']"
-            class="position-fixed modal-above-fade"
+            class="position-fixed"
             style="right: 5px"
           >
             <ExternalDa