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

fix layout bug in time view with small time entries, fixes ST-414

Browse Source
This commit is contained in:
Gregor Vostrak
2024-09-07 00:47:28 +02:00
committed by Constantin Graf
parent b391f47d1b
commit 3b41d90b07
7 changed files with 51 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
View File

@@ -73,39 +73,41 @@ const expanded = ref(false);
<template>
<div
class="border-b border-default-background-separator transition"
class="border-b border-default-background-separator min-w-0 transition"
data-testid="time_entry_row">
<MainContainer>
<div class="sm:flex py-1.5 items-center justify-between group">
<MainContainer class="min-w-0">
<div
class="sm:flex py-1.5 items-center min-w-0 justify-between group">
<div class="flex space-x-3 items-center min-w-0">
<input
type="checkbox"
class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
<div class="flex items-center">
<div class="flex items-center min-w-0">
<GroupedItemsCountButton
:expanded="expanded"
@click="expanded = !expanded">
{{ timeEntry?.timeEntries?.length }}
</GroupedItemsCountButton>
<TimeEntryDescriptionInput
class="min-w-0"
@changed="updateTimeEntryDescription"
:modelValue="
timeEntry.description
"></TimeEntryDescriptionInput>
<TimeTrackerProjectTaskDropdown
:clients
:createProject
:createClient
:projects="projects"
:tasks="tasks"
:showBadgeBorder="false"
@changed="updateProjectAndTask"
:project="timeEntry.project_id"
:currency="currency"
:task="
timeEntry.task_id
"></TimeTrackerProjectTaskDropdown>
</div>
<TimeTrackerProjectTaskDropdown
:clients
:createProject
:createClient
:projects="projects"
:tasks="tasks"
:showBadgeBorder="false"
@changed="updateProjectAndTask"
:project="timeEntry.project_id"
:currency="currency"
:task="
timeEntry.task_id
"></TimeTrackerProjectTaskDropdown>
</div>
<div class="flex items-center font-medium lg:space-x-2">
<TimeEntryRowTagDropdown

9
resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue
View File

@@ -24,11 +24,12 @@ const displaysPlaceholder = computed(() => {
</script>
<template>
<div>
<div class="relative text-sm font-medium">
<div
class="relative min-w-0 flex-1 text-ellipsis whitespace-nowrap overflow-hidden">
<div class="relative text-sm font-medium min-w-0">
<div
:class="[
'opacity-0 py-2 text-base whitespace-pre pl-3 pr-1',
'opacity-0 py-2 text-base whitespace-pre min-w-0 pl-3 pr-1',
{ 'min-w-[150px]': displaysPlaceholder },
]">
{{ liveDataValue }}
@@ -40,7 +41,7 @@ const displaysPlaceholder = computed(() => {
@input="onInput"
@keydown.enter="onChange"
placeholder="Add a description"
class="absolute px-0 h-full pl-3 pr-1 left-0 top-0 w-full text-sm lg:text-base text-white font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0" />
class="absolute px-0 h-full min-w-0 pl-3 pr-1 left-0 top-0 w-full text-sm lg:text-base text-white font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0" />
</div>
</div>
</template>

7
resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
View File

@@ -61,18 +61,17 @@ function updateProjectAndTask(projectId: string, taskId: string) {
<template>
<div
class="border-b border-default-background-separator transition"
class="border-b border-default-background-separator transition min-w-0"
data-testid="time_entry_row">
<MainContainer>
<MainContainer class="min-w-0">
<div
class="sm:flex py-1 lg:py-1.5 items-center justify-between group">
class="sm:flex py-1 lg:py-1.5 min-w-0 items-center justify-between group">
<div class="flex space-x-1 items-center min-w-0">
<input
type="checkbox"
class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
<div class="w-7 h-7" v-if="indent === true"></div>
<TimeEntryDescriptionInput
class="flex-1 max-w-[220px] md:max-w-[400px] text-ellipsis overflow-ellipsis"
@changed="updateTimeEntryDescription"
:modelValue="
timeEntry.description