wompmacho
592b5a24db
All checks were successful
deploy-docs / build-and-deploy (push) Successful in 43s
5.4 KiB
5.4 KiB
title, description, showHero, showEditURL, author, date, lastmod, tags
| title | description | showHero | showEditURL | author | date | lastmod | tags | |||
|---|---|---|---|---|---|---|---|---|---|---|
| Infrastructure Diagrams | My Home Network Overview | false | true | wompmacho | 2023-07-04 05:33:31.158000+00:00 | 2026-04-12 |
|
← Back to Homelab Infrastructure
2026 Home lab
{{< rawhtml >}}
Fullscreen
<style>
#homelabel-frame {
display: block !important;
flex-shrink: 0 !important;
}
/* Regular view wrapper: standard, safe layout rules */
#wrapper-target {
overflow: hidden !important;
position: relative !important;
}
/* Fullscreen Container Engine */
#homelabel-container:fullscreen {
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
border-radius: 0 !important;
padding: 24px !important;
box-sizing: border-box !important;
background: #1e1e1e !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
/* Fullscreen Wrapper: Converts to a flex centering field ONLY when fullscreen */
#homelabel-container:fullscreen #wrapper-target {
width: 100% !important;
flex: 1 !important;
height: auto !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
</style>
<script>
document.getElementById('homelabel-frame').addEventListener('load', function() {
const iframe = this;
const wrapper = document.getElementById('wrapper-target');
const container = document.getElementById('homelabel-container');
const fsButton = document.getElementById('fullscreen-btn');
function scaleIframe() {
const targetWidth = wrapper.offsetWidth;
const targetHeight = wrapper.offsetHeight;
const screenWidth = window.innerWidth;
if (targetWidth === 0 || targetHeight === 0) return;
// Base layout breakpoints
let virtualWidth = 1400;
if (screenWidth < 768) {
virtualWidth = 480;
} else if (screenWidth < 1200) {
virtualWidth = 900;
}
let virtualHeight = 950;
let scale;
// FIX: Isolate calculation parameters and transform origins per state
if (document.fullscreenElement) {
const scaleX = targetWidth / virtualWidth;
const scaleY = targetHeight / virtualHeight;
scale = Math.min(scaleX, scaleY);
iframe.style.transformOrigin = 'center center';
} else {
// Safe standard inline calculations
scale = targetWidth / virtualWidth;
virtualHeight = targetHeight / scale;
iframe.style.transformOrigin = 'top left';
}
// Apply transformations
if (scale < 1) {
iframe.style.width = virtualWidth + 'px';
iframe.style.height = virtualHeight + 'px';
iframe.style.transform = `scale(${scale})`;
} else {
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.transform = 'none';
}
}
// --- FULLSCREEN INTERACTION CONTROLS ---
fsButton.addEventListener('click', () => {
if (!document.fullscreenElement) {
container.requestFullscreen().catch(err => {
console.error(`Error attempting to enable fullscreen: ${err.message}`);
});
fsButton.querySelector('span').textContent = 'Exit';
} else {
document.exitFullscreen();
fsButton.querySelector('span').textContent = 'Fullscreen';
}
});
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
fsButton.querySelector('span').textContent = 'Fullscreen';
}
setTimeout(scaleIframe, 75);
});
scaleIframe();
window.addEventListener('resize', () => {
setTimeout(scaleIframe, 50);
});
});
</script>
{{< /rawhtml >}}
2024 Home Lab
2023 Home Lab
2020 Home Lab
2019 Home Lab
