Resolve "Responsive Navigation: Aufklappen der Sidebar erfordert Scrollen an den Seitenanfang"

Closes #2360, #2337, #2318, and #2152

Merge request studip/studip!1587

resources/assets/javascripts/bootstrap/responsive.js

@@ -6,7 +6,7 @@ STUDIP.domReady(() => {
         document.documentElement.classList.add('fullscreen-mode');
         const sidebar = document.getElementById('sidebar');
         if (sidebar) {
-            sidebar.style.display = 'none';
+            sidebar.ariaHidden = 'true';
         }
     }
 

resources/assets/javascripts/bootstrap/sidebar.js

-// Set correct sidebar height for stickyness
-STUDIP.domReady(() => {
-    if (!STUDIP.Responsive.isResponsive()) {
-        STUDIP.Sidebar.adjustHeight();
-    }
-});

resources/assets/javascripts/entry-base.js

@@ -28,7 +28,6 @@ import "./bootstrap/studip_helper_attributes.js"
 import "./bootstrap/header_magic.js"
 import "./bootstrap/header_navigation.js"
 import "./bootstrap/personal_notifications.js"
-import "./bootstrap/sidebar.js"
 import "./bootstrap/dialog.js"
 import "./bootstrap/jsupdater.js"
 import "./bootstrap/files.js"

resources/assets/javascripts/lib/sidebar.js

@@ -18,19 +18,4 @@ const Sidebar = {
     }
 };
 
-Sidebar.adjustHeight = () => {
-    const display = $('#sidebar').css('display');
-
-    if (display === 'none') {
-        $('#sidebar').css('display', 'block');
-    }
-    const lastWidget = $('.sidebar-widget:last-child');
-    if (lastWidget.length > 0) {
-        const height = lastWidget.offset().top + lastWidget.height();
-        $('#sidebar').css('height', height + 'px');
-    }
-    if (display === 'none') {
-        $('#sidebar').css('display', 'none');
-    }
-}
 export default Sidebar;

resources/assets/stylesheets/scss/responsive.scss

@@ -261,8 +261,10 @@ $sidebarOut: -330px;
     }
 }
 
-.cw-ribbon-button-zoom {
-    display: none;
+#responsive-contentbar-container {
+    position: fixed;
+    width: 100vw;
+    z-index: 1000;
 }
 
 .responsive-display,
@@ -314,8 +316,11 @@ $sidebarOut: -330px;
     #sidebar {
         background-color: $white;
         max-height: calc(100vh - 100px);
+        left: 15px;
         position: absolute;
+        top: 116px;
         transform: translateX($sidebarOut);
+        visibility: hidden;
         z-index: 100;
 
         &.responsive-hide {
@@ -328,10 +333,9 @@ $sidebarOut: -330px;
             @media not prefers-reduced-motion {
                 animation: slide-in $transition-duration forwards;
             }
-
-            left: 15px;
-            position: relative;
-            top: 60px;
+            position: sticky;
+            top: 100px;
+            visibility: visible;
         }
 
         .sidebar-image {
@@ -347,6 +351,9 @@ $sidebarOut: -330px;
         }
 
         @keyframes slide-in {
+            0% {
+                transform: translateX($sidebarOut);
+            }
             100% {
                 transform: translateX($sidebarIn);
             }
@@ -374,6 +381,7 @@ $sidebarOut: -330px;
     }
 
     #content-wrapper {
+        margin-top: 65px;
         width: calc(100vw - 2 * $page-margin);
     }
 
@@ -387,7 +395,6 @@ $sidebarOut: -330px;
         justify-content: stretch;
         margin-bottom: 15px;
         padding-bottom: 0.5em;
-        padding-left: 5px;
 
         .contentbar-nav,
         .cw-ribbon-nav {
@@ -441,7 +448,7 @@ $sidebarOut: -330px;
         }
 
         > .contentbar-wrapper-right {
-            flex: 1;
+            flex: 0;
             left: 5px;
             position: relative;
 
@@ -489,6 +496,7 @@ $sidebarOut: -330px;
     }
 
     #toc {
