From c10b7f97c9be9e373f36a9d70057502fb1dee2e0 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Wed, 4 May 2022 15:25:09 +0200
Subject: [PATCH] Web: Positive wording text for Job/Task Details

Also, do not mention left/right on labels since the position of sections
can vary (for example on smaller screens).
---
 web/app/src/assets/base.css            | 11 +++++++++++
 web/app/src/components/JobDetails.vue  |  4 ++--
 web/app/src/components/TaskDetails.vue |  4 ++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 0a0dceb1..2f9d2ca4 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -10,6 +10,7 @@
   --color-accent-background: hsl(237deg 18% 28%);
   --color-text: #ddd;
   --color-text-muted: #999;
+  --color-text-hint: #555;
 
   --color-border: #222;
 
@@ -224,3 +225,13 @@ footer {
 .btn-bar .btn.dangerous[disabled] {
   background-color: #53413e;
 }
+
+.details-no-item-selected {
+  align-items: center;
+  color: var(--color-text-hint);
+  display: flex;
+  user-select: none;
+  height: 100%;
+  justify-content: center;
+  margin: auto;
+}
diff --git a/web/app/src/components/JobDetails.vue b/web/app/src/components/JobDetails.vue
index b5fa2cd3..4654f0be 100644
--- a/web/app/src/components/JobDetails.vue
+++ b/web/app/src/components/JobDetails.vue
@@ -45,8 +45,8 @@
     </dl>
   </template>
 
-  <div v-else class="no-job-selected">
-    <p>No job selected, pick one from the list on the left.</p>
+  <div v-else class="details-no-item-selected">
+    <p>Select a job to see its details.</p>
   </div>
 </template>
 
diff --git a/web/app/src/components/TaskDetails.vue b/web/app/src/components/TaskDetails.vue
index efd23005..05a5a2dc 100644
--- a/web/app/src/components/TaskDetails.vue
+++ b/web/app/src/components/TaskDetails.vue
@@ -34,8 +34,8 @@
     </dl>
   </template>
 
-  <div v-else class="no-task-selected">
-    <p>No task selected, pick one from the list on the left.</p>
+  <div v-else class="details-no-item-selected">
+    <p>Select a task to see its details.</p>
   </div>
 </template>