diff --git a/backend/reviews/templates/grants-recap.html b/backend/reviews/templates/grants-recap.html index bdf87ad6ac..4dd7b33449 100644 --- a/backend/reviews/templates/grants-recap.html +++ b/backend/reviews/templates/grants-recap.html @@ -75,6 +75,11 @@ z-index: 500; background-color: #417690; color: #fff; + transition: transform 0.3s ease-in-out; + } + + .reviews-bottom-bar.hidden { + transform: translateY(100%); } .reviews-bottom-bar-content { @@ -105,6 +110,37 @@ max-width: 800px; } + .reviews-bottom-bar-toggle { + position: fixed; + bottom: 10px; + right: 20px; + z-index: 501; + background-color: #417690; + color: #fff; + border: 2px solid #fff; + border-radius: 50%; + width: 50px; + height: 50px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + transition: bottom 0.3s ease-in-out, background-color 0.2s; + } + + .reviews-bottom-bar-toggle:hover { + background-color: #2a5d75; + } + + .reviews-bottom-bar.hidden ~ .reviews-bottom-bar-toggle { + bottom: 10px; + } + + .reviews-bottom-bar:not(.hidden) ~ .reviews-bottom-bar-toggle { + bottom: 100px; + } + .results-table ul { margin-left: 0; padding: 0; @@ -536,7 +572,52 @@ }); }; - window.addEventListener('load', initSorting); + window.addEventListener('load', () => { + initSorting(); + + // Initialize bottom bar toggle functionality + const bottomBarHidden = localStorage.getItem('grantsBottomBarHidden') === 'true'; + const bottomBar = document.querySelector('.reviews-bottom-bar'); + const toggleIcon = document.getElementById('toggle-icon'); + const toggleButton = document.getElementById('bottom-bar-toggle'); + + if (bottomBar && toggleIcon && toggleButton) { + if (bottomBarHidden) { + bottomBar.classList.add('hidden'); + toggleIcon.textContent = '▲'; + toggleButton.setAttribute('aria-expanded', 'false'); + } else { + toggleButton.setAttribute('aria-expanded', 'true'); + } + + toggleButton.addEventListener('click', toggleBottomBar); + } + }); + + // Toggle bottom bar visibility + const toggleBottomBar = () => { + const bottomBar = document.querySelector('.reviews-bottom-bar'); + const toggleIcon = document.getElementById('toggle-icon'); + const toggleButton = document.getElementById('bottom-bar-toggle'); + + if (!bottomBar || !toggleIcon || !toggleButton) { + console.warn('Required elements for bottom bar toggle not found'); + return; + } + + bottomBar.classList.toggle('hidden'); + + if (bottomBar.classList.contains('hidden')) { + toggleIcon.textContent = '▲'; + toggleButton.setAttribute('aria-expanded', 'false'); + } else { + toggleIcon.textContent = '▼'; + toggleButton.setAttribute('aria-expanded', 'true'); + } + + // Save preference in localStorage + localStorage.setItem('grantsBottomBarHidden', bottomBar.classList.contains('hidden')); + };