From 90f7e7ff475f047eb7c1f492ae1c7e3785bba4c9 Mon Sep 17 00:00:00 2001 From: Thomas Hackl Date: Mon, 17 Jul 2023 15:18:20 +0200 Subject: make sidebar fully accessible again in responsive view --- resources/assets/javascripts/bootstrap/sidebar.js | 19 +++++++------- resources/assets/stylesheets/scss/responsive.scss | 9 ++----- resources/assets/stylesheets/scss/sidebar.scss | 30 ++++++++++++----------- 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); + } } } } -- cgit v1.0