search

drawshield / Drawshield-Code

PHP code to create SVG shield images from Blazons, as used on drawshield.net
https://drawshield.net
GNU General Public License v3.0
50 stars 17 forks source link

Since very recently, the shield is too much bigger #653

Closed 5ucur closed 9 months ago

5ucur commented 12 months ago

Since very recently, maybe today or yesterday, the shield is much wider than usual (almost the blazon textbox width), and only about half of it height-wise can be seen without scrolling down. Tested with Firefox 116.0.2 and Brave 1.51.118, on both a 5:4 and a 16:10 monitor, using Linux.

The shield can be zoomed out completely, and then it can be nearly fully seen with the blazon textbox still visible above (i.e. no scrolling necessary, at least with short blazons). Alternatively, I can zoom out the whole page with the browser zoom, but then all the text on the page is too tiny.

On mobile it's alright¹. When "request desktop site" is enabled, though, it does the same as described above (Android 8, Chrome).

¹ Possibly, the regular mobile site does do the same thing - but with the screen being vertical, the effect is probably just not as noticeable. I've also tested with the wide monitor in vertical position; the shield's increased size is still noticeable but it's not as problematic - like the phone.

karlwilcox commented 12 months ago

Thanks for your comment - this is an attempt to make better use of space - the shield is now drawn based on the width of the available space (up to a maximum of about 800 pixels wide) and gets correspondingly longer - this following a discussion on the support Discord server. On larger screens this works well.

If the sizing is a problem you can now use the zoom tools on the shield image itself to zoom out which should get you back to the original size, or even smaller if you want but that needs to be done each time.(You don't have to zoom the whole web page, you can just zoom the shield image using the '+' and '-' icons in its lower right).

What I could do is add a "zoom level" setting to the preferences (e.g 0.8 would make the shield around its original size, and I could also pan it up so it is just below the blazon). I don't really want to revert the change because in most cases it does make much better use of the available space, but I appreciate that on smaller displays there may be a need for additional options.

What do folks think?

5ucur commented 12 months ago

On larger screens this works well.

How large? My screens are 1280x1024 and 1440x900.

You don't have to zoom the whole web page, you can just zoom the shield image using the '+' and '-' icons in its lower right

Yes, I mentioned both zooms in my previous post, but I'm not actually sure why I even mentioned the page zoom.

[...] add a "zoom level" setting [...] don't really want to revert the change [...]

I think the zoom level setting would be wonderful, if it could be made. And I'm all up for keeping the change - as you said, it makes better use of the space, and it does more good than harm (the zoom functionality makes it a non-issue for me). The reason I reported this in the first place, is in case it was an unintended effect.

karlwilcox commented 12 months ago

I've added a new option to the preferences panel "Start zoom at" - values below 1.0 (down to 0.6) zoom out and move the shield up a bit as well, so some thing like a value of 0.8 gives you the original size and position, more or less.

Hope this helps! I'm rather spoilt on the system I use for development, I have a mac mini attached to an Apple studio display at 3840 x 2160px so I don't spot problems like this, sorry!

5ucur commented 12 months ago

The option that I previously didn't understand - "Show SVG zoom" - and which I kept off, is now required for the "Start zoom at" option to work. If the values are limited to 0.6-1.0, maybe put a slider instead of a textbox? Though maybe it's more accessible on some systems (mobile for example) to keep it a textbox.

karlwilcox commented 12 months ago

On reflection that was a dumb name! I'll think of something better... And thanks for the suggestion - the page uses Bootstrap 4 so I'll have a look at the range slider for that.

5ucur commented 11 months ago

I saw the slider, and it also includes the textbox still, very nice! As far as I care, the issue is solved. Maybe a little suggestion would be to make the textbox update dynamically as the slider is slid? It'd be easier to tell where it's set to without releasing it all the time.

karlwilcox commented 11 months ago

Ah, apparently I should have used 'oninput' rather than 'onchange'. I'll fix that and then close this issue. Thanks for raising it, it has triggered a complete update of the preferences pane which I'm really pleased with!