No pallete when the play-only-mode is triggered

Signed-off-by: Justin Charles <[email protected]>
sugarlabs · Jan 29, 2025 · 5ede517 · 5ede517
1 parent d08f4b9
commit 5ede517
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/css/activities.css b/css/activities.css
@@ -12,6 +12,8 @@
 }
 */
 
+@import url("play-only-mode.css");
+
 *:focus {
   outline: none;
 }

diff --git a/css/play-only-mode.css b/css/play-only-mode.css
@@ -0,0 +1,36 @@
+.play-only #palette {
+    display: none !important; 
+    visibility: hidden !important; 
+    height: 0 !important; 
+    width: 0 !important; 
+    pointer-events: none !important; 
+    overflow: hidden !important;
+}   
+
+.play-only #Grid {
+    display: none !important; 
+    visibility: hidden !important; 
+    height: 0 !important; 
+    width: 0 !important; 
+    pointer-events: none !important; 
+    overflow: hidden !important; 
+}
+
+.play-only #Clear {
+    display: none !important; 
+    visibility: hidden !important; 
+    height: 0 !important; 
+    width: 0 !important; 
+    pointer-events: none !important; 
+    overflow: hidden !important; 
+}
+
+.play-only #Collapse {
+    display: none !important; 
+    visibility: hidden !important; 
+    height: 0 !important; 
+    width: 0 !important; 
+    pointer-events: none !important; 
+    overflow: hidden !important;
+}
+
diff --git a/index.html b/index.html
@@ -973,6 +973,21 @@
           </script>
         </div>
         </div>
+        <script>
+            function togglePlayOnlyMode() {
+                const isSmallScreen =
+                    window.innerWidth < 768 || window.innerHeight < 600;
+                const body = document.body;
+                if (isSmallScreen) {
+                    body.classList.add("play-only");
+                } else {
+                    body.classList.remove("play-only");
+                }
+            }
+            togglePlayOnlyMode();
+            window.addEventListener("resize", togglePlayOnlyMode);
+        </script>
+
         <div id="searchBar" tabindex="-1">
             <input
                 type="text"
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,8 @@ @@
     }
     */
+    @import url("play-only-mode.css");
     *:focus {
       outline: none;
     }
@@ Expand Down @@