From 85eb17e434beb028bd7d554fbdcbf83081b843cc Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Fri, 22 Jul 2022 18:55:06 +0200
Subject: [PATCH] Web: Layout adjustments to sleep schedule

---
 web/app/src/assets/base.css                   |  7 +--
 .../src/components/workers/WorkerDetails.vue  | 51 ++++++++++++-------
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index d054fa4a..0c3198eb 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -348,8 +348,7 @@ fieldset {
   border-radius: var(--border-radius);
 }
 
-input[type="text"],
-input[type="time"] {
+input[type="text"] {
   appearance: none;
   background-color: var(--color-background);
   border-radius: var(--border-radius);
@@ -370,10 +369,6 @@ input[type="text"].is-invalid {
   border-color: var(--color-danger);
 }
 
-input[type="time"] {
-  height: 37px;
-}
-
 .input-help-text {
   display: inline-block;
   color: var(--color-text-muted);
diff --git a/web/app/src/components/workers/WorkerDetails.vue b/web/app/src/components/workers/WorkerDetails.vue
index 2e27c490..6b9bf60f 100644
--- a/web/app/src/components/workers/WorkerDetails.vue
+++ b/web/app/src/components/workers/WorkerDetails.vue
@@ -59,24 +59,33 @@
         </div>
       </div>
 
-      <p v-if="isScheduleEditing">Adjust at which time of the day (and on which days) this worker should go to sleep.</p>
+      <div v-if="isScheduleEditing">
+        <p>
+          Adjust at which time of the day (and on which days) this worker should go to sleep.
+        </p>
+      </div>
       <div class="sleep-schedule-edit" v-if="isScheduleEditing">
         <div>
           <label>Days of the week</label>
           <input type="text" placeholder="mo tu we th fr" v-model="workerSleepSchedule.days_of_week">
           <span class="input-help-text">
-            Write the days name using their first two letters, separated by spaces.
+            Write each day name using their first two letters, separated by spaces.
             (e.g. mo tu we th fr)
           </span>
         </div>
-        <div>
-          <label>Start Time</label>
-          <input type="time" placeholder="09:00" v-model="workerSleepSchedule.start_time">
-        </div>
-        <div>
-          <label>End Time</label>
-          <input type="time" placeholder="18:00" v-model="workerSleepSchedule.end_time">
+        <div class="sleep-schedule-edit-time">
+          <div>
+            <label>Start Time</label>
+            <input type="text" placeholder="09:00" v-model="workerSleepSchedule.start_time" class="time">
+          </div>
+          <div>
+            <label>End Time</label>
+            <input type="text" placeholder="18:00" v-model="workerSleepSchedule.end_time" class="time">
+          </div>
         </div>
+        <span class="input-help-text">
+          Use 24-hour format.
+        </span>
       </div>
 
       <dl v-if="!isScheduleEditing">
@@ -205,7 +214,6 @@ export default {
 </script>
 
 <style scoped>
-
 .sleep-schedule .btn-bar label+.btn {
   margin-left: var(--spacer-sm);
 }
@@ -218,15 +226,12 @@ export default {
 
 .sleep-schedule-edit {
   display: flex;
-  margin: var(--spacer-lg) 0;
+  margin: var(--spacer-lg) 0 0;
+  flex-direction: column;
 }
 
 .sleep-schedule-edit > div {
-  margin-right: var(--spacer-sm);
-}
-
-.sleep-schedule-edit > div:first-child {
-  flex: 1;
+  margin: var(--spacer-sm) 0 ;
 }
 
 .sleep-schedule-edit label {
@@ -236,13 +241,25 @@ export default {
   color: var(--color-text-muted);
 }
 
+.sleep-schedule-edit > .sleep-schedule-edit-time {
+  display: flex;
+  margin-bottom: 0;
+}
+
 .toggle-sleep-schedule {
   visibility: hidden;
   display: none;
 }
 
-input[type="text"] {
+.sleep-schedule-edit input[type="text"] {
   font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  width: 23ch;
+}
+
+.sleep-schedule-edit input[type="text"].time {
+  width: 10ch;
+  margin-right: var(--spacer);
 }
 
 /* Prevent fields with long IDs from overflowing. */