add responsiveness for the dashboard and menu

2026-08-15 19:52:15 +01:00 · 2024-04-13 02:12:57 +02:00
parent 528865fc1c
commit 335a057ba1
12 changed files with 80 additions and 46 deletions
--- a/resources/js/Components/Common/Badge.vue
+++ b/resources/js/Components/Common/Badge.vue
@@ -20,7 +20,7 @@ const props = withDefaults(

 const badgeClasses = {
    base: 'py-1 px-2 space-x-1.5 text-xs',
-    large: 'py-1.5 px-3 space-x-2 text-sm text-muted',
+    large: 'py-1 sm:py-1.5 px-2 sm:px-3 space-x-1.5 sm:space-x-2 text-xs sm:text-sm text-muted',
 };

 const borderClasses = computed(() => {
--- a/resources/js/Components/Common/BillableToggleButton.vue
+++ b/resources/js/Components/Common/BillableToggleButton.vue
@@ -21,11 +21,11 @@ const iconColorClasses = computed(() => {
        :class="
            twMerge(
                iconColorClasses,
-                'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-11 h-11 flex items-center justify-center'
+                'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-11 h-7 sm:h-11 flex items-center justify-center'
            )
        ">
        <svg
-            class="h-7"
+            class="w-5 sm:w-7 h-5 sm:h-7"
            viewBox="0 0 8 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
--- a/resources/js/Components/Common/Project/ProjectBadge.vue
+++ b/resources/js/Components/Common/Project/ProjectBadge.vue
@@ -21,7 +21,7 @@ const props = withDefaults(

 const indicatorClasses = {
    base: 'w-2.5 h-2.5',
-    large: 'w-3 h-3',
+    large: 'w-2 sm:w-3 h-2 sm:h-3',
 };
 </script>

--- a/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue
@@ -25,10 +25,10 @@ const iconColorClasses = computed(() => {
                :class="
                    twMerge(
                        iconColorClasses,
-                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-11 h-11 flex items-center justify-center'
+                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-11 h-7 sm:h-11 flex items-center justify-center'
                    )
                ">
-                <TagIcon class="w-7 h-7"></TagIcon>
+                <TagIcon class="w-5 sm:w-7 h-5 sm:h-7"></TagIcon>
                <span
                    v-if="model.length > 1"
                    class="font-extrabold absolute rounded-full text-xs w-3 h-3 block top-[15px] rotate-[45deg] right-[14px] text-card-background">
--- a/resources/js/Components/Common/TimeTrackerStartStop.vue
+++ b/resources/js/Components/Common/TimeTrackerStartStop.vue
@@ -16,11 +16,11 @@ const props = withDefaults(
 );
 const buttonSizeClasses = {
    base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus:ring-accent-200/10 hover:ring-4',
-    large: 'w-11 h-11 ring-accent-200/10 focus:ring-accent-200/20 ring-8 hover:scale-110',
+    large: 'w-8 sm:w-11 h-8 sm:h-11 ring-accent-200/10 focus:ring-accent-200/20 ring-4 sm:ring-8 hover:scale-110',
 };
 const iconClass = {
    base: 'w-3.5 h-3.5',
-    large: 'w-4 h-4',
+    large: 'w-3.5 h-3.5 sm:w-4 sm:h-4',
 };

 const buttonColorClasses = computed(() => {
--- a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
@@ -10,13 +10,13 @@ import {
 </script>

 <template>
-    <div class="px-3.5 py-2 flex @container">
+    <div class="px-3.5 py-2 flex justify-between @container">
        <div class="flex items-center">
            <p class="font-semibold text-sm text-white">
                {{ formatHumanReadableDate(date) }}
            </p>
        </div>
-        <div class="items-center justify-center flex-1 flex">
+        <div class="items-center justify-center flex-1 hidden @2xs:flex">
            <svg
                class="w-20 opacity-70 transition hover:opacity-100"
                viewBox="0 0 42 10"
--- a/resources/js/Components/Dashboard/ThisWeekOverview.vue
+++ b/resources/js/Components/Dashboard/ThisWeekOverview.vue
@@ -130,8 +130,9 @@ const option = ref({
 </script>

 <template>
-    <div class="grid gap-x-6 xl:gap-x-6 grid-cols-4">
-        <div class="col-span-3">
+    <div
+        class="grid space-y-5 sm:space-y-0 sm:gap-x-6 xl:gap-x-6 grid-cols-1 lg:grid-cols-3 xl:grid-cols-4">
+        <div class="col-span-2 xl:col-span-3">
            <CardTitle
                title="This Week"
                class="pb-8"
--- a/resources/js/Components/TimeTracker.vue
+++ b/resources/js/Components/TimeTracker.vue
@@ -152,9 +152,9 @@ function onTimeEntryEnterPress() {

 <template>
    <CardTitle title="Time Tracker" :icon="ClockIcon"></CardTitle>
-    <div class="flex items-center" data-testid="dashboard_timer">
+    <div class="flex items-center relative" data-testid="dashboard_timer">
        <div
-            class="flex w-full rounded-lg bg-card-background border-card-border border transition">
+            class="flex flex-col sm:flex-row w-full rounded-lg bg-card-background border-card-border border transition">
            <div class="flex-1 flex items-center pr-6">
                <input
                    placeholder="What are you working on?"
@@ -162,36 +162,40 @@ function onTimeEntryEnterPress() {
                    v-model="currentTimeEntry.description"
                    @keydown.enter="startTimerIfNotActive"
                    @blur="updateTimeEntry"
-                    class="w-full rounded-l-lg py-3 px-5 text-lg text-white focus:bg-card-background-active font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
+                    class="w-full rounded-l-lg py-2.5 px-3 border-b border-b-card-background-separator sm:px-4 text-sm sm:text-lg text-white focus:bg-card-background-active font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
                    type="text" />
            </div>
-            <div class="flex items-center">
-                <TimeTrackerProjectTaskDropdown
-                    @changed="updateTimeEntry"
-                    v-model:project="currentTimeEntry.project_id"
-                    v-model:task="
-                        currentTimeEntry.task_id
-                    "></TimeTrackerProjectTaskDropdown>
-            </div>
-            <div class="flex items-center space-x-2 px-4">
-                <TimeTrackerTagDropdown
-                    @changed="updateTimeEntry"
-                    v-model="currentTimeEntry.tags"></TimeTrackerTagDropdown>
-                <BillableToggleButton></BillableToggleButton>
-            </div>
-            <div class="border-l border-card-border">
-                <input
-                    placeholder="00:00:00"
-                    @focus="pauseLiveTimerUpdate"
-                    data-testid="time_entry_time"
-                    @blur="updateTimerAndStartLiveTimerUpdate"
-                    @keydown.enter="onTimeEntryEnterPress"
-                    v-model="currentTime"
-                    class="w-40 h-full text-white py-4 rounded-r-lg text-center px-4 text-lg font-bold bg-card-background border-none placeholder-muted focus:ring-0 transition focus:bg-card-background-active"
-                    type="text" />
+            <div class="flex items-center justify-between pl-2">
+                <div class="flex items-center w-[130px]">
+                    <TimeTrackerProjectTaskDropdown
+                        @changed="updateTimeEntry"
+                        v-model:project="currentTimeEntry.project_id"
+                        v-model:task="
+                            currentTimeEntry.task_id
+                        "></TimeTrackerProjectTaskDropdown>
+                </div>
+                <div class="flex items-center space-x-2 px-4">
+                    <TimeTrackerTagDropdown
+                        @changed="updateTimeEntry"
+                        v-model="
+                            currentTimeEntry.tags
+                        "></TimeTrackerTagDropdown>
+                    <BillableToggleButton></BillableToggleButton>
+                </div>
+                <div class="border-l border-card-border">
+                    <input
+                        placeholder="00:00:00"
+                        @focus="pauseLiveTimerUpdate"
+                        data-testid="time_entry_time"
+                        @blur="updateTimerAndStartLiveTimerUpdate"
+                        @keydown.enter="onTimeEntryEnterPress"
+                        v-model="currentTime"
+                        class="w-[110px] sm:w-[130px] h-full text-white py-2.5 rounded-r-lg text-center px-4 text-lg font-bold bg-card-background border-none placeholder-muted focus:ring-0 transition focus:bg-card-background-active"
+                        type="text" />
+                </div>
            </div>
        </div>
-        <div class="pl-6 pr-3">
+        <div class="pl-6 pr-3 absolute sm:relative top-[7px] right-0">
            <TimeTrackerStartStop
                :active="isActive"
                @changed="onToggleButtonPress"