Open Q1WP opened 1 year ago
Visually, I prefer the fixed width buttons in a grid. But, this does let you use longer names. My intent was that the user would be forced to used names that fit like. Rot Laser
instead of Rotary Laser
.
Another idea is to scale the text automatically to fit. I wasn't sure if this was possible at first but there is a way using SVG. We would go back to the grid and replace the text in the button with something like this:
<svg viewBox="0 0 56 18">
<text x="0" y="15">Rotary Laser</text>
</svg>
Actually we would need to change a line in vue-control.pug
from:
| {{macro.name || ($index + 1)}}
To:
svg(viewBox="0 0 56 18")
text(x="0" y="15") {{macro.name || ($index + 1)}}
I'm not sure what the numbers above should be. 56
is the button width in SVG space and 18
is it's height. 15
is the vertical offset of the text with in the SVG. In theory, it should automatically scale with the text size. It might be necessary to add something like this to the style:
.macros svg
width 100%
The hope would be that the font just shrinks as the text gets longer but the button stays the same size. Totally untested though.
I'm not really a fan of different size text on a page as the text is the focal point and provides relative info to the user. I understand the uniformity of button sizes, but being a production user, functionality and ease of use is priority to me. Obviously this is your project to choose which direction to go, but I definitely can't help with the css/svg setup, as that is way over my head.
What about this version?
It leaves the overflow hidden and sets a button width.
Desktop view:![desktop-view](https://user-images.githubusercontent.com/7306696/213072455-b55914b5-7938-413b-b5e3-9aa82baa1249.jpg)
Mobile view:![phone-view](https://user-images.githubusercontent.com/7306696/213072465-6f4a0a08-feb3-4e4f-8b30-6b4292f3fe29.jpg)