Change "image size" to number of columns
This commit is contained in:
+6
-5
@@ -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 });
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user