From d365bb6b9509acfbb08b2871dd57a3eec7635f47 Mon Sep 17 00:00:00 2001
From: celestora <kitsuruko@gmail.com>
Date: Fri, 26 May 2023 18:21:56 +0300
Subject: [PATCH] Hide small right/left block once they're scrolled out of view

---
 Web/Presenters/templates/Group/View.xml |  4 ++++
 Web/Presenters/templates/User/View.xml  |  4 ++++
 Web/static/css/main.css                 |  9 +++++++++
 Web/static/js/al_despacito_wall.js      | 27 +++++++++++++++++++++++++
 4 files changed, 44 insertions(+)
 create mode 100644 Web/static/js/al_despacito_wall.js

diff --git a/Web/Presenters/templates/Group/View.xml b/Web/Presenters/templates/Group/View.xml
index eb4f2608..bf392a9f 100644
--- a/Web/Presenters/templates/Group/View.xml
+++ b/Web/Presenters/templates/Group/View.xml
@@ -261,3 +261,7 @@
 </div>
 
 {/block}
+
+{block bodyScripts}
+    {script "js/al_despacito_wall.js"}
+{/block}
\ No newline at end of file
diff --git a/Web/Presenters/templates/User/View.xml b/Web/Presenters/templates/User/View.xml
index e4d55e9e..d3fb9aec 100644
--- a/Web/Presenters/templates/User/View.xml
+++ b/Web/Presenters/templates/User/View.xml
@@ -711,3 +711,7 @@
         {include "banned.xml"}
     {/if}
 {/block}
+
+{block bodyScripts}
+    {script "js/al_despacito_wall.js"}
+{/block}
\ No newline at end of file
diff --git a/Web/static/css/main.css b/Web/static/css/main.css
index eff22be4..1a07e4c6 100644
--- a/Web/static/css/main.css
+++ b/Web/static/css/main.css
@@ -2307,4 +2307,13 @@ a.poll-retract-vote {
     background-color: #fff;
     border-bottom: 1px dotted #8b8b8b;
     z-index: 10;
+}
+
+.page_content.overscrolled div[class$="_small_block"] {
+    position: absolute;
+    visibility: hidden;
+}
+
+.page_content.overscrolled div[class$="_big_block"] {
+    width: unset;
 }
\ No newline at end of file
diff --git a/Web/static/js/al_despacito_wall.js b/Web/static/js/al_despacito_wall.js
new file mode 100644
index 00000000..69f7d293
--- /dev/null
+++ b/Web/static/js/al_despacito_wall.js
@@ -0,0 +1,27 @@
+const contentPage = document.querySelector(".page_content");
+const rootElement = document.documentElement;
+
+let smallBlockObserver = new IntersectionObserver(entries => {
+    entries.forEach(x => {
+        window.requestAnimationFrame(() => {
+            let pastHeight = contentPage.getBoundingClientRect().height;
+            if(x.isIntersecting)
+                contentPage.classList.remove("overscrolled");
+            else
+                contentPage.classList.add("overscrolled");
+
+            let currentHeight = contentPage.getBoundingClientRect().height;
+            let ratio         = currentHeight / pastHeight;
+
+            rootElement.scrollTop *= ratio;
+        }, contentPage);
+    });
+}, {
+    root: null, // screen
+    rootMargin: "0px",
+    threshold: 0
+});
+
+let smol = document.querySelector('div[class$="_small_block"]');
+if(smol != null)
+    smallBlockObserver.observe(smol);
\ No newline at end of file