adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-16 04:02:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

responsive time entry modal fixes

Browse Source
This commit is contained in:
Gregor Vostrak
2026-02-10 17:18:49 +01:00
parent e038870bc4
commit dc98151d42
3 changed files with 41 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
View File

@@ -159,7 +159,7 @@ const billableProxy = computed({
@keydown.enter="submit" /> @keydown.enter="submit" />
</div> </div>
</div> </div>
<div class="flex flex-col sm:flex-row sm:items-end gap-2 sm:gap-4 pt-4"> <div class="flex flex-col sm:flex-row sm:items-end gap-2 pt-4">
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<TimeTrackerProjectTaskDropdown <TimeTrackerProjectTaskDropdown
v-model:project="timeEntry.project_id" v-model:project="timeEntry.project_id"
@@ -206,8 +206,8 @@ const billableProxy = computed({
</Select> </Select>
</div> </div>
</div> </div>
<div class="flex flex-col sm:flex-row gap-4 pt-4"> <div class="grid grid-cols-2 sm:grid-cols-5 gap-4 pt-4">
<Field class="flex-1"> <Field class="col-span-2 sm:col-span-3">
<FieldLabel>Duration</FieldLabel> <FieldLabel>Duration</FieldLabel>
<div class="space-y-2 flex flex-col"> <div class="space-y-2 flex flex-col">
<DurationHumanInput <DurationHumanInput
@@ -224,27 +224,20 @@ const billableProxy = computed({
</div> </div>
</div> </div>
</Field> </Field>
<div class="grid grid-cols-2 sm:flex gap-4"> <Field>
<Field> <FieldLabel>Start</FieldLabel>
<FieldLabel>Start</FieldLabel> <div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 sm:w-28"> <TimePickerSimple v-model="localStart" class="w-full"></TimePickerSimple>
<TimePickerSimple <DatePicker v-model="localStart" class="w-full" tabindex="1"></DatePicker>
v-model="localStart" </div>
class="w-full"></TimePickerSimple> </Field>
<DatePicker <Field>
v-model="localStart" <FieldLabel>End</FieldLabel>
class="w-full" <div class="flex flex-col gap-2">
tabindex="1"></DatePicker> <TimePickerSimple v-model="localEnd" class="w-full"></TimePickerSimple>
</div> <DatePicker v-model="localEnd" class="w-full" tabindex="1"></DatePicker>
</Field> </div>
<Field> </Field>
<FieldLabel>End</FieldLabel>
<div class="flex flex-col gap-2 sm:w-28">
<TimePickerSimple v-model="localEnd" class="w-full"></TimePickerSimple>
<DatePicker v-model="localEnd" class="w-full" tabindex="1"></DatePicker>
</div>
</Field>
</div>
</div> </div>
</template> </template>
<template #footer> <template #footer>

49
resources/js/packages/ui/src/TimeEntry/TimeEntryEditModal.vue
View File

@@ -214,8 +214,8 @@ const billableProxy = computed({
</Select> </Select>
</div> </div>
</div> </div>
<div class="flex flex-col sm:flex-row gap-4 pt-4"> <div class="grid grid-cols-2 sm:grid-cols-5 gap-4 pt-4">
<Field class="flex-1"> <Field class="col-span-2 sm:col-span-3">
<FieldLabel>Duration</FieldLabel> <FieldLabel>Duration</FieldLabel>
<div class="space-y-2 flex flex-col"> <div class="space-y-2 flex flex-col">
<DurationHumanInput <DurationHumanInput
@@ -232,32 +232,25 @@ const billableProxy = computed({
</div> </div>
</div> </div>
</Field> </Field>
<div class="grid grid-cols-2 sm:flex gap-4"> <Field>
<Field> <FieldLabel>Start</FieldLabel>
<FieldLabel>Start</FieldLabel> <div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 sm:w-28"> <TimePickerSimple
<TimePickerSimple v-model="localStart"
v-model="localStart" class="w-full"></TimePickerSimple>
class="w-full"></TimePickerSimple> <DatePicker
<DatePicker v-model="localStart"
v-model="localStart" class="w-full"
class="w-full" tabindex="1"></DatePicker>
tabindex="1"></DatePicker> </div>
</div> </Field>
</Field> <Field>
<Field> <FieldLabel>End</FieldLabel>
<FieldLabel>End</FieldLabel> <div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 sm:w-28"> <TimePickerSimple v-model="localEnd" class="w-full"></TimePickerSimple>
<TimePickerSimple <DatePicker v-model="localEnd" class="w-full" tabindex="1"></DatePicker>
v-model="localEnd" </div>
class="w-full"></TimePickerSimple> </Field>
<DatePicker
v-model="localEnd"
class="w-full"
tabindex="1"></DatePicker>
</div>
</Field>
</div>
</div> </div>
</div> </div>
</template> </template>

6
resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
View File

@@ -514,14 +514,14 @@ const showCreateProject = ref(false);
<Button <Button
:variant="props.variant" :variant="props.variant"
:size="props.size" :size="props.size"
:class="twMerge('w-full justify-start', props.class)"> :class="twMerge('w-full justify-start overflow-hidden', props.class)">
<div <div
class="w-3 h-3 rounded-full shrink-0" class="w-3 h-3 rounded-full shrink-0"
:style="{ backgroundColor: selectedProjectColor }"></div> :style="{ backgroundColor: selectedProjectColor }"></div>
<span class="truncate">{{ selectedProjectName }}</span> <span class="truncate shrink-[1] pr-1">{{ selectedProjectName }}</span>
<template v-if="currentTask"> <template v-if="currentTask">
<ChevronRightIcon class="w-4 h-4 text-text-tertiary shrink-0" /> <ChevronRightIcon class="w-4 h-4 text-text-tertiary shrink-0" />
<span class="truncate">{{ currentTask.name }}</span> <span class="truncate shrink-[100]">{{ currentTask.name }}</span>
</template> </template>
</Button> </Button>
<button <button