updating diagram with a fullscreen button and better formating
All checks were successful
deploy-docs / build-and-deploy (push) Successful in 43s
All checks were successful
deploy-docs / build-and-deploy (push) Successful in 43s
This commit is contained in:
@@ -17,38 +17,103 @@ tags: ['homelab', 'infrastructure', 'network']
|
||||
|
||||
{{< rawhtml >}}
|
||||
|
||||
<div class="iframe-wrapper" style="width: 100%; height: 450px; overflow: hidden; position: relative;">
|
||||
<iframe id="homelabel-frame" src="https://homelable.wompmacho.com/view?key=live" style="width: 100%; height: 100%; border: none;"></iframe>
|
||||
|
||||
<div id="homelabel-container" style="position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: #1e1e1e;">
|
||||
|
||||
<button id="fullscreen-btn" style="position: absolute; top: 10px; right: 10px; z-index: 10; display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.7); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
|
||||
<span>Fullscreen</span>
|
||||
</button>
|
||||
|
||||
<div id="wrapper-target" class="iframe-wrapper" style="width: 100%; height: 450px; overflow: hidden; position: relative;">
|
||||
<iframe id="homelabel-frame" src="https://homelable.wompmacho.com/view?key=live" style="width: 100%; height: 100%; border: none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 = iframe.parentElement;
|
||||
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;
|
||||
|
||||
// Dynamically determine what the "ideal" unscaled width of your
|
||||
// Homelabel dashboard should be based on the user's current screen.
|
||||
let virtualWidth = 1400; // Default for large desktops
|
||||
if (targetWidth === 0 || targetHeight === 0) return;
|
||||
|
||||
// Base layout breakpoints
|
||||
let virtualWidth = 1400;
|
||||
if (screenWidth < 768) {
|
||||
virtualWidth = 480; // Mobile view baseline
|
||||
virtualWidth = 480;
|
||||
} else if (screenWidth < 1200) {
|
||||
virtualWidth = 900; // Tablet/Small laptop baseline
|
||||
virtualWidth = 900;
|
||||
}
|
||||
|
||||
// Calculate the scaling ratio
|
||||
const scale = targetWidth / virtualWidth;
|
||||
let virtualHeight = 950;
|
||||
let scale;
|
||||
|
||||
// Apply the 3D transform scale if the container is smaller than the target layout
|
||||
// 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 = (wrapper.offsetHeight / scale) + 'px';
|
||||
iframe.style.height = virtualHeight + 'px';
|
||||
iframe.style.transform = `scale(${scale})`;
|
||||
iframe.style.transformOrigin = 'top left';
|
||||
} else {
|
||||
iframe.style.width = '100%';
|
||||
iframe.style.height = '100%';
|
||||
@@ -56,9 +121,30 @@ tags: ['homelab', 'infrastructure', 'network']
|
||||
}
|
||||
}
|
||||
|
||||
// Run on load and whenever the screen updates
|
||||
// --- 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', scaleIframe);
|
||||
window.addEventListener('resize', () => {
|
||||
setTimeout(scaleIframe, 50);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -19,38 +19,102 @@ This document outlines the internal infrastructure of the **wompmacho** homelab.
|
||||
>
|
||||
> {{< rawhtml >}}
|
||||
|
||||
<div class="iframe-wrapper" style="width: 100%; height: 450px; overflow: hidden; position: relative;">
|
||||
<iframe id="homelabel-frame" src="https://homelable.wompmacho.com/view?key=live" style="width: 100%; height: 100%; border: none;"></iframe>
|
||||
<div id="homelabel-container" style="position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: #1e1e1e;">
|
||||
|
||||
<button id="fullscreen-btn" style="position: absolute; top: 10px; right: 10px; z-index: 10; display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.7); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
|
||||
<span>Fullscreen</span>
|
||||
</button>
|
||||
|
||||
<div id="wrapper-target" class="iframe-wrapper" style="width: 100%; height: 450px; overflow: hidden; position: relative;">
|
||||
<iframe id="homelabel-frame" src="https://homelable.wompmacho.com/view?key=live" style="width: 100%; height: 100%; border: none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 = iframe.parentElement;
|
||||
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;
|
||||
|
||||
// Dynamically determine what the "ideal" unscaled width of your
|
||||
// Homelabel dashboard should be based on the user's current screen.
|
||||
let virtualWidth = 1400; // Default for large desktops
|
||||
if (targetWidth === 0 || targetHeight === 0) return;
|
||||
|
||||
// Base layout breakpoints
|
||||
let virtualWidth = 1400;
|
||||
if (screenWidth < 768) {
|
||||
virtualWidth = 480; // Mobile view baseline
|
||||
virtualWidth = 480;
|
||||
} else if (screenWidth < 1200) {
|
||||
virtualWidth = 900; // Tablet/Small laptop baseline
|
||||
virtualWidth = 900;
|
||||
}
|
||||
|
||||
// Calculate the scaling ratio
|
||||
const scale = targetWidth / virtualWidth;
|
||||
let virtualHeight = 950;
|
||||
let scale;
|
||||
|
||||
// Apply the 3D transform scale if the container is smaller than the target layout
|
||||
// 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 = (wrapper.offsetHeight / scale) + 'px';
|
||||
iframe.style.height = virtualHeight + 'px';
|
||||
iframe.style.transform = `scale(${scale})`;
|
||||
iframe.style.transformOrigin = 'top left';
|
||||
} else {
|
||||
iframe.style.width = '100%';
|
||||
iframe.style.height = '100%';
|
||||
@@ -58,9 +122,30 @@ This document outlines the internal infrastructure of the **wompmacho** homelab.
|
||||
}
|
||||
}
|
||||
|
||||
// Run on load and whenever the screen updates
|
||||
// --- 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', scaleIframe);
|
||||
window.addEventListener('resize', () => {
|
||||
setTimeout(scaleIframe, 50);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user