From 4fa312c19ba8adcfaf099f2a2716b106a6063c08 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Sun, 10 Oct 2021 14:21:18 +1100
Subject: [PATCH] tweak: responsive columns breakpoint (%)

---
 repo/menu/components.mjs |  4 ++--
 repo/menu/menu.mjs       | 18 +++++++++---------
 repo/tweaks/client.mjs   | 10 ++++++++--
 repo/tweaks/mod.json     |  9 ++++++++-
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/repo/menu/components.mjs b/repo/menu/components.mjs
index 64a2305..5bb4130 100644
--- a/repo/menu/components.mjs
+++ b/repo/menu/components.mjs
@@ -10,7 +10,7 @@ import { fmt, web, registry, components } from '../../api/_.mjs';
 import { notifications } from './launcher.mjs';
 const profileDB = await registry.profileDB();
 
-export const cards = {
+export const modComponents = {
   preview: (url) => web.html`<img
     class="mod-preview"
     src="${web.escape(url)}"
@@ -57,7 +57,7 @@ export const cards = {
 export const options = {
   toggle: async (mod, opt) => {
     const checked = await profileDB.get([mod.id, opt.key], opt.value),
-      $toggle = blocks.toggle(opt.label, checked),
+      $toggle = modComponents.toggle(opt.label, checked),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = $toggle.children[0],
       $input = $toggle.children[1];
diff --git a/repo/menu/menu.mjs b/repo/menu/menu.mjs
index 4dc1499..4a90499 100644
--- a/repo/menu/menu.mjs
+++ b/repo/menu/menu.mjs
@@ -11,7 +11,7 @@ import './styles.mjs';
 
 import { env, fs, storage, registry, web, components } from '../../api/_.mjs';
 import { notifications } from './launcher.mjs';
-import { cards, options } from './components.mjs';
+import { modComponents, options } from './components.mjs';
 
 const db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'),
   profileName = await registry.profileName(),
@@ -200,7 +200,7 @@ const _$modListCache = {},
     },
     mod: async (mod) => {
       const $mod = web.html`<div class="mod" data-id="${web.escape(mod.id)}"></div>`,
-        $toggle = cards.toggle('', await registry.enabled(mod.id));
+        $toggle = modComponents.toggle('', await registry.enabled(mod.id));
       $toggle.addEventListener('change', async (event) => {
         if (event.target.checked && mod.tags.includes('theme')) {
           const mode = mod.tags.includes('light') ? 'light' : 'dark',
@@ -229,8 +229,8 @@ const _$modListCache = {},
         }
         $mod.className = 'mod-selected';
         const fragment = [
-          web.render(cards.title(mod.name), cards.version(mod.version)),
-          cards.tags(mod.tags),
+          web.render(modComponents.title(mod.name), modComponents.version(mod.version)),
+          modComponents.tags(mod.tags),
           await generators.options(mod),
         ];
         web.render(web.empty($options), ...fragment);
@@ -240,7 +240,7 @@ const _$modListCache = {},
         web.render(
           $mod,
           mod.preview
-            ? cards.preview(
+            ? modComponents.preview(
                 mod.preview.startsWith('http')
                   ? mod.preview
                   : fs.localPath(`repo/${mod._dir}/${mod.preview}`)
@@ -248,10 +248,10 @@ const _$modListCache = {},
             : '',
           web.render(
             web.html`<div class="mod-body"></div>`,
-            web.render(cards.title(mod.name), cards.version(mod.version)),
-            cards.tags(mod.tags),
-            cards.description(mod.description),
-            cards.authors(mod.authors),
+            web.render(modComponents.title(mod.name), modComponents.version(mod.version)),
+            modComponents.tags(mod.tags),
+            modComponents.description(mod.description),
+            modComponents.authors(mod.authors),
             mod.environments.includes(env.name) && !registry.core.includes(mod.id)
               ? $toggle
               : ''
diff --git a/repo/tweaks/client.mjs b/repo/tweaks/client.mjs
index f8a83c6..a319366 100644
--- a/repo/tweaks/client.mjs
+++ b/repo/tweaks/client.mjs
@@ -16,10 +16,16 @@ export default async function (api, db) {
     );
   }
 
-  const responsiveBreakpoint = await db.get(['tweak.responsive_breakpoint']),
+  const responsiveBreakpointPx = await db.get(['tweak.responsive_breakpoint_px']),
+    responsiveBreakpointPercent =
+      screen.width * 0.01 * (await db.get(['tweak.responsive_breakpoint_percent'])),
     addResponsiveBreakpoint = () => {
       document.body.classList.remove('enhancer--tweak-responsive_breakpoint');
-      if (window.innerWidth <= responsiveBreakpoint) {
+      console.log(responsiveBreakpointPercent, window.innerWidth);
+      if (
+        window.innerWidth <= responsiveBreakpointPx ||
+        window.innerWidth <= responsiveBreakpointPercent
+      ) {
         document.body.classList.add('enhancer--tweak-responsive_breakpoint');
       }
     };
diff --git a/repo/tweaks/mod.json b/repo/tweaks/mod.json
index 8b2a0d3..4fd30be 100644
--- a/repo/tweaks/mod.json
+++ b/repo/tweaks/mod.json
@@ -28,11 +28,18 @@
     },
     {
       "type": "number",
-      "key": "tweak.responsive_breakpoint",
+      "key": "tweak.responsive_breakpoint_px",
       "label": "responsive columns breakpoint (px)",
       "tooltip": "the **width in pixels below which in-page columns are resized** to appear full-width to reduce content squishing",
       "value": 600
     },
+    {
+      "type": "number",
+      "key": "tweak.responsive_breakpoint_percent",
+      "label": "responsive columns breakpoint (%)",
+      "tooltip": "the **percentage of the screen below which in-page columns are resized to appear full-width** to reduce content squishing",
+      "value": 30
+    },
     {
       "type": "toggle",
       "key": "tweak.normalise_table_scroll",