kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-07-07 03:25: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;
}
:root {
--anim-duration: 3s; /* Basis-Dauer */
}
.container,
.container-fluid {
transition:
max-width 1s ease-in-out,
padding-left 1s ease-in-out,
padding-right 1s ease-in-out;
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;
}

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

@ -14,36 +14,61 @@ function updateUrlFullscreen(enabled) {
* set both URL params, update button.
*/
function enterFullscreen() {
document.querySelectorAll('header, footer')
.forEach(function(el){ el.style.display = 'none'; });
// hide header/footer
document.querySelectorAll('header, footer').forEach(el => el.style.display = 'none');
// go full-width
setFullWidth(true);
updateUrlFullscreen(true);
// fade in 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 updateCustomScrollbar === 'function') updateCustomScrollbar();
if (typeof updateCustomScrollbar === 'function') updateCustomScrollbar();
}
/**
* 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 = ''; });
// show header/footer
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);
updateUrlFullscreen(false);
const logo = document.getElementById('navbar_logo');
if (logo) logo.classList.add('d-none');
// recalc scrollbars
if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight();
if (typeof updateCustomScrollbar === 'function') updateCustomScrollbar();
if (typeof syncIframeHeight === 'function') syncIframeHeight();
if (typeof updateCustomScrollbar === 'function') updateCustomScrollbar();
if (typeof syncIframeHeight === 'function') syncIframeHeight();
}
/**
* Toggle between enter and exit fullscreen.
*/