adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-11 09:42:15 +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

17
resources/js/Components/Billing/BillingBanner.vue
View File

@@ -101,13 +101,16 @@ const showFreeUpgradeBanner = computed(
<MainContainer class="flex items-center justify-between">
<div class="flex items-center space-x-1.5">
<XCircleIcon class="w-4 text-white/50"></XCircleIcon>
<span class="font-medium">
Your are currently using the Free Plan.
</span>
<span
>To unlock all premium features & support the development of
solidtime, please upgrade your plan.</span
>
<div class="flex items-center flex-col md:flex-row">
<span class="font-medium">
You are currently using the Free Plan.
</span>
<span
>To unlock all premium features & support the
development of solidtime, please upgrade your
plan.</span
>
</div>
</div>
<div class="flex items-center space-x-2">
<Link

19
resources/js/Layouts/AppLayout.vue
View File

@@ -79,23 +79,24 @@ const page = usePage<{
'!flex bg-default-background w-full z-[9999999999]':
showSidebarMenu,
}"
class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-4 py-4 sm:flex flex-col justify-between overflow-y-scroll"
style="
scrollbar-width: thin;
scrollbar-color: var(--color-bg-primary) transparent;
">
class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-4 py-4 lg:flex flex-col justify-between">
<div>
<div
class="border-b border-default-background-separator pb-2 flex justify-between">
<OrganizationSwitcher class="w-full"></OrganizationSwitcher>
<XMarkIcon
@click="showSidebarMenu = false"
class="w-8 sm:hidden"></XMarkIcon>
class="w-8 lg:hidden"></XMarkIcon>
</div>
<div class="border-b border-default-background-separator">
<CurrentSidebarTimer></CurrentSidebarTimer>
</div>
<nav class="pt-2">
<nav
class="pt-2 overflow-y-scroll"
style="
scrollbar-width: thin;
scrollbar-color: var(--color-bg-primary) transparent;
">
<ul>
<NavigationSidebarItem
title="Dashboard"
@@ -205,9 +206,9 @@ const page = usePage<{
</ul>
</div>
</div>
<div class="flex-1 sm:ml-[230px] 2xl:ml-[250px]">
<div class="flex-1 lg:ml-[230px] 2xl:ml-[250px] min-w-0">
<div
class="sm:hidden w-full px-3 py-1 border-b border-b-default-background-separator text-muted flex justify-between items-center">
class="lg:hidden w-full px-3 py-1 border-b border-b-default-background-separator text-muted flex justify-between items-center">
<Bars3Icon
@click="showSidebarMenu = !showSidebarMenu"
class="w-7 text-muted"></Bars3Icon>

6
resources/js/Pages/Time.vue
View File

@@ -106,13 +106,13 @@ async function createClient(
v-model:show="showManualTimeEntryModal"></TimeEntryCreateModal>
<AppLayout title="Dashboard" data-testid="time_view">
<MainContainer
class="pt-5 sm:pt-8 pb-4 sm:pb-6 border-b border-default-background-separator">
class="pt-5 lg:pt-8 pb-4 lg:pb-6 border-b border-default-background-separator">
<div
class="sm:flex items-end sm:divide-x divide-default-background-separator divide-y sm:divide-y-0 space-y-2 sm:space-y-0 sm:space-x-2">
class="lg:flex items-end lg:divide-x divide-default-background-separator divide-y lg:divide-y-0 space-y-2 lg:space-y-0 lg:space-x-2">
<div class="flex-1">
<TimeTracker></TimeTracker>
</div>
<div class="pb-2 pt-2 sm:pt-0 sm:pl-4 flex justify-center">
<div class="pb-2 pt-2 lg:pt-0 lg:pl-4 flex justify-center">
<SecondaryButton
class="w-full text-center flex justify-center"
@click="showManualTimeEntryModal = true"

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

2
resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
View File

@@ -92,7 +92,7 @@ function updateTimeEntryDescription() {
class="flex items-center relative @container"
data-testid="dashboard_timer">
<div
class="flex flex-col sm:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
class="flex flex-col lg:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
<div class="flex flex-1 items-center pr-6">
<input
placeholder="What are you working on?"