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

add responsive tables and time/client/member/tags index page

Browse Source
This commit is contained in:
Gregor Vostrak
2024-04-13 03:19:22 +02:00
parent 335a057ba1
commit 38535142b2
31 changed files with 83 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Components/Common/CardTitle.vue
View File

@@ -8,7 +8,7 @@ defineProps<{
</script>
<template>
<div class="flex w-full items-center justify-between pb-4">
<div class="flex w-full items-center justify-between pb-2.5 sm:pb-4">
<h3
class="text-white font-bold text-base flex items-center space-x-2.5">
<component

2
resources/js/Components/Common/Client/ClientTable.vue
View File

@@ -16,7 +16,7 @@ const createClient = ref(false);
<template>
<ClientCreateModal v-model:show="createClient"></ClientCreateModal>
<div class="flow-root">
<div class="flow-root max-w-[100vw] overflow-x-auto">
<div class="inline-block min-w-full align-middle">
<div
data-testid="client_table"

6
resources/js/Components/Common/Client/ClientTableHeading.vue
View File

@@ -5,12 +5,10 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
<template>
<TableHeading>
<div
class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
Name
</div>
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
Status
</div>
<div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
<span class="sr-only">Edit</span>
</div>

5
resources/js/Components/Common/DaySectionHeader.vue
View File

@@ -8,7 +8,10 @@ defineProps<{
<template>
<div class="flex items-center space-x-2">
<svg class="w-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<svg
class="w-4 sm:w-5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />

2
resources/js/Components/Common/Member/MemberTable.vue
View File

@@ -12,7 +12,7 @@ const createClient = ref(false);
<template>
<ClientCreateModal v-model:show="createClient"></ClientCreateModal>
<div class="flow-root">
<div class="flow-root max-w-[100vw] overflow-x-auto">
<div class="inline-block min-w-full align-middle">
<div
data-testid="client_table"

16
resources/js/Components/Common/Member/MemberTableHeading.vue
View File

@@ -5,21 +5,15 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
<template>
<TableHeading>
<div
class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
Name
</div>
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
Email
</div>
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
Role
</div>
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
<div class="px-3 py-1.5 text-left font-semibold text-white">Email</div>
<div class="px-3 py-1.5 text-left font-semibold text-white">Role</div>
<div class="px-3 py-1.5 text-left font-semibold text-white">
Billable Rate
</div>
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
Status
</div>
<div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>
<div
class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
<span class="sr-only">Edit</span>

18
resources/js/Components/Common/PageTitle.vue Normal file
View File

@@ -0,0 +1,18 @@
<script setup lang="ts">
import type { Component } from 'vue';
defineProps<{
icon: Component;
title: string;
}>();
</script>
<template>
<h3
class="text-white font-bold text-sm sm:text-base flex items-center space-x-2 sm:space-x-2.5">
<component :is="icon" class="w-5 sm:w-6 text-icon-default"></component>
<span> {{ title }} </span>
</h3>
</template>
<style scoped></style>

2
resources/js/Components/Common/Project/ProjectTable.vue
View File

@@ -16,7 +16,7 @@ const createProject = ref(false);
<template>
<ProjectCreateModal v-model:show="createProject"></ProjectCreateModal>
<div class="flow-root">
<div class="flow-root max-w-[100vw] overflow-x-auto">
<div class="inline-block min-w-full align-middle">
<div
data-testid="project_table"

12
resources/js/Components/Common/Project/ProjectTableHeading.vue
View File

@@ -5,18 +5,14 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
<template>
<TableHeading>
<div
class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
Name
</div>
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
Client
</div>
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
<div class="px-3 py-1.5 text-left font-semibold text-white">Client</div>
<div class="px-3 py-1.5 text-left font-semibold text-white">
Billable Rate
</div>
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
Status
</div>
<div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
<span class="sr-only">Edit</span>
</div>

8
resources/js/Components/Common/ProjectMember/ProjectMemberTableHeading.vue
View File

@@ -5,15 +5,13 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
<template>
<TableHeading>
<div
class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
Name
</div>
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
<div class="px-3 py-1.5 text-left font-semibold text-white">
Billable Rate
</div>
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
Role
</div>
<div class="px-3 py-1.5 text-left font-semibold text-white">Role</div>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
<span class="sr-only">Edit</span>
</div>

2
resources/js/Components/Common/TabBar/TabBar.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"></script>
<template>
<div class="flex items-center space-x-1">
<div class="flex items-center space-x-0.5 sm:space-x-1">
<slot></slot>
</div>
</template>

2
resources/js/Components/Common/TabBar/TabBarItem.vue
View File

@@ -18,7 +18,7 @@ const activeClass = computed(() => {
<button
:class="
twMerge(
'rounded-md transition px-3 py-1.5 text-sm font-medium hover:text-white',
'rounded-md transition px-2 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-medium hover:text-white',
activeClass
)
">

2
resources/js/Components/Common/TableHeading.vue
View File

@@ -2,7 +2,7 @@
<template>
<div
class="contents [&>*]:border-row-separator [&>*]:border-b [&>*]:border-t [&>*]:bg-row-heading-background">
class="contents [&>*]:border-row-separator text-xs sm:text-sm [&>*]:border-b [&>*]:border-t [&>*]:bg-row-heading-background">
<slot></slot>
</div>
</template>

2
resources/js/Components/Common/Tag/TagTableHeading.vue
View File

@@ -5,7 +5,7 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
<template>
<TableHeading>
<div
class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
Name
</div>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">

6
resources/js/Components/Common/Task/TaskTableHeading.vue
View File

@@ -5,12 +5,10 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
<template>
<TableHeading>
<div
class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
Task Name
</div>
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
Status
</div>
<div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
<span class="sr-only">Edit</span>
</div>

7
resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
View File

@@ -82,13 +82,14 @@ function updateProjectAndTask(projectId: string, taskId: string) {
class="border-b border-card-border transition"
data-testid="time_entry_row">
<MainContainer>
<div class="flex py-1.5 items-center justify-between group">
<div class="sm:flex py-1.5 items-center justify-between group">
<div class="flex space-x-1 items-center">
<input
type="checkbox"
class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
<TimeEntryDescriptionInput
@changed="updateTimeEntryDescription"
class="flex-1"
:modelValue="
timeEntry.description
"></TimeEntryDescriptionInput>
@@ -105,7 +106,7 @@ function updateProjectAndTask(projectId: string, taskId: string) {
<TimeEntryRowTagDropdown
@changed="updateTimeEntryTags"
:modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
<div>
<div class="flex-1">
<TimeEntryRangeSelector
:start="timeEntry.start"
:end="timeEntry.end"
@@ -122,7 +123,7 @@ function updateProjectAndTask(projectId: string, taskId: string) {
<TimeTrackerStartStop
@changed="onStartStopClick"
:active="!!(timeEntry.start && !timeEntry.end)"
class="opacity-20 group-hover:opacity-100"></TimeTrackerStartStop>
class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
<TimeEntryMoreOptionsDropdown
@delete="
deleteTimeEntry

2
resources/js/Components/Common/TimeEntry/TimeEntryRowHeading.vue
View File

@@ -8,7 +8,7 @@ defineProps<{
<template>
<div
class="bg-card-background border-t border-b border-card-border py-1.5 text-sm">
class="bg-card-background border-t border-b border-card-border py-1.5 text-xs sm:text-sm">
<MainContainer>
<DaySectionHeader :date></DaySectionHeader>
</MainContainer>