make sidebar fully accessible again in responsive viewissue-2388

3 files changed, 28 insertions, 30 deletions

diff --git a/resources/assets/javascripts/bootstrap/sidebar.js b/resources/assets/javascripts/bootstrap/sidebar.js
index df21f16..65c5b2c 100644
--- a/resources/assets/javascripts/bootstrap/sidebar.js
+++ b/resources/assets/javascripts/bootstrap/sidebar.js
@@ -1,14 +1,15 @@
 import eventBus from '../lib/event-bus.ts';
 
 STUDIP.ready(() => {
-    // Manually nudge sidebar under main header.
-    STUDIP.Sidebar.place();
-    STUDIP.Sidebar.observeBody();
-    STUDIP.Sidebar.observeFooter();
-    STUDIP.Sidebar.observeSidebar();
-
-    document.defaultView.addEventListener('resize',() => {
-        STUDIP.Sidebar.reset();
-    });
+    if (!document.documentElement.classList.contains('responsive-display')) {
+        // Manually nudge sidebar under main header.
+        STUDIP.Sidebar.place();
+        STUDIP.Sidebar.observeBody();
+        STUDIP.Sidebar.observeFooter();
+        STUDIP.Sidebar.observeSidebar();
 
+        document.defaultView.addEventListener('resize', () => {
+            STUDIP.Sidebar.reset();
+        });
+    }
 });
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 9226db8..2b5f81c 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -338,12 +338,8 @@ $sidebarOut: -330px;
                 animation: slide-in $transition-duration forwards;
             }
 
-            top: 100px;
+            top: 80px;
             visibility: visible;
-
-            &:not(.oversized) {
-                position: sticky;
-            }
         }
 
         .sidebar-image {
@@ -550,11 +546,10 @@ $sidebarOut: -330px;
 
     #sidebar {
         height: 100%;
+        overflow-y: auto;
         position: fixed;
-        top: 75px;
         transform: translateX($sidebarOut);
         -webkit-transform: translateX($sidebarOut);
-        top: 80px;
         z-index: 100;
 
         &.responsive-show {
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index d03ede6..8b31139 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/resources/assets/stylesheets/scss/sidebar.scss
@@ -150,24 +150,26 @@
     }
 }
 
-#admin-courses-index {
-    #sidebar {
-        top: 50px;
+html:not(.responsive-display) {
+    #admin-courses-index {
+        #sidebar {
+            top: 50px;
 
-        &.adjusted {
-            height: calc(100vh - 250px);
-            top: 155px;
+            &.adjusted {
+                height: calc(100vh - 250px);
+                top: 155px;
 
-            &.no-footer {
-                height: calc(100vh - 200px);
-            }
+                &.no-footer {
+                    height: calc(100vh - 200px);
+                }
 
-            &.fixed {
-                height: calc(100vh - 125px);
-                top: 35px;
+                &.fixed {
+                    height: calc(100vh - 125px);
+                    top: 35px;
 
-                &.no-footer {
-                    height: calc(100vh - 100px);
+                    &.no-footer {
+                        height: calc(100vh - 100px);
+                    }
                 }
             }
         }