From 533fcab652bf0db5d2e5bf3de52f4e47854fd5c5 Mon Sep 17 00:00:00 2001
From: Alexander Brown <DrJKL0424@gmail.com>
Date: Mon, 31 Jul 2023 09:40:03 -0700
Subject: [PATCH] Change "image size" to number of columns

---
 js/imageFeed.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/js/imageFeed.js b/js/imageFeed.js
index ca2728d..4e6a473 100644
--- a/js/imageFeed.js
+++ b/js/imageFeed.js
@@ -161,7 +161,7 @@ $el("style", {
 		justify-content: center;
 		gap: 4px;
 		grid-auto-rows: min-content;
-		grid-template-columns: repeat( auto-fit, minmax(calc(var(--img-sz) * 1%), 1fr));
+		grid-template-columns: repeat(var(--img-sz, 3), 1fr);
 		transition: 100ms linear;
 	}
 	.pysssss-image-feed-list div {
@@ -333,16 +333,17 @@ app.registerExtension({
 								$el("span", { textContent: "Image Size...", }),
 								$el("input", {
 									type: "range",
-									min: 5,
-									max: 51,
+									min: 1,
+									max: 10,
+									step: 1,
 									oninput: (e) => {
-										e.target.parentElement.title = `Controls the maximum size images in the feed (${e.target.value}%)`;
+										e.target.parentElement.title = `Controls the maximum size images in the feed (${e.target.value} columns)`;
 										imageFeed.style.setProperty("--img-sz", e.target.value);
 										saveVal("ImageSize", e.target.value);
 									},
 									$: (el) => {
 										requestAnimationFrame(() => {
-											el.value = getVal("ImageSize", 25);
+											el.value = getVal("ImageSize", 4);
 											el.oninput({ target: el });
 										});
 									},