impr(dev): add button to cycle media query debug from the frontend

!nuf

Author: Miodec

frontend/src/html/popups.html

@@ -8,6 +8,7 @@
   <div class="modal">
     <div class="title">Dev options</div>
     <button class="generateData">generate data</button>
+    <button class="toggleMediaQueryDebug">toggle media query debug</button>
   </div>
 </dialog>
 

frontend/src/styles/media-queries.scss

@@ -16,19 +16,32 @@
   display: none;
 }
 
-// uncomment to debug media queries
-
-// #mediaQueryDebug {
-//   display: block;
-// }
-
-// .content-grid > * {
-//   border: 0.1rem dashed var(--sub-color);
-// }
-
-// .content-grid {
-//   border: 0.1rem dashed var(--main-color);
-// }
+body {
+  &.mediaQueryDebugLevel1 {
+    #mediaQueryDebug {
+      display: block;
+    }
+  }
+  &.mediaQueryDebugLevel2 {
+    #mediaQueryDebug {
+      display: block;
+    }
+    .content-grid {
+      border: 0.1rem dashed var(--main-color);
+    }
+  }
+  &.mediaQueryDebugLevel3 {
+    #mediaQueryDebug {
+      display: block;
+    }
+    .content-grid > * {
+      border: 0.1rem dashed var(--sub-color);
+    }
+    .content-grid {
+      border: 0.1rem dashed var(--main-color);
+    }
+  }
+}
 
 //media queries based on tailwind breakpoints https://tailwindcss.com/docs/container
 @import "media-queries-orange";

frontend/src/ts/modals/dev-options.ts

@@ -1,6 +1,10 @@
 import { envConfig } from "../constants/env-config";
 import AnimatedModal from "../utils/animated-modal";
 import { showPopup } from "./simple-modals";
+import * as Notifications from "../elements/notifications";
+import { setMediaQueryDebugLevel } from "../ui";
+
+let mediaQueryDebugLevel = 0;
 
 export function show(): void {
   void modal.show();
@@ -10,6 +14,19 @@ async function setup(modalEl: HTMLElement): Promise<void> {
   modalEl.querySelector(".generateData")?.addEventListener("click", () => {
     showPopup("devGenerateData");
   });
+  modalEl
+    .querySelector(".toggleMediaQueryDebug")
+    ?.addEventListener("click", () => {
+      mediaQueryDebugLevel++;
+      if (mediaQueryDebugLevel > 3) {
+        mediaQueryDebugLevel = 0;
+      }
+      Notifications.add(
+        `Setting media query debug level to ${mediaQueryDebugLevel}`,
+        5
+      );
+      setMediaQueryDebugLevel(mediaQueryDebugLevel);
+    });
 }
 
 const modal = new AnimatedModal({

frontend/src/ts/ui.ts

@@ -25,6 +25,18 @@ export function clearFontPreview(): void {
   isPreviewingFont = false;
 }
 
+export function setMediaQueryDebugLevel(level: number): void {
+  const body = document.querySelector("body") as HTMLElement;
+
+  body.classList.remove("mediaQueryDebugLevel1");
+  body.classList.remove("mediaQueryDebugLevel2");
+  body.classList.remove("mediaQueryDebugLevel3");
+
+  if (level > 0 && level < 4) {
+    body.classList.add(`mediaQueryDebugLevel${level}`);
+  }
+}
+
 function updateKeytips(): void {
   const userAgent = window.navigator.userAgent.toLowerCase();
   const modifierKey =