diff --git a/resources/assets/javascripts/bootstrap/sidebar.js b/resources/assets/javascripts/bootstrap/sidebar.js index df21f16acf704831aa89629c802872a28fd99eb4..5e89a7fc472e03537df7709609ad8c47e407ed51 100644 --- a/resources/assets/javascripts/bootstrap/sidebar.js +++ b/resources/assets/javascripts/bootstrap/sidebar.js @@ -3,6 +3,7 @@ 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(); @@ -10,5 +11,4 @@ STUDIP.ready(() => { document.defaultView.addEventListener('resize',() => { STUDIP.Sidebar.reset(); }); - }); diff --git a/resources/assets/javascripts/lib/sidebar.js b/resources/assets/javascripts/lib/sidebar.js index 17c96b90a3bff64e7bd1e56ea5f6d4a5ee8d4e07..17362fa017c4eb400336ab018e1ff9cac82d40fc 100644 --- a/resources/assets/javascripts/lib/sidebar.js +++ b/resources/assets/javascripts/lib/sidebar.js @@ -22,7 +22,7 @@ const Sidebar = { const sidebar = document.getElementById('sidebar'); if (sidebar) { const sObserver = new IntersectionObserver(STUDIP.Sidebar.fits, options); - sObserver.observe(sidebar, options); + sObserver.observe(); } }, @@ -36,11 +36,11 @@ const Sidebar = { for (const mutation of mutations) { if ((!mutation.oldValue || mutation.oldValue.indexOf('fixed') === -1) && mutation.target.classList.contains('fixed')) { - sidebar.style.top = ''; sidebar.classList.add('fixed'); + sidebar.style.top = ''; } else if (mutation.oldValue && mutation.oldValue.indexOf('fixed') !== -1 && !mutation.target.classList.contains('fixed')) { - STUDIP.Sidebar.reset(); + sidebar.classList.remove('fixed'); } } }); @@ -64,18 +64,17 @@ const Sidebar = { * Observe if the footer is visible in viewport. */ const fObserver = new IntersectionObserver(STUDIP.Sidebar.footerVisible, options); - fObserver.observe(document.getElementById('main-footer'), options); + fObserver.observe(document.getElementById('main-footer')); }, reset() { const sidebar = document.getElementById('sidebar'); if (sidebar) { - sidebar.classList.remove('oversized', 'was-oversized', 'fixed'); + sidebar.classList.remove('oversized', 'adjusted', 'fixed'); sidebar.style.top = ''; - STUDIP.Sidebar.place(); - STUDIP.Sidebar.observeSidebar(); } + STUDIP.Sidebar.observe(); }, fits(entries, observer) { @@ -86,7 +85,7 @@ const Sidebar = { if (entry.isIntersecting) { sidebar.classList.remove('oversized'); } else { - sidebar.classList.add('oversized', 'was-oversized'); + sidebar.classList.add('oversized', 'adjusted'); } }); } @@ -98,9 +97,13 @@ const Sidebar = { entries.forEach(entry => { // Footer is visible on current page. if (entry.isIntersecting) { - sidebar.classList.remove('no-footer'); + if (sidebar.classList.contains('no-footer')) { + sidebar.classList.remove('no-footer'); + } } else { - sidebar.classList.add('no-footer'); + if (!sidebar.classList.contains('no-footer')) { + sidebar.classList.add('no-footer'); + } } }); } diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss index d03ede6057754e6610f8a529ac62b92d00eadea3..60114c7dbab95835f1e309f20e83f68896d1028f 100644 --- a/resources/assets/stylesheets/scss/sidebar.scss +++ b/resources/assets/stylesheets/scss/sidebar.scss @@ -1,7 +1,7 @@ #sidebar { + background: $white; border-left: 0; display: inline-block; - height: max-content; margin-bottom: $page-margin + 35px; margin-top: 15px; padding: 0 5px 7px 15px; @@ -11,11 +11,7 @@ width: $sidebar-width; z-index: 2; - &.fixed { - top: 55px; - } - - &.was-oversized { + &.adjusted { height: calc(100vh - 265px); position: fixed; overflow-x: hidden;