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