corrected fullscreen

Author: ToolboxAid

GameFoundryStudio/assets/css/styles.css

@@ -21,6 +21,55 @@ a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 36p
     overflow: hidden;
 }
 
+/* Tool Display Mode indicator state */
+body:not(.tool-focus-mode) details.tool-display-mode summary::after {
+    content: "-" !important;
+}
+
+body.tool-focus-mode details.tool-display-mode summary::after {
+    content: "+" !important;
+}
+
+/* Place Tool Display Mode above the center panel without displacing columns */
+.tool-workspace {
+    grid-template-rows: auto auto;
+}
+
+.tool-workspace > .tool-column:first-of-type {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+}
+
+.tool-workspace > .tool-display-mode {
+    grid-column: 2;
+    grid-row: 1;
+}
+
+.tool-workspace > .tool-center-panel {
+    grid-column: 2;
+    grid-row: 2;
+    min-width: 0;
+}
+
+.tool-workspace > .tool-column:last-of-type {
+    grid-column: 3;
+    grid-row: 1 / span 2;
+}
+
+@media(max-width:980px){
+    .tool-workspace {
+        grid-template-rows: auto;
+    }
+
+    .tool-workspace > .tool-column:first-of-type,
+    .tool-workspace > .tool-display-mode,
+    .tool-workspace > .tool-center-panel,
+    .tool-workspace > .tool-column:last-of-type {
+        grid-column: auto;
+        grid-row: auto;
+    }
+}
+
 .hero-art img {
     width: 100%;
     height: 100%;
@@ -904,13 +953,6 @@ body.tool-focus-mode .tool-display-mode {
     background: rgba(9, 11, 15, .96);
 }
 
-.tool-display-mode .btn,
-#toolFullscreenButton {
-    color: #fff;
-    background: linear-gradient(135deg, #ff7a00, #b83b00);
-    border-color: rgba(255, 200, 87, .65);
-}
-
 /* Fullscreen layout */
 body.tool-focus-mode .site-header,
 body.tool-focus-mode .page-title,
@@ -1009,4 +1051,3 @@ body.tool-focus-mode .tool-column:last-of-type {
         height: auto;
     }
 }
-

GameFoundryStudio/tool1.html

@@ -33,20 +33,15 @@ <h1>Tool 1</h1>
         <div class="container">
             <div class="tool-workspace">
 
-        <details class="accordion tool-display-mode" open>
-            <summary>Tool Display Mode</summary>
-            <div class="accordion-body">
-                <button class="btn primary" type="button" id="toolFullscreenButton">
-                    Enter Fullscreen Tool Mode
-                </button>
-            </div>
-        </details>
-
                 <aside class="tool-column">
                     <div class="tool-column-header"><h2>Left Controls</h2></div>
                     <div class="accordion-stack"><details class="accordion" open><summary>Left Accordion 1</summary><div class="accordion-body">Tool 1 left panel 1. Use this area for controls, options, previews, validation, logs, or tool-specific workflow content.</div></details></div>
                 </aside>
 
+                <details class="accordion tool-display-mode" id="toolDisplayMode" open>
+                    <summary>Tool Display Mode</summary>
+                </details>
+
                 <section class="tool-center-panel">
 <img src="assets/images/forge-bot.png" alt="ForgeBot">
                     <h2>Tool 1 Workspace</h2>
@@ -118,63 +113,5 @@ <h2>Tool 1 Workspace</h2>
 }());
 </script>
 
