search

userstyles-world / userstyles.world

⭐ Website to browse and share UserCSS userstyles. A modern replacement for UserStyles.org made by the userstyles community.
https://userstyles.world
GNU Affero General Public License v3.0
326 stars 15 forks source link

Add More Screenshots (and import all of them from USo) #17

Open decembre opened 3 years ago

decembre commented 3 years ago

I think after you finish the import section, you solve that. But if you can adding to the edit page a form which allow more screenshots (with a caption field for each), should be great.

vednoc commented 3 years ago

@Gusted I wonder, can we do this without JS? For the time being, one can put extra screenshots in notes after Markdown is added, as referenced in #16.

Gusted commented 3 years ago

@Gusted I wonder, can we do this without JS?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

Why not :D

Just make sure for some host uploading that we need to configure.

vednoc commented 3 years ago

Why not :D

I meant image carousel. It should be doable, but I'm sure there are tradeoffs.

Also, we should have some kind of limit (max size per image, max images, resolution) as well.

Gusted commented 3 years ago

I meant image carousel. It should be doable, but I'm sure there are tradeoffs.

Why not, just some CSS design for it and server-side very doable.

Gusted commented 3 years ago

https://codepen.io/Schepp/pen/WNbQByE :) seems possible.

vednoc commented 3 years ago

@Gusted The new USo-archive integration can be extended to also unmarshal the []Additional field. I'll have to find some source with two or more images in order to figure out how to loop over available data.

Gusted commented 3 years ago

I'll have to find some source with two or more images in order to figure out how to loop over available data.

https://33kk.github.io/uso-archive/?search=188453&style=188453

image Pretty straight-forward

decembre commented 3 years ago

It seems not all screenshots are imported yet ?

As i can see they are 2 screenshots on USO for: Youtube WideScreen (New Design Polymer) [USO]

And i see only one On my import: Youtube WideScreen (New Design Polymer) [Userstyles World] Same for: Userstyles / Greasy Fork Enhancer Dark-Grey [USO] I don't see all its screenshots (6 images) in the import: Userstyles / Greasy Fork Enhancer Dark-Grey [Userstyles World]

If All screenshots should be imported easily: Yes, it really need an carousel for them.

Other idea put them or the only one on the left side on a fixed position, And give them a max-size (smaller than yet) and Maximize if need on hover or click. You can give a limited height to this Screenshot panel (with overflow: hidden and overfow-y: auto). Should be interesting: Like that we can scroll them to verify one thing explained in the Notes. So divide the screen whit a right place for screenshot(s), And Title, Description, Notes on the left side.

Others things about screenshots inside the Notes section: They are too big. For them too: Give to them a max-size (smaller than yet) and Maximize if need on hover or click.

vednoc commented 3 years ago

It seems not all screenshots are imported yet ?

Correct. We have yet to implement front- and back-end side of things for importing additional screenshots.

Give to them a max-size (smaller than yet) and Maximize if need on hover or click.

Yeah, thought about setting the max-width to 50%. Just like we reduced the size of h1, h2, and h3 headings.