Description
The recent MDN redesign has reduced the width available for the Border-image Generator. As an example there is now only room for 2 boxes dedicated to each individual property per grid line instead of the old design that had room to show 3. This makes the page a bit longer and therefore slightly harder to use. Have had some thoughts about changes to help with this:
-
the image selection options at the top (including the UI to upload your own image) seem like they should be in a box similar to all the others titled "border-image-source". Would take up less room and have a more consistent UI. This might need to be 2 grid spots.
-
I'm not entirely sure I understand the point of the area labeled "control box". It's marking a fixed height for the area below it but I don't think it's really necessary. Will explain more in up coming points
-
the visual
border-image-sliceUI is very nice but it seems like it should just go in the "border-image-slice" titled box with the otherborder-image-slicecontrols. This might also then need to be 2 grid spots. -
All that would leave in the "control box" area is the current drag-able preview element (which by the way is always drag-able even if the drag-able toggle is off) with the live border-image. Maybe we just add the
border-imagecode to each of the individual "border-image-" property boxes so that a preview of the resultingborder-imageis always on screen? A side benefit of this is seeing the border-image on 2 different sized elements (one gird space wide and 2 grid spaces wide). -
Dev tools is calling out the heading text color contrast on the individual "border-image-x" properties for not meeting the AA standard. So that should get fixed as well.
Any other thoughts on the UI?