js: Add an SVG resize handle to the HTML

This is more compact than carefully drawing it on a canvas in
JavaScript.  More importantly, the SVG resize handle scales nicely as
the page is zoomed, or on high-DPI screens.

At the moment, the nice SVG resize handle is removed by JavaScript,
but we need to wait a little while for everyone to get the new HTML
cached before changing that.
This commit is contained in:
Ben Harris
2022-11-29 23:40:04 +00:00
parent 66a927920a
commit acd1f45152

View File

@ -357,6 +357,9 @@ ${unfinishedpara}
<div id="resizable"> <div id="resizable">
<canvas id="puzzlecanvas" tabindex="0"></canvas> <canvas id="puzzlecanvas" tabindex="0"></canvas>
<div id="statusbar"></div> <div id="statusbar"></div>
<img id="resizehandle" alt="resize"
title="Drag to resize the puzzle. Right-click to restore the default size."
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Cpath%20d='M8.5,1.5l-7,7m7,-4l-4,4m4,-1l-1,1'%20stroke='black'%20stroke-linecap='round'/%3E%3C/svg%3E">
</div> </div>
<p> <p>
Link to this puzzle: Link to this puzzle: