diff --git a/resources/assets/javascripts/bootstrap/sidebar.js b/resources/assets/javascripts/bootstrap/sidebar.js new file mode 100644 index 0000000000000000000000000000000000000000..f308e6cf02ba2a7835d425ea4392b46378d0c3d5 --- /dev/null +++ b/resources/assets/javascripts/bootstrap/sidebar.js @@ -0,0 +1,15 @@ +STUDIP.ready(() => { + // Apply sidebar magic only on admin/courses + if ( + document.body.id === 'admin-courses-index' + && !document.documentElement.classList.contains('responsive-display') + ) { + STUDIP.Sidebar.observeFooter(); + STUDIP.Sidebar.observeSidebar(); + + document.defaultView.addEventListener('resize', () => { + STUDIP.Sidebar.reset(); + }); + } + +}); diff --git a/resources/assets/javascripts/entry-base.js b/resources/assets/javascripts/entry-base.js index 9fcb57ba97d4533387744bf94b46f3f8a3b87348..82e5640ee8f4a59fb1d6687e176833dda11bd3c4 100644 --- a/resources/assets/javascripts/entry-base.js +++ b/resources/assets/javascripts/entry-base.js @@ -86,6 +86,7 @@ import "./bootstrap/contentmodules.js" import "./bootstrap/responsive-navigation.js" import "./bootstrap/treeview.js" import "./bootstrap/stock-images.js" +import "./bootstrap/sidebar.js" import "./mvv_course_wizard.js" import "./mvv.js" diff --git a/resources/assets/javascripts/lib/sidebar.js b/resources/assets/javascripts/lib/sidebar.js index 3cb1c05eba8f9177d108fbe3f4d9e5167d7b9cad..13418761fdb3806319c274caf2f38ba17db71082 100644 --- a/resources/assets/javascripts/lib/sidebar.js +++ b/resources/assets/javascripts/lib/sidebar.js @@ -1,20 +1,72 @@ -import Scroll from './scroll.js'; - const Sidebar = { - open () { - this.toggle(true); + + observeSidebar() { + const options = { + root: null, + rootMargin: '0px 0px 35px 0px', + threshold: 1 + }; + + /** + * Observe if sidebar fits into viewport. + */ + const sidebar = document.getElementById('sidebar'); + if (sidebar) { + const sObserver = new IntersectionObserver(STUDIP.Sidebar.fits, options); + sObserver.observe(sidebar, options); + } }, - close () { - this.toggle(false); + + observeFooter() { + const options = { + root: null, + rootMargin: '0px', + threshold: 1 + }; + + /** + * Observe if the footer is visible in viewport. + */ + const fObserver = new IntersectionObserver(STUDIP.Sidebar.footerVisible, options); + fObserver.observe(document.getElementById('main-footer'), options); + + }, + + reset() { + const sidebar = document.getElementById('sidebar'); + if (sidebar) { + sidebar.classList.remove('oversized', 'was-oversized', 'fixed'); + sidebar.style.top = ''; + STUDIP.Sidebar.observeSidebar(); + } }, - toggle (visible = null) { - visible = visible ?? !$('#sidebar').hasClass('visible-sidebar'); - // Hide navigation - $('#responsive-toggle').prop('checked', false); - $('#responsive-navigation').removeClass('visible'); + fits(entries, observer) { + const sidebar = document.getElementById('sidebar'); + if (sidebar) { + entries.forEach(entry => { + // Sidebar fits onto current page. + if (entry.isIntersecting) { + sidebar.classList.remove('oversized'); + } else { + sidebar.classList.add('oversized', 'was-oversized'); + } + }); + } + }, - $('#sidebar').toggleClass('visible-sidebar', visible); + footerVisible(entries, observer) { + const sidebar = document.getElementById('sidebar'); + if (sidebar) { + entries.forEach(entry => { + // Footer is visible on current page. + if (entry.isIntersecting) { + sidebar.classList.remove('no-footer'); + } else { + sidebar.classList.add('no-footer'); + } + }); + } } }; diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss index b67a49e744d02559c3a4acbe3737fb694e6819b6..41e9cbfd4332055ada34efbb3081e7ecec331914 100644 --- a/resources/assets/stylesheets/scss/sidebar.scss +++ b/resources/assets/stylesheets/scss/sidebar.scss @@ -112,6 +112,67 @@ } } +html { + &:not(.responsive-display) { + #admin-courses-index { + #sidebar { + top: 50px; + transition: all var(--transition-duration) ease-in-out; + + &.was-oversized { + height: calc(100vh - 250px); + overflow-y: auto; + position: fixed; + top: 155px; + + &.no-footer { + height: calc(100vh - 200px); + } + } + + .widget-links { + li.active { + &::before, + &::after { + border: 0; + } + } + } + } + + &.fixed { + #sidebar { + height: calc(100vh - 125px); + top: 35px; + + &.no-footer { + height: calc(100vh - 100px); + } + } + } + + &.fullscreen-sidebar-shown { + #sidebar { + top: 110px; + + &.was-oversized { + height: calc(100vh - 200px); + + &.no-footer { + height: calc(100vh - 150px); + } + + &.fixed { + top: 110px; + } + } + } + } + + } + } +} + ul.widget-list { list-style: none; margin: 0; diff --git a/resources/vue/components/responsive/ResponsiveNavigation.vue b/resources/vue/components/responsive/ResponsiveNavigation.vue index eda2bfa86ee0ce6f27214f022ece89318c928482..6e56fdaf10ab8203b78195d8c516ce10523d0339 100644 --- a/resources/vue/components/responsive/ResponsiveNavigation.vue +++ b/resources/vue/components/responsive/ResponsiveNavigation.vue @@ -321,7 +321,8 @@ export default { this.showMenu = false; cache.remove('fullscreen-mode'); document.getElementById('responsive-toggle-focusmode').style.display = 'none'; - document.body.style.display = null; + document.body.classList.remove('fullscreen-sidebar-shown'); + document.body.style.display = ''; const siteTitle = document.getElementById('site-title'); if (siteTitle.dataset.originalTitle) {