From a5573926dc3ced6135fdf41ff50d87e454d1f3b5 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 9 Apr 2024 16:43:53 +0200
Subject: [PATCH] [#2294] Removed scroll-to-top, added KCM mobile style

---
 .../js/components/anchor-menu/index.js        |  1 -
 .../components/anchor-menu/scroll_to_top.js   | 21 --------------
 .../scss/components/Header/AnchorMenu.scss    | 29 -------------------
 .../scss/components/KCMSurvey/KCMSurvey.scss  | 22 ++++++++++++--
 src/open_inwoner/templates/master.html        |  5 ----
 5 files changed, 19 insertions(+), 59 deletions(-)
 delete mode 100644 src/open_inwoner/js/components/anchor-menu/scroll_to_top.js

diff --git a/src/open_inwoner/js/components/anchor-menu/index.js b/src/open_inwoner/js/components/anchor-menu/index.js
index b4576d1382..01d80102e5 100644
--- a/src/open_inwoner/js/components/anchor-menu/index.js
+++ b/src/open_inwoner/js/components/anchor-menu/index.js
@@ -1,3 +1,2 @@
 import './anchor-menu'
 import './anchor-menu-mobile'
-import './scroll_to_top'
diff --git a/src/open_inwoner/js/components/anchor-menu/scroll_to_top.js b/src/open_inwoner/js/components/anchor-menu/scroll_to_top.js
deleted file mode 100644
index 66ac4a98ac..0000000000
--- a/src/open_inwoner/js/components/anchor-menu/scroll_to_top.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// Get the button
-const mybutton = document.getElementById('scroll-anchor')
-
-// When the user scrolls down 80px from the top of the document, show the button
-document.addEventListener(
-  'scroll',
-  (e) => {
-    if (!mybutton) {
-      return
-    } else if (
-      document.body.scrollTop > 80 ||
-      document.documentElement.scrollTop > 80
-    ) {
-      mybutton.style.display = 'block'
-    } else {
-      mybutton.style.display = 'none'
-    }
-  },
-  // prevent scroll jank in modern browsers
-  { passive: true }
-)
diff --git a/src/open_inwoner/scss/components/Header/AnchorMenu.scss b/src/open_inwoner/scss/components/Header/AnchorMenu.scss
index 365de571a8..0f88b20cea 100644
--- a/src/open_inwoner/scss/components/Header/AnchorMenu.scss
+++ b/src/open_inwoner/scss/components/Header/AnchorMenu.scss
@@ -155,32 +155,3 @@
     }
   }
 }
-
-/// Scroll
-.anchor {
-  &__scroll {
-    display: none;
-    position: fixed;
-    bottom: var(--spacing-large);
-    right: var(--spacing-large);
-    z-index: 1005;
-
-    @media (min-width: 768px) {
-      position: static;
-      display: none;
-    }
-
-    &-link {
-      position: static;
-
-      @media (min-width: 768px) {
-        position: static;
-        display: none;
-      }
-
-      .link {
-        border-color: transparent;
-      }
-    }
-  }
-}
diff --git a/src/open_inwoner/scss/components/KCMSurvey/KCMSurvey.scss b/src/open_inwoner/scss/components/KCMSurvey/KCMSurvey.scss
index 76d0840b27..dfa188226c 100644
--- a/src/open_inwoner/scss/components/KCMSurvey/KCMSurvey.scss
+++ b/src/open_inwoner/scss/components/KCMSurvey/KCMSurvey.scss
@@ -1,15 +1,31 @@
 .kcm-survey {
+  display: inline-block;
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: 0;
   position: fixed;
-  inset: 50% -20px auto auto;
-  transform: rotate(180deg) translateX(50%) translateY(50%);
-  writing-mode: vertical-rl;
+  bottom: 0;
+  right: 0;
   z-index: 1010;
   padding: var(--spacing-medium);
   background-color: var(--color-info-lighter);
   font-size: var(--font-size-heading-card);
   font-weight: bold;
+  writing-mode: initial;
 
   & .link {
     color: var(--color-info-darker);
   }
+
+  @media (min-width: 768px) {
+    border-top-left-radius: 0;
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+    bottom: initial;
+    right: initial;
+    display: block;
+    inset: 50% -20px auto auto;
+    transform: rotate(180deg) translateX(50%) translateY(50%);
+    writing-mode: vertical-rl;
+  }
 }
diff --git a/src/open_inwoner/templates/master.html b/src/open_inwoner/templates/master.html
index 2c08a2394d..0b2bea03df 100644
--- a/src/open_inwoner/templates/master.html
+++ b/src/open_inwoner/templates/master.html
@@ -105,11 +105,6 @@
             {% endblock mobile_anchors %}
         {% endif %}
 
-        <div class="anchor__scroll" id="scroll-anchor">
-            <div class="anchor__scroll-link">
-                {% button href="#top" text=_("Terug naar boven") icon="arrow_upward" pill=True %}
-            </div>
-        </div>
         {% render_breadcrumbs "components/Header/Breadcrumbs.html" %}
 
         {% block header_image %}{% endblock header_image %}