blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Use definition lists for Task and Job details

Browse Source
This commit is contained in:
Pablo Vazquez 2022-05-04 12:56:30 +02:00
parent a6d2b4235b
commit 0c8def66aa
3 changed files with 88 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/app/src/assets/base.css
View File

@ -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);

101
web/app/src/components/JobDetails.vue
View File

@ -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>

84
web/app/src/components/TaskDetails.vue
View File

@ -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>