Add toggle to hide reviews bottom bar in recap screens

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'));
+  };
 </script>
 <ul class="object-tools">
   <li>
@@ -903,6 +984,9 @@ <h2 class="current-grants-num">
       </div>
     </div>
   </div>
+  <button type="button" class="reviews-bottom-bar-toggle" id="bottom-bar-toggle" aria-label="Toggle bottom bar visibility" aria-expanded="true">
+    <span id="toggle-icon" aria-hidden="true">▼</span>
+  </button>
   {% endif %}
 </form>
 {% endblock %}

backend/reviews/templates/proposals-recap.html

@@ -70,6 +70,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 {
@@ -93,6 +98,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;
+  }
+
   ul.proposal-ranking {
     margin-top: 0;
     margin-left: 30px;
@@ -156,6 +192,24 @@
     getRefs();
     updateBottomBarUI();
 
+    // Initialize bottom bar toggle functionality
+    const bottomBarHidden = localStorage.getItem('proposalsBottomBarHidden') === '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);
+    }
+
     submissions.forEach((submissionData) => {
       const submissionId = submissionData.id;
       const acceptInput = document.getElementById(
@@ -324,6 +378,31 @@
       }
     );
   };
+
+  // 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('proposalsBottomBarHidden', bottomBar.classList.contains('hidden'));
+  };
 </script>
 
 <form id="changelist-form" method="post" novalidate="">
@@ -591,5 +670,8 @@ <h2>Waiting List: <span id="waitinglist-proposals-num">0</span></h2>
       </div>
     </div>
   </div>
+  <button type="button" class="reviews-bottom-bar-toggle" id="bottom-bar-toggle" aria-label="Toggle bottom bar visibility" aria-expanded="true">
+    <span id="toggle-icon" aria-hidden="true">▼</span>
+  </button>
 </form>
 {% endblock %}