From 0c8def66aab9e1a048f66f2b6804c8b38187602c Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Wed, 4 May 2022 12:56:30 +0200
Subject: [PATCH] Web: Use definition lists for Task and Job details

---
 web/app/src/assets/base.css            |  23 ++++++
 web/app/src/components/JobDetails.vue  | 101 +++++++++----------------
 web/app/src/components/TaskDetails.vue |  84 +++++++-------------
 3 files changed, 88 insertions(+), 120 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index d8add595..0d7e9ea1 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -132,6 +132,29 @@ h3.sub-title {
   padding: 0 0 var(--spacer-sm);
 }
 
+dl {
+  display: grid;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  grid-template-columns: max-content auto;
+}
+
+dl dt {
+  font-weight: bold;
+  text-align: right;
+}
+
+dl dd {
+  border-bottom: var(--border-width) solid var(--color-border);
+  margin-bottom: .133rem;
+  margin-left: var(--spacer-sm);
+  padding-bottom: .133rem;
+}
+
+dl dd:empty {
+  border-color: transparent;
+}
+
 footer {
   align-items: center;
   color: var(--color-text-muted);
diff --git a/web/app/src/components/JobDetails.vue b/web/app/src/components/JobDetails.vue
index 5c62467d..b5fa2cd3 100644
--- a/web/app/src/components/JobDetails.vue
+++ b/web/app/src/components/JobDetails.vue
@@ -1,65 +1,50 @@
 <template>
   <h2 class="column-title">Job Details</h2>
-  <div v-if="hasJobData" class="job-details">
-    <table class="details">
-      <tr class="field-id">
-        <th>ID</th>
-        <td>{{ jobData.id }}</td>
-      </tr>
 
-      <tr class="field-name">
-        <th>Name</th>
-        <td>{{ jobData.name }}</td>
-      </tr>
+  <template v-if="hasJobData">
+    <dl>
+      <dt class="field-id">ID</dt>
+      <dd :title="jobData.id">{{ jobData.id }}</dd>
 
-      <tr class="field-status">
-        <th>Status</th>
-        <td>{{ jobData.status }}</td>
-      </tr>
+      <dt class="field-name">Name</dt>
+      <dd>{{ jobData.name }}</dd>
 
-      <tr class="field-type">
-        <th>Type</th>
-        <td>{{ jobType ? jobType.label : jobData.type }}</td>
-      </tr>
+      <dt class="field-status">Status</dt>
+      <dd>{{ jobData.status }}</dd>
 
-      <tr class="field-priority">
-        <th>Prio</th>
-        <td>{{ jobData.priority }}</td>
-      </tr>
+      <dt class="field-type">Type</dt>
+      <dd>{{ jobType ? jobType.label : jobData.type }}</dd>
 
-      <tr class="field-created">
-        <th>Created</th>
-        <td>{{ datetime.relativeTime(jobData.created) }}</td>
-      </tr>
+      <dt class="field-priority">Priority</dt>
+      <dd>{{ jobData.priority }}</dd>
 
-      <tr class="field-updated">
-        <th>Updated</th>
-        <td>{{ datetime.relativeTime(jobData.updated) }}</td>
-      </tr>
+      <dt class="field-created">Created</dt>
+      <dd>{{ datetime.relativeTime(jobData.created) }}</dd>
 
-      <tr class="field-activity">
-        <th>Activity</th>
-        <td>{{ jobData.activity }}</td>
-      </tr>
-    </table>
+      <dt class="field-updated">Updated</dt>
+      <dd>{{ datetime.relativeTime(jobData.updated) }}</dd>
+
+      <dt class="field-activity">Activity</dt>
+      <dd>{{ jobData.activity }}</dd>
+    </dl>
 
     <h3 class="sub-title" v-if="hasMetadata">Meta-data</h3>
-    <table class="metadata">
-      <tr v-for="value, key in jobData.metadata" :class="`field-${key}`">
-        <th>{{ key }}</th>
-        <td>{{ value }}</td>
-      </tr>
-    </table>
+    <dl>
+      <template v-for="value, key in jobData.metadata">
+        <dt :class="`field-${key}`">{{ key }}</dt>
+        <dd>{{ value }}</dd>
+      </template>
+    </dl>
 
     <h3 class="sub-title" v-if="hasSettings">Settings</h3>
-    <table class="settings">
-      <tr v-for="value, key in settingsToDisplay" :class="`field-${key}`">
-        <th>{{ key }}</th>
-        <td>{{ value }}</td>
-      </tr>
-    </table>
+    <dl>
+      <template v-for="value, key in settingsToDisplay">
+        <dt :class="`field-${key}`">{{ key }}</dt>
+        <dd>{{ value }}</dd>
+      </template>
+    </dl>
+  </template>
 
-  </div>
   <div v-else class="no-job-selected">
     <p>No job selected, pick one from the list on the left.</p>
   </div>
@@ -189,24 +174,10 @@ export default {
 </script>
 
 <style scoped>
-.job-details {
-  font-size: smaller;
-  font-family: 'Noto Mono', monospace;
-}
-
-tr:hover {
-  background-color: #333333;
-}
-
-tr.field-id td {
+/* Prevent fields with long IDs from overflowing. */
+.field-id + dd {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-}
-
-th {
-  font-weight: bold;
-  text-align: right;
-  vertical-align: top;
+  white-space: nowrap;
 }
 </style>
diff --git a/web/app/src/components/TaskDetails.vue b/web/app/src/components/TaskDetails.vue
index ca708801..efd23005 100644
--- a/web/app/src/components/TaskDetails.vue
+++ b/web/app/src/components/TaskDetails.vue
@@ -1,51 +1,39 @@
 <template>
   <h2 class="column-title">Task Details</h2>
-  <div v-if="hasTaskData" class="task-details">
-    <table class="details">
-      <tr class="field-id">
-        <th>ID</th>
-        <td>{{ taskData.id }}</td>
-      </tr>
 
-      <tr class="field-name">
-        <th>Name</th>
-        <td>{{ taskData.name }}</td>
-      </tr>
+  <template v-if="hasTaskData">
+    <dl>
+      <dt class="field-id">ID</dt>
+      <dd>{{ taskData.id }}</dd>
 
-      <tr class="field-status">
-        <th>Status</th>
-        <td>{{ taskData.status }}</td>
-      </tr>
+      <dt class="field-name">Name</dt>
+      <dd>{{ taskData.name }}</dd>
 
-      <tr class="field-type">
-        <th>Type</th>
-        <td>{{ taskData.type }}</td>
-      </tr>
+      <dt class="field-status">Status</dt>
+      <dd>{{ taskData.status }}</dd>
 
-      <tr class="field-priority">
-        <th>Prio</th>
-        <td>{{ taskData.priority }}</td>
-      </tr>
+      <dt class="field-type">Type</dt>
+      <dd>{{ taskData.type }}</dd>
 
-      <tr class="field-created">
-        <th>Created</th>
-        <td>{{ datetime.relativeTime(taskData.created) }}</td>
-      </tr>
-      <tr class="field-updated">
-        <th>Updated</th>
-        <td>{{ datetime.relativeTime(taskData.updated) }}</td>
-      </tr>
-    </table>
+      <dt class="field-priority">Priority</dt>
+      <dd>{{ taskData.priority }}</dd>
+
+      <dt class="field-created">Created</dt>
+      <dd>{{ datetime.relativeTime(taskData.created) }}</dd>
+
+      <dt class="field-updated">Updated</dt>
+      <dd>{{ datetime.relativeTime(taskData.updated) }}</dd>
+    </dl>
 
     <h3 class="sub-title">Commands</h3>
-    <table class="commands">
-      <tr v-for="cmd in taskData.commands" :class="`field-${cmd.name}`">
-        <th>{{ cmd.name }}</th>
-        <td>{{ cmd.parameters }}</td>
-      </tr>
-    </table>
+    <dl>
+      <template v-for="cmd in taskData.commands">
+        <dt :class="`field-${cmd.name}`">{{ cmd.name }}</dt>
+        <dd>{{ cmd.parameters }}</dd>
+      </template>
+    </dl>
+  </template>
 
-  </div>
   <div v-else class="no-task-selected">
     <p>No task selected, pick one from the list on the left.</p>
   </div>
@@ -84,24 +72,10 @@ export default {
 </script>
 
 <style scoped>
-.task-details {
-  font-size: smaller;
-  font-family: 'Noto Mono', monospace;
-}
-
-tr:hover {
-  background-color: #333333;
-}
-
-tr.field-id td {
+/* Prevent fields with long IDs from overflowing. */
+.field-id + dd {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-}
-
-th {
-  font-weight: bold;
-  text-align: right;
-  vertical-align: top;
+  white-space: nowrap;
 }
 </style>