diff options
author | Miodec <[email protected]> | 2024-06-17 15:32:24 +0200 |
---|---|---|
committer | Miodec <[email protected]> | 2024-06-17 15:32:24 +0200 |
commit | f4f83cf48970b834b24d3bf86a9db885963e65e6 (patch) | |
tree | da191f6f3295aa8d3c7c63aaf4883142adff5fcf | |
parent | b4ea7f119f5b9ee68f8e3927c64c856e6a6b0361 (diff) | |
download | monkeytype-f4f83cf48970b834b24d3bf86a9db885963e65e6.tar.gz monkeytype-f4f83cf48970b834b24d3bf86a9db885963e65e6.zip |
impr(dev): add button to cycle media query debug from the frontend
!nuf
-rw-r--r-- | frontend/src/html/popups.html | 1 | ||||
-rw-r--r-- | frontend/src/styles/media-queries.scss | 39 | ||||
-rw-r--r-- | frontend/src/ts/modals/dev-options.ts | 17 | ||||
-rw-r--r-- | frontend/src/ts/ui.ts | 12 |
4 files changed, 56 insertions, 13 deletions
diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html index 6b0cdbc3f..67cc9a165 100644 --- a/frontend/src/html/popups.html +++ b/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> diff --git a/frontend/src/styles/media-queries.scss b/frontend/src/styles/media-queries.scss index 407471536..4202df296 100644 --- a/frontend/src/styles/media-queries.scss +++ b/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"; diff --git a/frontend/src/ts/modals/dev-options.ts b/frontend/src/ts/modals/dev-options.ts index da055648e..65166ccf2 100644 --- a/frontend/src/ts/modals/dev-options.ts +++ b/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({ diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts index 651b41181..98ed68613 100644 --- a/frontend/src/ts/ui.ts +++ b/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 = |