Change "image size" to number of columns

This commit is contained in:
Alexander Brown
2023-07-31 09:40:03 -07:00
parent 81af1e3155
commit 533fcab652
+6 -5
View File
@@ -161,7 +161,7 @@ $el("style", {
justify-content: center; justify-content: center;
gap: 4px; gap: 4px;
grid-auto-rows: min-content; 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; transition: 100ms linear;
} }
.pysssss-image-feed-list div { .pysssss-image-feed-list div {
@@ -333,16 +333,17 @@ app.registerExtension({
$el("span", { textContent: "Image Size...", }), $el("span", { textContent: "Image Size...", }),
$el("input", { $el("input", {
type: "range", type: "range",
min: 5, min: 1,
max: 51, max: 10,
step: 1,
oninput: (e) => { 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); imageFeed.style.setProperty("--img-sz", e.target.value);
saveVal("ImageSize", e.target.value); saveVal("ImageSize", e.target.value);
}, },
$: (el) => { $: (el) => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
el.value = getVal("ImageSize", 25); el.value = getVal("ImageSize", 4);
el.oninput({ target: el }); el.oninput({ target: el });
}); });
}, },