From 3aecaab4d0387b063c9e02a3523eec4d9a70df4e Mon Sep 17 00:00:00 2001
From: Thomas Hackl <hackl@data-quest.de>
Date: Thu, 23 Mar 2023 14:49:21 +0000
Subject: [PATCH] Resolve "Responsive Navigation: Aufklappen der Sidebar
erfordert Scrollen an den Seitenanfang"
Closes #2360, #2337, #2318, and #2152
Merge request studip/studip!1587
---
.../javascripts/bootstrap/responsive.js | 2 +-
.../assets/javascripts/bootstrap/sidebar.js | 6 ----
resources/assets/javascripts/entry-base.js | 1 -
resources/assets/javascripts/lib/sidebar.js | 15 --------
.../assets/stylesheets/scss/courseware.scss | 2 +-
.../assets/stylesheets/scss/responsive.scss | 35 +++++++++----------
.../assets/stylesheets/scss/sidebar.scss | 3 ++
.../responsive/ResponsiveContentBar.vue | 16 ++++-----
.../responsive/ResponsiveNavigation.vue | 7 ++--
9 files changed, 30 insertions(+), 57 deletions(-)
delete mode 100644 resources/assets/javascripts/bootstrap/sidebar.js
diff --git a/resources/assets/javascripts/bootstrap/responsive.js b/resources/assets/javascripts/bootstrap/responsive.js
index af06f281caa..7ee9b15800e 100644
--- a/resources/assets/javascripts/bootstrap/responsive.js
+++ b/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';
}
}
diff --git a/resources/assets/javascripts/bootstrap/sidebar.js b/resources/assets/javascripts/bootstrap/sidebar.js
deleted file mode 100644
index 04630c09e67..00000000000
--- a/resources/assets/javascripts/bootstrap/sidebar.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// Set correct sidebar height for stickyness
-STUDIP.domReady(() => {
- if (!STUDIP.Responsive.isResponsive()) {
- STUDIP.Sidebar.adjustHeight();
- }
-});
diff --git a/resources/assets/javascripts/entry-base.js b/resources/assets/javascripts/entry-base.js
index f6f55958fb9..70b78e7217a 100644
--- a/resources/assets/javascripts/entry-base.js
+++ b/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"
diff --git a/resources/assets/javascripts/lib/sidebar.js b/resources/assets/javascripts/lib/sidebar.js
index d3d67d5e805..3cb1c05eba8 100644
--- a/resources/assets/javascripts/lib/sidebar.js
+++ b/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;
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 34f9df37161..175b2a606cd 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -5376,5 +5376,5 @@ s h e l f i t e m s
}
}
/* * * * * * * * * * * * * * * * * *
-s h e l f i t e m s e n d
+s h e l f i t e m s e n d
* * * * * * * * * * * * * * * * * */
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 6dc068ddddf..57047bc464a 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/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;
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index 4d4efc02df5..c009e0e8d07 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/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 {
diff --git a/resources/vue/components/responsive/ResponsiveContentBar.vue b/resources/vue/components/responsive/ResponsiveContentBar.vue
index 6899c3b91f5..051b83f5aa1 100644
--- a/resources/vue/components/responsive/ResponsiveContentBar.vue
+++ b/resources/vue/components/responsive/ResponsiveContentBar.vue
@@ -69,32 +69,28 @@ 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')) {
+ && !document.documentElement.classList.contains('fullscreen-mode')) {
// Set a timeout here so that the content "disappears" after slide-in aninmation is finished.
setTimeout(() => {
content.style.display = 'none';
diff --git a/resources/vue/components/responsive/ResponsiveNavigation.vue b/resources/vue/components/responsive/ResponsiveNavigation.vue
index 500c0304203..81b6a4da352 100644
--- a/resources/vue/components/responsive/ResponsiveNavigation.vue
+++ b/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':
--
GitLab