-<script>
-(function () {
-    const fullscreenButton = document.getElementById("toolFullscreenButton");
-    if (!fullscreenButton) {
-        return;
-    }
-
-    function setButtonText() {
-        fullscreenButton.textContent = document.body.classList.contains("tool-focus-mode")
-            ? "Exit Fullscreen Tool Mode"
-            : "Enter Fullscreen Tool Mode";
-    }
-
-    async function enterToolFullscreen() {
-        document.body.classList.add("tool-focus-mode");
-        setButtonText();
-
-        try {
-            if (!document.fullscreenElement && document.documentElement.requestFullscreen) {
-                await document.documentElement.requestFullscreen();
-            }
-        } catch (error) {
-            console.warn("Fullscreen was blocked by the browser:", error);
-        }
-    }
-
-    async function exitToolFullscreen() {
-        document.body.classList.remove("tool-focus-mode");
-        setButtonText();
-
-        try {
-            if (document.fullscreenElement && document.exitFullscreen) {
-                await document.exitFullscreen();
-            }
-        } catch (error) {
-            console.warn("Exit fullscreen failed:", error);
-        }
-    }
-
-    fullscreenButton.addEventListener("click", function () {
-        if (document.body.classList.contains("tool-focus-mode")) {
-            exitToolFullscreen();
-        } else {
-            enterToolFullscreen();
-        }
-    });
-
-    document.addEventListener("fullscreenchange", function () {
-        if (!document.fullscreenElement) {
-            document.body.classList.remove("tool-focus-mode");
-        }
-        setButtonText();
-    });
-
-    setButtonText();
-})();
-</script>
-
 </body>
 </html>

GameFoundryStudio/tool2.html

@@ -33,20 +33,15 @@ <h1>Tool 2</h1>
         <div class="container">
             <div class="tool-workspace">
 
-        <details class="accordion tool-display-mode" open>
-            <summary>Tool Display Mode</summary>
-            <div class="accordion-body">
-                <button class="btn primary" type="button" id="toolFullscreenButton">
-                    Enter Fullscreen Tool Mode
-                </button>
-            </div>
-        </details>
-
                 <aside class="tool-column">
                     <div class="tool-column-header"><h2>Left Controls</h2></div>
                     <div class="accordion-stack"><details class="accordion" open><summary>Left Accordion 1</summary><div class="accordion-body">Tool 2 left panel 1. Use this area for controls, options, previews, validation, logs, or tool-specific workflow content.</div></details><details class="accordion"><summary>Left Accordion 2</summary><div class="accordion-body">Tool 2 left panel 2. Use this area for controls, options, previews, validation, logs, or tool-specific workflow content.</div></details><details class="accordion"><summary>Left Accordion 3</summary><div class="accordion-body">Tool 2 left panel 3. Use this area for controls, options, previews, validation, logs, or tool-specific workflow content.</div></details></div>
                 </aside>
 
+                <details class="accordion tool-display-mode" id="toolDisplayMode" open>
+                    <summary>Tool Display Mode</summary>
+                </details>
+
                 <section class="tool-center-panel">
 <img src="assets/images/forge-bot.png" alt="ForgeBot">
                     <h2>Tool 2 Workspace</h2>
@@ -118,63 +113,5 @@ <h2>Tool 2 Workspace</h2>
 }());
 </script>
 
-<script>
-(function () {
-    const fullscreenButton = document.getElementById("toolFullscreenButton");
-    if (!fullscreenButton) {
-        return;
-    }
-
-    function setButtonText() {
-        fullscreenButton.textContent = document.body.classList.contains("tool-focus-mode")
-            ? "Exit Fullscreen Tool Mode"
-            : "Enter Fullscreen Tool Mode";
-    }
-
-    async function enterToolFullscreen() {
-        document.body.classList.add("tool-focus-mode");
-        setButtonText();
-
-        try {
-            if (!document.fullscreenElement && document.documentElement.requestFullscreen) {
-                await document.documentElement.requestFullscreen();
-            }
-        } catch (error) {
-            console.warn("Fullscreen was blocked by the browser:", error);
-        }
-    }
-
-    async function exitToolFullscreen() {
-        document.body.classList.remove("tool-focus-mode");
-        setButtonText();
-
-        try {
-            if (document.fullscreenElement && document.exitFullscreen) {
-                await document.exitFullscreen();
-            }
-        } catch (error) {
-            console.warn("Exit fullscreen failed:", error);
-        }
-    }
-
-    fullscreenButton.addEventListener("click", function () {
-        if (document.body.classList.contains("tool-focus-mode")) {
-            exitToolFullscreen();
-        } else {
-            enterToolFullscreen();
-        }
-    });
-
-    document.addEventListener("fullscreenchange", function () {
-        if (!document.fullscreenElement) {
-            document.body.classList.remove("tool-focus-mode");
-        }
-        setButtonText();
-    });
-
-    setButtonText();
-})();
-</script>
-
 </body>
 </html>

