Use template for image entry

css/style.css

@@ -469,6 +469,7 @@ code {
   font-size: var(--font-size);
   line-height: 1.5em;
   margin: var(--space-1) 0;
+  font-style: italic;
 }
 
 #glyph-name-note {
@@ -686,6 +687,8 @@ input[type="file"]::file-selector-button {
 /* ---- File info / size list ---- */
 
 .file-input-entry {
+  border: 1px solid var(--border-subtle);
+  padding: var(--space-1);
   display: flex;
   align-items: center;
   gap: var(--space-2);
@@ -700,17 +703,17 @@ input[type="file"]::file-selector-button {
 .file-info {
   color: var(--text-muted);
   font-size: 12px;
-  margin-left: var(--space-5);
-  max-width: 320px;
-  white-space: pre;
 }
 
 .file-name {
-  display: block;
-  margin-left: 0;
-  margin-bottom: var(--space-2);
+  flex: 1;
+  min-width: 0;
+  margin: 0;
   font-weight: 500;
   color: var(--on-surface-variant);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Tighten gap between a row and the explanatory note row that follows */
@@ -724,19 +727,25 @@ input[type="file"]::file-selector-button {
 
 #image-size-settings li {
   display: flex;
-  align-items: flex-start;
-  gap: var(--space-3);
+  flex-direction: column;
+  gap: var(--space-2);
   margin: var(--space-2) 0;
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-lg);
   padding: var(--space-2) var(--space-3);
 }
 
+.image-size-thumb-container {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
 .image-size-thumb {
   width: auto;
   height: auto;
-  max-width: 100px;
-  max-height: 100px;
+  max-width: 48px;
+  max-height: 48px;
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-md, 4px);
   background: var(--surface-variant, #fff);
@@ -744,9 +753,14 @@ input[type="file"]::file-selector-button {
   vertical-align: middle;
 }
 
-.image-size-details {
-  flex: 1;
-  min-width: 0;
+.image-size-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.image-size-header {
+  justify-content: space-between;
 }
 
 /* ---- Preview canvases ---- */

index.html

@@ -93,6 +93,24 @@
             </div>
             <div class="table-cell">
               <ul id="image-size-settings"></ul>
+              <template id="image-size-entry-template">
+                <li>
+                  <div class="image-size-row image-size-header">
+                    <img class="image-size-thumb" alt="" />
+                    <span class="file-info file-name js-file-name"></span>
+                    <button type="button" class="remove-button js-remove">remove image</button>
+                  </div>
+                  <div class="image-size-row">
+                    <input type="number" min="1" class="size-input js-width" name="width" />
+                    <span>x</span>
+                    <input type="number" min="1" class="size-input js-height" name="height" />
+                  </div>
+                  <div class="image-size-row">
+                    <span class="file-info">glyph name</span>
+                    <input type="text" class="glyph-input js-glyph" name="glyph" />
+                  </div>
+                </li>
+              </template>
               <div id="only-images-file-error" class="msg error-msg">Only images file type are allowed</div>
               <div class="no-file-selected msg">Select one or more images at <a href="#step-1">step 1</a> first.</div>
               <button id="all-same-size" onclick="allSameSize()">Apply first image size to all images</button>

js/script.js

@@ -813,20 +813,16 @@ function handleImageSelection(evt) {
 
         const canvas = document.createElement('canvas');
 
-        const imageEntry = document.createElement('li');
+        const entryTemplate = document.getElementById('image-size-entry-template');
+        const entryFragment = entryTemplate.content.cloneNode(true);
+        const imageEntry = entryFragment.querySelector('li');
         imageEntry.setAttribute('data-img', file.name);
 
-        const thumb = document.createElement('img');
-        thumb.className = 'image-size-thumb';
+        const thumb = imageEntry.querySelector('.image-size-thumb');
         thumb.src = img.src;
         thumb.alt = file.name;
 
-        const w = document.createElement('input');
-        w.type = 'number';
-        w.name = 'width';
-        w.id = 'screenWidth';
-        w.min = 1;
-        w.className = 'size-input';
+        const w = imageEntry.querySelector('.js-width');
         w.value = img.width;
         w.oninput = () => {
           const image = images.get(img);
@@ -834,12 +830,7 @@ function handleImageSelection(evt) {
           placeImage(image);
         };
 
-        const h = document.createElement('input');
-        h.type = 'number';
-        h.name = 'height';
-        h.id = 'screenHeight';
-        h.min = 1;
-        h.className = 'size-input';
+        const h = imageEntry.querySelector('.js-height');
         h.value = img.height;
         h.oninput = () => {
           const image = images.get(img);
@@ -847,14 +838,7 @@ function handleImageSelection(evt) {
           placeImage(image);
         };
 
-        const gil = document.createElement('span');
-        gil.innerHTML = 'glyph name';
-        gil.className = 'file-info';
-
-        const gi = document.createElement('input');
-        gi.type = 'text';
-        gi.name = 'glyph';
-        gi.className = 'glyph-input';
+        const gi = imageEntry.querySelector('.js-glyph');
         const [fileName] = file.name.split('.');
         gi.value = fileName;
         gi.onchange = () => {
@@ -887,16 +871,8 @@ function handleImageSelection(evt) {
           checkImagesAvailable();
         };
 
-        const rb = document.createElement('button');
-        rb.className = 'remove-button';
-        rb.innerHTML = 'remove image';
-        rb.onclick = removeButtonOnClick;
-
-        const fn = document.createElement('span');
-        fn.className = 'file-info file-name';
-        fn.innerHTML = `${file.name} (file resolution: ${img.width} x ${img.height})`;
-
-        fn.appendChild(rb);
+        imageEntry.querySelector('.js-file-name').textContent = `${file.name} (file resolution: ${img.width} x ${img.height})`;
+        imageEntry.querySelector('.js-remove').onclick = removeButtonOnClick;
 
         fileInputColumnEntryRemoveButton.onclick = removeButtonOnClick;
 
@@ -905,18 +881,6 @@ function handleImageSelection(evt) {
         fileInputColumnEntry.appendChild(fileInputColumnEntryRemoveButton);
         fileInputColumn.appendChild(fileInputColumnEntry);
 
-        const imageEntryDetails = document.createElement('div');
-        imageEntryDetails.className = 'image-size-details';
-        imageEntryDetails.appendChild(fn);
-        imageEntryDetails.appendChild(w);
-        imageEntryDetails.appendChild(document.createTextNode(' x '));
-        imageEntryDetails.appendChild(h);
-        imageEntryDetails.appendChild(gil);
-        imageEntryDetails.appendChild(gi);
-
-        imageEntry.appendChild(thumb);
-        imageEntry.appendChild(imageEntryDetails);
-
         imageSizeSettings.appendChild(imageEntry);
 
         canvas.width = img.width;