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

Web: Layout adjustments to sleep schedule

Browse Source
This commit is contained in:
Pablo Vazquez 2022-07-22 18:55:06 +02:00 committed by Francesco Siddi
parent bd20ba7d6b
commit 85eb17e434
2 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -348,8 +348,7 @@ fieldset {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
input[type="text"], input[type="text"] {
input[type="time"] {
appearance: none; appearance: none;
background-color: var(--color-background); background-color: var(--color-background);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -370,10 +369,6 @@ input[type="text"].is-invalid {
border-color: var(--color-danger); border-color: var(--color-danger);
} }
input[type="time"] {
height: 37px;
}
.input-help-text { .input-help-text {
display: inline-block; display: inline-block;
color: var(--color-text-muted); color: var(--color-text-muted);

51
web/app/src/components/workers/WorkerDetails.vue
View File

@ -59,24 +59,33 @@
</div> </div>
</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 class="sleep-schedule-edit" v-if="isScheduleEditing">
<div> <div>
<label>Days of the week</label> <label>Days of the week</label>
<input type="text" placeholder="mo tu we th fr" v-model="workerSleepSchedule.days_of_week"> <input type="text" placeholder="mo tu we th fr" v-model="workerSleepSchedule.days_of_week">
<span class="input-help-text"> <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) (e.g. mo tu we th fr)
</span> </span>
</div> </div>
<div> <div class="sleep-schedule-edit-time">
<label>Start Time</label> <div>
<input type="time" placeholder="09:00" v-model="workerSleepSchedule.start_time"> <label>Start Time</label>
</div> <input type="text" placeholder="09:00" v-model="workerSleepSchedule.start_time" class="time">
<div> </div>
<label>End Time</label> <div>
<input type="time" placeholder="18:00" v-model="workerSleepSchedule.end_time"> <label>End Time</label>
<input type="text" placeholder="18:00" v-model="workerSleepSchedule.end_time" class="time">
</div>
</div> </div>
<span class="input-help-text">
Use 24-hour format.
</span>
</div> </div>
<dl v-if="!isScheduleEditing"> <dl v-if="!isScheduleEditing">
@ -205,7 +214,6 @@ export default {
</script> </script>
<style scoped> <style scoped>
.sleep-schedule .btn-bar label+.btn { .sleep-schedule .btn-bar label+.btn {
margin-left: var(--spacer-sm); margin-left: var(--spacer-sm);
} }
@ -218,15 +226,12 @@ export default {
.sleep-schedule-edit { .sleep-schedule-edit {
display: flex; display: flex;
margin: var(--spacer-lg) 0; margin: var(--spacer-lg) 0 0;
flex-direction: column;
} }
.sleep-schedule-edit > div { .sleep-schedule-edit > div {
margin-right: var(--spacer-sm); margin: var(--spacer-sm) 0 ;
}
.sleep-schedule-edit > div:first-child {
flex: 1;
} }
.sleep-schedule-edit label { .sleep-schedule-edit label {
@ -236,13 +241,25 @@ export default {
color: var(--color-text-muted); color: var(--color-text-muted);
} }
.sleep-schedule-edit > .sleep-schedule-edit-time {
display: flex;
margin-bottom: 0;
}
.toggle-sleep-schedule { .toggle-sleep-schedule {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
input[type="text"] { .sleep-schedule-edit input[type="text"] {
font-family: var(--font-family-mono); 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. */ /* Prevent fields with long IDs from overflowing. */