GameFoundryStudio/tool3.html

@@ -33,20 +33,15 @@ <h1>Tool 3</h1>
         <div class="container">
             <div class="tool-workspace">
 
-        <details class="accordion tool-display-mode" open>
-            <summary>Tool Display Mode</summary>
-            <div class="accordion-body">
-                <button class="btn primary" type="button" id="toolFullscreenButton">
-                    Enter Fullscreen Tool Mode
-                </button>
-            </div>
-        </details>
-
                 <aside class="tool-column">
                     <div class="tool-column-header"><h2>Left Controls</h2></div>
                     <div class="accordion-stack"><details class="accordion" open><summary>Left Accordion 1</summary><div class="accordion-body">Tool 3 left panel 1. Use this area for controls, options, previews, validation, logs, or tool-specific workflow content.</div></details><details class="accordion"><summary>Left Accordion 2</summary><div class="accordion-body">Tool 3 left panel 2. Use this area for controls, options, previews, validation, logs, or tool-specific workflow content.</div></details><details class="accordion"><summary>Left Accordion 3</summary><div class="accordion-body">Tool 3 left panel 3. Use this area for controls, options, previews, validation, logs, or tool-specific workflow content.</div></details><details class="accordion"><summary>Left Accordion 4</summary><div class="accordion-body">Tool 3 left panel 4. Use this area for controls, options, previews, validation, logs, or tool-specific workflow content.</div></details><details class="accordion"><summary>Left Accordion 5</summary><div class="accordion-body">Tool 3 left panel 5. Use this area for controls, options, previews, validation, logs, or tool-specific workflow content.</div></details></div>
                 </aside>
 
+                <details class="accordion tool-display-mode" id="toolDisplayMode" open>
+                    <summary>Tool Display Mode</summary>
+                </details>
+
                 <section class="tool-center-panel">
 <img src="assets/images/forge-bot.png" alt="ForgeBot">
                     <h2>Tool 3 Workspace</h2>
@@ -118,63 +113,5 @@ <h2>Tool 3 Workspace</h2>
 }());
 </script>
 
-<script>
-(function () {
-    const fullscreenButton = document.getElementById("toolFullscreenButton");
-    if (!fullscreenButton) {
-        return;
-    }
-
-    function setButtonText() {
-        fullscreenButton.textContent = document.body.classList.contains("tool-focus-mode")
-            ? "Exit Fullscreen Tool Mode"
-            : "Enter Fullscreen Tool Mode";
-    }
-
-    async function enterToolFullscreen() {
-        document.body.classList.add("tool-focus-mode");
-        setButtonText();
-
-        try {
-            if (!document.fullscreenElement && document.documentElement.requestFullscreen) {
-                await document.documentElement.requestFullscreen();
-            }
-        } catch (error) {
-            console.warn("Fullscreen was blocked by the browser:", error);
-        }
-    }
-
-    async function exitToolFullscreen() {
-        document.body.classList.remove("tool-focus-mode");
-        setButtonText();
-
-        try {
-            if (document.fullscreenElement && document.exitFullscreen) {
-                await document.exitFullscreen();
-            }
-        } catch (error) {
-            console.warn("Exit fullscreen failed:", error);
-        }
-    }
-
-    fullscreenButton.addEventListener("click", function () {
-        if (document.body.classList.contains("tool-focus-mode")) {
-            exitToolFullscreen();
-        } else {
-            enterToolFullscreen();
-        }
-    });
-
-    document.addEventListener("fullscreenchange", function () {
-        if (!document.fullscreenElement) {
-            document.body.classList.remove("tool-focus-mode");
-        }
-        setButtonText();
-    });
-
-    setButtonText();
-})();
-</script>
-
 </body>
 </html>