The list content to move as it's being scrolled down.

[ghost]

Hello there, it is currently an issue that when you add more than a few rows to the list, it becomes hard to add stuff as you have to go all the way to the top in order to select your image and move it down. It would be pretty good if the left images box had a size limit, and could be scrolled up and down in order to view other images. It would also be pretty good if the box would move as it's being scrolled up and down.

[antler5]

Sorry for the force pushes!
Don't think I caught what you meant, about the box moving as it's being scrolled?

Edit: ah, ya mean with the tools anchored to the right, like a dock?

[ghost]

Exactly, so we don't have to scroll all the way to the top to get an image and move it all the way to the bottom.

I made this small concept so hope it helps!

[antler5]

Alright, so in 411f08a I just made the tier-list a big scroll-able box, such that you don't scroll the main page. This anchors the title too, which I don't think we want.

In d4ec2e5 I tried making the controls sticky and the images-box scroll-able instead, but never got the trash anchored to the bottom right of the screen how I wanted (could probably have put in the images-box corner as depicted).

I currently favor the first approach because it was much simpler, but the issue with each is that they both break the flex-grow behavior that lines the images-box up with the size of the tier list. This makes sense, are we are decoupling them by the time the tier-list grows off-screen, but I'd prefer to keep the existing behavior until the limits are reached... don't know that that's possible through CSS, but I'll give it another look later.

[ghost]

Both 411f08a and d4ec2e5 are actually great candidates for this issue i think, at least in their current forms they're usable. I think if 411f08a had a screenshot mode of some sorts where you could see the whole list at once, it is a perfect solution, making it easier to navigate and make the actual list.

[silverweed]

I think making the tier list a scroll box is my preferred solution, but I'm open to whatever works best. Thanks for the help ✌🏻

[antler5]

So ^that's how I'd impliment a toggle for it, just needs an image for the button, and the box of images should still be updated to scroll. This makes the parent viewport static (ie. no element expands the page when overflowing, unless someone puts in a really long title?). Still considering the flex-grow behavior, which I liked and which might still work; Kinda liked the thick scroll bar in the mock-up too (thanks for that!), but that'd be a seperate issue.

[antler5]

they both break the flex-grow behavior that lines the images-box up with the size of the tier list

Still considering the flex-grow behavior, which I liked and which might still work

don't know that that's possible through CSS

lol

-       height: 80vh;
+       max-height: 80vh;

---

the box of images should still be updated to scroll

Non-issue, works like that already

[antler5]

• position: absolute Trash into the lower right so that it floats when overflow is enabled?
• slapped some MIT icons on that toggle, is that alright / TODO: add attribution license / where are the rest from? Are they custom?
• To self: Could use path.CLASS instead of svg:nth-child() selectors for cleaner CSS and just one SVG element
• Is screenshot-mode a clear enough name for what that button does? (Could just as well be print-mode.)
• ...wouldn't need a toggle at all if we revisited the sticky command pallet, "print" (eg. to PDF) would just work (tbf, there are probably ways to both hide the buttons and auto-expand the scrollbox overflow in print layouts, but the former would make the sticky layout pretty slick).