kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-07-07 11:35:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added animation for fullscreen log

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-07-06 17:46:51 +02:00
parent a7eb14046f
commit 0640ec6439
No known key found for this signature in database
GPG Key ID: 44D8F11FD62F878E
2 changed files with 49 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/static/css/default.css
View File

@ -140,10 +140,20 @@ iframe{
max-width: 100% !important; max-width: 100% !important;
} }
:root {
--anim-duration: 3s; /* Basis-Dauer */
}
.container, .container,
.container-fluid { .container-fluid {
transition: transition:
max-width 1s ease-in-out, max-width var(--anim-duration) ease-in-out,
padding-left 1s ease-in-out, padding-left var(--anim-duration) ease-in-out,
padding-right 1s 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;
} }

47
app/static/js/fullscreen.js
View File

@ -14,36 +14,61 @@ function updateUrlFullscreen(enabled) {
* set both URL params, update button. * set both URL params, update button.
*/ */
function enterFullscreen() { function enterFullscreen() {
document.querySelectorAll('header, footer') // hide header/footer
.forEach(function(el){ el.style.display = 'none'; }); document.querySelectorAll('header, footer').forEach(el => el.style.display = 'none');
// go full-width
setFullWidth(true); setFullWidth(true);
updateUrlFullscreen(true); updateUrlFullscreen(true);
// fade in logo
const logo = document.getElementById('navbar_logo'); const logo = document.getElementById('navbar_logo');
if (logo) logo.classList.remove('d-none'); if (logo) {
logo.classList.remove('d-none');
// next frame → trigger transition
requestAnimationFrame(() => {
logo.style.opacity = '1';
});
}
// recalc scrollbars
if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight(); if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight();
if (typeof updateCustomScrollbar === 'function') updateCustomScrollbar(); if (typeof updateCustomScrollbar === 'function') updateCustomScrollbar();
} }
/** /**
* Exit fullscreen: show header/footer, disable full width, recalc scroll, * Exit fullscreen: show header/footer, disable full width, recalc scroll,
* clear both URL params, update button. * clear both URL params, update button.
*/ */
function exitFullscreen() { function exitFullscreen() {
document.querySelectorAll('header, footer') // show header/footer
.forEach(function(el){ el.style.display = ''; }); document.querySelectorAll('header, footer').forEach(el => el.style.display = '');
// fade out logo
const logo = document.getElementById('navbar_logo');
if (logo) {
logo.style.opacity = '0';
logo.addEventListener('transitionend', function handler(e) {
// only once, and only for opacity
if (e.propertyName === 'opacity') {
logo.classList.add('d-none');
logo.removeEventListener('transitionend', handler);
}
});
}
// reset width
setFullWidth(false); setFullWidth(false);
updateUrlFullscreen(false); updateUrlFullscreen(false);
const logo = document.getElementById('navbar_logo'); // recalc scrollbars
if (logo) logo.classList.add('d-none');
if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight(); if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight();
if (typeof updateCustomScrollbar === 'function') updateCustomScrollbar(); if (typeof updateCustomScrollbar === 'function') updateCustomScrollbar();
if (typeof syncIframeHeight === 'function') syncIframeHeight(); if (typeof syncIframeHeight === 'function') syncIframeHeight();
} }
/** /**
* Toggle between enter and exit fullscreen. * Toggle between enter and exit fullscreen.
*/ */