+        max-width: 100vw;
         position: absolute;
         right: -8px;
         top: -21px;
@@ -550,6 +558,7 @@ $sidebarOut: -330px;
     #sidebar {
         height: 100%;
         position: fixed;
+        top: 75px;
         transform: translateX($sidebarOut);
         -webkit-transform: translateX($sidebarOut);
         top: 80px;
@@ -613,12 +622,6 @@ $sidebarOut: -330px;
             display: none;
         }
 
-        #responsive-contentbar-container {
-            position: fixed;
-            width: 100vw;
-            z-index: 1000;
-        }
-
         #responsive-contentbar {
             padding-left: 15px;
 
@@ -628,10 +631,6 @@ $sidebarOut: -330px;
             }
         }
 
-        #sidebar.responsive-hide {
-            top: 110px;
-        }
-
         #content-wrapper {
             flex: 1;
             margin-top: 75px;

resources/assets/stylesheets/scss/sidebar.scss

@@ -2,11 +2,14 @@
     background: $white;
     border-left: 0;
     display: inline-block;
+    height: max-content;
+    margin-bottom: $page-margin + 35px;
     margin-top: 15px;
     padding: 0 5px 7px 15px;
     position: sticky;
     text-align: left;
     top: 50px;
+    width: $sidebar-width;
     z-index: 2;
 
     .sidebar-image {

resources/vue/components/responsive/ResponsiveContentBar.vue

@@ -69,30 +69,26 @@ export default {
             const content = document.getElementById('content-wrapper');
             const pageTitle = document.getElementById('page-title-container');
             if (this.sidebarOpen) {
+                sidebar.ariaHidden = 'true';
                 sidebar.classList.add('responsive-hide');
                 sidebar.classList.remove('responsive-show');
 
                 if (document.documentElement.classList.contains('responsive-display')
                         && !document.documentElement.classList.contains('fullscreen-mode')) {
-                    content.style.display = null;
-                    pageTitle.style.display = null;
+                    content.style.display = '';
+                    pageTitle.style.display = '';
                 }
 
                 if (!document.documentElement.classList.contains('responsive-display')) {
                     document.body.style.display = 'flex';
                 }
 
-                // Hide sidebar after slide-out animation has ended so that it isn't focusable anymore.
-                setTimeout(() => {
-                    sidebar.style.display = 'none';
-                }, 301);
-
                 this.sidebarOpen = false;
             } else {
-                sidebar.style.display = '';
-
+                sidebar.ariaHidden = '';
                 sidebar.classList.add('responsive-show');
                 sidebar.classList.remove('responsive-hide');
+
                 if (document.documentElement.classList.contains('responsive-display')
                     && !document.documentElement.classList.contains('fullscreen-mode')) {
                     // Set a timeout here so that the content "disappears" after slide-in aninmation is finished.

resources/vue/components/responsive/ResponsiveNavigation.vue

@@ -312,7 +312,7 @@ export default {
                     siteTitle.textContent = this.initialTitle;
                 }
 
-                sidebar.style.display = 'none';
+                sidebar.ariaHidden = 'true';
 
             } else {
                 document.documentElement.classList.remove('fullscreen-mode');
@@ -327,8 +327,7 @@ export default {
                     siteTitle.textContent = siteTitle.dataset.originalTitle.trim();
                 }
 
-                sidebar.style.display = '';
-
+                sidebar.ariaHidden = '';
             }
 
             this.isFullscreen = state;
@@ -447,11 +446,9 @@ export default {
                         this.isFullscreen = true;
 
                         STUDIP.eventBus.emit('fullscreen-enabled');
-                        document.getElementById('sidebar').style.display = 'none';
                     } else {
                         this.isFullscreen = false;
                         STUDIP.eventBus.emit('fullscreen-disabled');
-                        document.getElementById('sidebar').style.display = '';
                     }
                     break;
                 case 'HEADER':