improve styling of item preview

3 files changed, 81 insertions, 49 deletions

diff --git a/html/item_list.html b/html/item_list.html
index 7192f0f..41b4dd0 100644
--- a/html/item_list.html
+++ b/html/item_list.html
@@ -73,6 +73,9 @@
       opacity: 0.75;
       cursor: not-allowed;
   }
+  .item_preview_container .item_preview_main_div {
+      margin: auto;
+  }
   .list_buttons {
       margin: 1em auto;
       text-align: center;
diff --git a/html/item_preview.html b/html/item_preview.html
index 356ee62..c9256a7 100644
--- a/html/item_preview.html
+++ b/html/item_preview.html
@@ -39,55 +39,86 @@
 #LOADCSS html/grid.css
 <style>
   .item_preview_main_div {
-      margin: 1.3em 0.8em 1em 0.8em;
+      padding: 1.3em 0.8em 1em 0.8em;
+      display: grid;
+      grid-template-columns: auto;
+      max-width: 800px;
+  }
+
+  .item_preview_main_div > * {
+      margin-top: 1.5em;
+      margin-left: 1.8em;
+      margin-right: 1em;
+  }
+  .item_preview_main_div > label {
+      margin-left: 1em;
+  }
+
+  .item_preview_main_div h3 {
+      text-align: center;
+
+      margin-left: 1.8em;
+  }
+
+  .item_preview_main_div a, .item_preview_payload {
+      word-break: break-word;
+  }
+
+  .item_preview_payload_id {
+      margin: 0.1em 0 0.2em 1em;
   }
 </style>
 <template>
   <div id="resource_preview" data-template="main_div"
-       class="grid_2 grid_form item_preview_main_div">
-    <h3 class="grid_col_both">resource preview</h3>
-    <label class="grid_col_1">conforms to:</label>
-    <span data-template="conforms_to" class="grid_col_2">...</span>
-    <label class="grid_col_1">identifier:</label>
-    <span data-template="identifier" class="grid_col_2">...</span>
-    <label class="grid_col_1">long name:</label>
-    <span data-template="long_name" class="grid_col_2">...</span>
-    <label class="grid_col_1">UUID:</label>
-    <span data-template="uuid" class="grid_col_2">...</span>
-    <label class="grid_col_1">version:</label>
-    <span data-template="version" class="grid_col_2">...</span>
-    <label class="grid_col_1">description:</label>
-    <span data-template="description" class="grid_col_2">...</span>
-    <label class="grid_col_1">dependencies:</label>
-    <span class="grid_col_2"><ul data-template="dependencies"></ul></span>
-    <label class="grid_col_1">scripts:</label>
-    <span class="grid_col_2"><ul data-template="scripts"></ul></span>
-    <label class="grid_col_1">source name:</label>
-    <span data-template="source_name" class="grid_col_2">...</span>
-    <label class="grid_col_1">copyright:</label>
-    <span class="grid_col_2"><ul data-template="copyright"></ul></span>
+       class="item_preview_main_div">
+    <h3>resource preview</h3>
+    <label>conforms to:</label>
+    <span data-template="conforms_to">...</span>
+    <label>identifier:</label>
+    <span data-template="identifier">...</span>
+    <label>long name:</label>
+    <span data-template="long_name">...</span>
+    <label>UUID:</label>
+    <span data-template="uuid">...</span>
+    <label>version:</label>
+    <span data-template="version">...</span>
+    <label>description:</label>
+    <span data-template="description">...</span>
+    <label>dependencies:</label>
+    <span><ul data-template="dependencies"></ul></span>
+    <label>scripts:</label>
+    <span><ul data-template="scripts"></ul></span>
+    <label>source name:</label>
+    <span data-template="source_name">...</span>
+    <label>copyright:</label>
+    <span><ul data-template="copyright"></ul></span>
   </div>
   <div id="mapping_preview" data-template="main_div"
-       class="grid_2 grid_form">
-    <h3 class="grid_col_both">mapping preview</h3>
-    <label class="grid_col_1">conforms to:</label>
-    <span data-template="conforms_to" class="grid_col_2">...</span>
-    <label class="grid_col_1">identifier:</label>
-    <span data-template="identifier" class="grid_col_2">...</span>
-    <label class="grid_col_1">long name:</label>
-    <span data-template="long_name" class="grid_col_2">...</span>
-    <label class="grid_col_1">UUID:</label>
-    <span data-template="uuid" class="grid_col_2">...</span>
-    <label class="grid_col_1">version:</label>
-    <span data-template="version" class="grid_col_2">...</span>
-    <label class="grid_col_1">description:</label>
-    <span data-template="description" class="grid_col_2">...</span>
-    <label class="grid_col_1">payloads:</label>
-    <div data-template="payloads" class="grid_col_both grid_2"></div>
-    <label class="grid_col_1">source name:</label>
-    <span data-template="source_name" class="grid_col_2">...</span>
-    <label class="grid_col_1">copyright:</label>
-    <span class="grid_col_2"><ul data-template="copyright"></ul></span>
+       class="item_preview_main_div">
+    <h3>mapping preview</h3>
+    <label>conforms to:</label>
+    <span data-template="conforms_to">...</span>
+    <label>identifier:</label>
+    <span data-template="identifier">...</span>
+    <label>long name:</label>
+    <span data-template="long_name">...</span>
+    <label>UUID:</label>
+    <span data-template="uuid">...</span>
+    <label>version:</label>
+    <span data-template="version">...</span>
+    <label>description:</label>
+    <span data-template="description">...</span>
+    <label>payloads:</label>
+    <div data-template="payloads" class="item_preview_payload"></div>
+    <label>source name:</label>
+    <span data-template="source_name">...</span>
+    <label>copyright:</label>
+    <span><ul data-template="copyright"></ul></span>
+  </div>
+  <div id="pattern_payload_entry" data-template="main_div">
+    <span data-template="pattern"></span>
+    &#8594;
+    <div data-template="payload" class="item_preview_payload_id"></div>
   </div>
 </template>
 #ENDIF
diff --git a/html/item_preview.js b/html/item_preview.js
index cdc56d9..fed03d2 100644
--- a/html/item_preview.js
+++ b/html/item_preview.js
@@ -129,12 +129,10 @@ function mapping_preview(mapping, preview_object, link_cb=make_file_link) {
 	/* We use a non-breaking space because normal space would be ignored. */
 	const [nbsp, rarrow] = [160, 0x2192].map(n => String.fromCodePoint(n));
 	const texts = [`${pattern}${nbsp}`, `${rarrow}  ${payload.identifier}`];
-	for (let i = 0; i < texts.length; i++) {
-	    const span = document.createElement("span");
-	    span.innerText = texts[i];
-	    span.classList.add(`grid_col_${i + 1}`);
-	    preview_object.payloads.append(span);
-	}
+	const payload_entry = clone_template("pattern_payload_entry");
+	payload_entry.pattern.innerText = pattern;
+	payload_entry.payload.innerText = payload.identifier;
+	preview_object.payloads.append(payload_entry.main_div);
     }
 
     const link_maker = file_ref => link_cb(preview_object, file_ref);