Added header/footer animation

app/static/css/default.css

@@ -135,3 +135,45 @@ body::before {
 iframe{
   margin-bottom: -10px;
 }
+
+.container-fluid {
+  max-width: 100% !important;
+}
+
+:root {
+  --anim-duration: 3s;          /* Basis-Dauer */
+}
+
+.container,
+.container-fluid {
+  transition: 
+    max-width var(--anim-duration) ease-in-out,
+    padding-left var(--anim-duration) ease-in-out,
+    padding-right var(--anim-duration) ease-in-out;
+}
+
+#navbar_logo {
+  /* start invisible but in the layout (d-none will actually hide it) */
+  opacity: 0;
+  transition: opacity var(--anim-duration) ease-in-out;
+}
+
+/* 1. Make sure headers and footers can collapse */
+header,
+footer {
+  overflow: hidden;
+  /* choose a max-height that’s >= your tallest header/footer */
+  max-height: 200px;
+  padding: 1rem;
+  transition:
+    max-height var(--anim-duration) ease-in-out,
+    padding var(--anim-duration) ease-in-out;
+}
+
+/* 2. In fullscreen mode, collapse them */
+body.fullscreen header,
+body.fullscreen footer {
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}

app/static/js/fullscreen.js

@@ -10,38 +10,67 @@ function updateUrlFullscreen(enabled) {
 }
 
 /**
- * Enter fullscreen: hide header/footer, enable full width, recalc scroll,
- * set both URL params, update button.
+ * Starts a requestAnimationFrame loop that calls your recalc methods,
+ * and stops automatically when the header’s max-height transition ends.
  */
+function recalcWhileCollapsing() {
+  const header = document.querySelector('header');
+  if (!header) return;
+
+  // 1) Start the RAF loop
+  let rafId;
+  const step = () => {
+    adjustScrollContainerHeight();
+    updateCustomScrollbar();
+    rafId = requestAnimationFrame(step);
+  };
+  step();
+
+  // 2) Listen for the end of the max-height transition
+  function onEnd(e) {
+    if (e.propertyName === 'max-height') {
+      cancelAnimationFrame(rafId);
+      header.removeEventListener('transitionend', onEnd);
+    }
+  }
+  header.addEventListener('transitionend', onEnd);
+}
+
 function enterFullscreen() {
-  document.querySelectorAll('header, footer')
-          .forEach(function(el){ el.style.display = 'none'; });
+  document.body.classList.add('fullscreen');
   setFullWidth(true);
   updateUrlFullscreen(true);
 
+  // fade in logo… (unchanged)
   const logo = document.getElementById('navbar_logo');
-  if (logo) logo.classList.remove('d-none');
+  if (logo) {
+    logo.classList.remove('d-none');
+    requestAnimationFrame(() => logo.style.opacity = '1');
+  }
 
-  if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight();
-  if (typeof updateCustomScrollbar      === 'function') updateCustomScrollbar();
+  // now recalc in lock-step with the CSS collapse animation
+  recalcWhileCollapsing();
 }
 
-/**
- * Exit fullscreen: show header/footer, disable full width, recalc scroll,
- * clear both URL params, update button.
- */
 function exitFullscreen() {
-  document.querySelectorAll('header, footer')
-          .forEach(function(el){ el.style.display = ''; });
+  document.body.classList.remove('fullscreen');
   setFullWidth(false);
   updateUrlFullscreen(false);
 
+  // fade out logo… (unchanged)
   const logo = document.getElementById('navbar_logo');
-  if (logo) logo.classList.add('d-none');
+  if (logo) {
+    logo.style.opacity = '0';
+    logo.addEventListener('transitionend', function handler(e) {
+      if (e.propertyName === 'opacity') {
+        logo.classList.add('d-none');
+        logo.removeEventListener('transitionend', handler);
+      }
+    });
+  }
 
-  if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight();
-  if (typeof updateCustomScrollbar      === 'function') updateCustomScrollbar();
-  if (typeof syncIframeHeight           === 'function') syncIframeHeight();
+  // recalc while header/footer expand back
+  recalcWhileCollapsing();
 }
 
 /**

app/static/js/fullwidth.js

@@ -7,13 +7,14 @@ function setFullWidth(enabled) {
   if (!el) return;
   if (enabled) {
     el.classList.replace('container', 'container-fluid');
-    updateUrlFullWidth(true)
+    updateUrlFullWidth(true);
   } else {
     el.classList.replace('container-fluid', 'container');
-    updateUrlFullWidth(false)
+    updateUrlFullWidth(false);
   }
 }
 
+
 /**
  * Reads the URL parameter `fullwidth` and applies full width if it's set.
  * @returns {boolean} – current full‐width state

app/static/js/iframe.js

@@ -23,6 +23,7 @@ function syncIframeHeight() {
 
 // Function to open a URL in an iframe
 function openIframe(url) {
+    enterFullscreen()
     // Hide the container (and its scroll-container) so the iframe can appear in its place
     if (scrollbarContainer) {
         scrollbarContainer.style.display = 'none';