diff --git a/resources/assets/javascripts/bootstrap/responsive.js b/resources/assets/javascripts/bootstrap/responsive.js
index af06f281caa475ff8fd90dcbc29e69adad4a522c..7ee9b15800ec74c8846808794f6527f60078c550 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 04630c09e6701a652aaa50f96cb617df1c3ccc8a..0000000000000000000000000000000000000000
--- 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 f6f55958fb9ff9b656a481093d26fc3be1996644..70b78e7217ade596347721bde1815716b383396a 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 d3d67d5e805b12fff17eb80d41a5c0f1e5b22586..3cb1c05eba8f9177d108fbe3f4d9e5167d7b9cad 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 34f9df37161effe48ac4b93638d90964b43c2214..175b2a606cdea62ade90ade500720e58225508d5 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 6dc068ddddf70180195231b5bd380fbcc8b1b713..57047bc464ab5d51e17f0500adcb1168fc334022 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 4d4efc02df58fa8b45696e20d306aeedc6947f4d..c009e0e8d07fbe8b88e978b7708981aeffcc2ac5 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 6899c3b91f5f7079b14a471c20efb4b87ce10ff0..051b83f5aa1e916e5537b64f40d23f3480bbb00c 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 500c030420390650508b216313b5d56b9693d947..81b6a4da3522b6a8d1549163abb8d8539a64bf9f 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':