More improvements on style of draw widget.

inventory/static/css/components/draw.css

@@ -3,13 +3,55 @@
 }
 
 .grid-widget {
+    container-type: inline-size;
+    min-width: 375px;
+}
+
+.grid-widget [data-toolbar].toolbar {
+    display: grid !important;
+    grid-template-rows: auto auto;
+    align-content: start;
+    gap: .5rem;
+    overflow: visible;
+}
+
+.grid-widget [data-toolbar] .toolbar-row {
     display: flex;
-    flex-direction: column;
+    align-items: center;
-    height: 100%;
+    gap: .5rem;
     min-width: 0;
-    min-height: 0;
+    flex-wrap: nowrap;
-    position: relative;
+}
-    isolation: isolate;
+
+.grid-widget [data-toolbar] .toolbar-row--primary,
+.grid-widget [data-toolbar] .toolbar-row--secondary {
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.grid-widget [data-toolbar] .toolbar-row--secondary {
+    opacity: .95;
+}
+
+/* WIDE: 1 row */
+@container (min-width: 725px){
+  .grid-widget [data-toolbar].toolbar{
+    display: flex !important;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: .5rem;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .grid-widget [data-toolbar] .toolbar-row{
+    display: contents;
+  }
+
+  .grid-widget [data-toolbar] .toolbar-row--primary,
+  .grid-widget [data-toolbar] .toolbar-row--secondary{
+    overflow: visible;
+  }
 }
 
 .grid-widget .grid-wrap {
@@ -54,45 +96,12 @@
     inset: 0;
 }
 
-.grid-widget [data-toolbar] {
-    flex: 0 0 auto;
-    width: min(100%, var(--grid-maxw, 100%));
-    box-sizing: border-box;
-    margin: 0 auto;
-    max-width: 100%;
-    position: relative;
-    z-index: 10;
-    overflow: visible;
-}
-
 .grid-widget [data-dot] {
     transform: translate(-50%, -50%);
     z-index: 2;
     pointer-events: none;
 }
 
-.grid-widget .toolbar {
-    display: grid;
-    gap: .5rem;
-}
-
-.grid-widget .toolbar-row {
-    display: flex;
-    align-items: center;
-    gap: .5rem;
-    min-width: 0;
-    flex-wrap: nowrap;
-}
-
-.toolbar-row--primary {
-    overflow-x: auto;
-}
-
-.toolbar-row--secondary {
-    overflow-x: auto;
-    opacity: .95;
-}
-
 .grid-widget .toolbar-range {
     width: 120px;
     margin: 0;

inventory/static/js/components/draw.js

@@ -42,7 +42,7 @@ function initGridWidget(root, opts = {}) {
     if (cellSizeEl && cellSizeValEl) bindRangeWithLabel(cellSizeEl, cellSizeValEl, v => `${v}px`);
     if (fillOpacityEl && fillValEl) bindRangeWithLabel(fillOpacityEl, fillValEl, v => `${parseInt(Number(v) * 100)}%`);
     if (strokeOpacityEl && strokeValEl) bindRangeWithLabel(strokeOpacityEl, strokeValEl, v => `${parseInt(Number(v) * 100)}%`);
-    if (strokeWidthEl && widthValEl) bindRangeWithLabel(strokeWidthEl, widthValEl, v => `${parseInt(Number(v) * cellSizeEl.value)}p×`);
+    if (strokeWidthEl && widthValEl) bindRangeWithLabel(strokeWidthEl, widthValEl, v => `${Math.round(Number(v) * Number(cellSizeEl.value || 0))}px`);
 
     const storageKey = opts.storageKey ?? 'gridDoc';
 

inventory/templates/components/draw.html

@@ -160,7 +160,7 @@
                             <path
                                 d="M4 2v2H2V2zm1 12v-2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m5 10v-2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V7a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1M9 2v2H7V2zm5 0v2h-2V2zM4 7v2H2V7zm5 0v2H7V7zm5 0h-2v2h2zM4 12v2H2v-2zm5 0v2H7v-2zm5 0v2h-2v-2zM12 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm-1 6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm1 4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z" />
                         </svg>
-                        <small>25px</small>
+                        <small data-cell-size-val>25px</small>
                     </button>
                     <ul class="dropdown-menu p-2">
                         <li>
@@ -178,7 +178,7 @@
                             <path
                                 d="M8 16a6 6 0 0 0 6-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 0 0 6 6M6.646 4.646l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448c.82-1.641 1.717-2.753 2.093-3.13" />
                         </svg>
-                        <small>100%</small>
+                        <small data-fill-opacity-val>100%</small>
                     </button>
                     <ul class="dropdown-menu p-2">
                         <li>
@@ -196,7 +196,7 @@
                             <path
                                 d="M2.5 0q-.25 0-.487.048l.194.98A1.5 1.5 0 0 1 2.5 1h.458V0zm2.292 0h-.917v1h.917zm1.833 0h-.917v1h.917zm1.833 0h-.916v1h.916zm1.834 0h-.917v1h.917zm1.833 0h-.917v1h.917zM13.5 0h-.458v1h.458q.151 0 .293.029l.194-.981A2.5 2.5 0 0 0 13.5 0m2.079 1.11a2.5 2.5 0 0 0-.69-.689l-.556.831q.248.167.415.415l.83-.556zM1.11.421a2.5 2.5 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415zM16 2.5q0-.25-.048-.487l-.98.194q.027.141.028.293v.458h1zM.048 2.013A2.5 2.5 0 0 0 0 2.5v.458h1V2.5q0-.151.029-.293zM0 3.875v.917h1v-.917zm16 .917v-.917h-1v.917zM0 5.708v.917h1v-.917zm16 .917v-.917h-1v.917zM0 7.542v.916h1v-.916zm15 .916h1v-.916h-1zM0 9.375v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .916v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .917v.458q0 .25.048.487l.98-.194A1.5 1.5 0 0 1 1 13.5v-.458zm16 .458v-.458h-1v.458q0 .151-.029.293l.981.194Q16 13.75 16 13.5M.421 14.89c.183.272.417.506.69.689l.556-.831a1.5 1.5 0 0 1-.415-.415zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373Q2.25 16 2.5 16h.458v-1H2.5q-.151 0-.293-.029zM13.5 16q.25 0 .487-.048l-.194-.98A1.5 1.5 0 0 1 13.5 15h-.458v1zm-9.625 0h.917v-1h-.917zm1.833 0h.917v-1h-.917zm1.834 0h.916v-1h-.916zm1.833 0h.917v-1h-.917zm1.833 0h.917v-1h-.917zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
                         </svg>
-                        <small>100%</small>
+                        <small data-stroke-opacity-val>100%</small>
                     </button>
                     <ul class="dropdown-menu p-2">
                         <li>
@@ -215,7 +215,7 @@
                             <rect x="2" y="7" width="12" height="2" rx="1"></rect>
                             <rect x="2" y="12" width="12" height="3" rx="1.5"></rect>
                         </svg>
-                        <small>12%</small>
+                        <small data-stroke-width-val>12%</small>
                     </button>
                     <ul class="dropdown-menu p-2">
                         <li>

inventory/templates/testing.html

@@ -8,7 +8,7 @@
 
 {% block main %}
     <div class="row">
-        <div class="col">
+        <div class="col" style="min-height: 80vh;">
             {{ draw.drawWidget('test1') }}
         </div>
         <div class="col">