Fix metrics button missing from mobile (#637)

2025-12-03 11:59:14 +02:00 · 2025-12-03 11:59:14 +02:00 · 3ee20711da
commit 3ee20711da
parent be9b8915d5
28 changed files with 95 additions and 42 deletions
--- a/frontend/components/Project/ProjectDetails.tsx
+++ b/frontend/components/Project/ProjectDetails.tsx
@ -91,11 +91,14 @@ const ProjectDetails: React.FC = () => {
        () => [
            {
                value: 'status:inProgressFirst',
-                label: t('tasks.status', 'Status'),
+                label: t('sort.status', 'Status'),
            },
-            { value: 'created_at:desc', label: 'Created at' },
-            { value: 'due_date:asc', label: 'Due date' },
-            { value: 'priority:desc', label: 'Priority' },
+            {
+                value: 'created_at:desc',
+                label: t('sort.created_at', 'Created At'),
+            },
+            { value: 'due_date:asc', label: t('sort.due_date', 'Due Date') },
+            { value: 'priority:desc', label: t('sort.priority', 'Priority') },
        ],
        [t]
    );
@ -900,11 +903,11 @@ const ProjectDetails: React.FC = () => {
            <div className="w-full px-4 sm:px-6 lg:px-10">
                <div className="w-full">
                    <div className="mb-4">
-                        <div className="hidden sm:flex items-center justify-between min-h-[2.5rem]">
-                            <div className="flex items-center space-x-6">
+                        <div className="flex items-center justify-between min-h-[2.5rem]">
+                            <div className="flex items-center space-x-3 sm:space-x-6">
                                <button
                                    onClick={() => setActiveTab('tasks')}
-                                    className={`flex items-center space-x-2 text-sm font-medium transition-colors ${
+                                    className={`flex items-center space-x-1 sm:space-x-2 text-xs sm:text-sm font-medium transition-colors ${
                                        activeTab === 'tasks'
                                            ? 'text-gray-900 dark:text-gray-100'
                                            : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
@ -912,14 +915,14 @@ const ProjectDetails: React.FC = () => {
                                >
                                    <span>{t('sidebar.tasks', 'Tasks')}</span>
                                    {displayTasks.length > 0 && (
-                                        <span className="ml-2 px-2 py-0.5 text-xs bg-gray-200 dark:bg-gray-600 rounded-full">
+                                        <span className="ml-1 sm:ml-2 px-1.5 sm:px-2 py-0.5 text-xs bg-gray-200 dark:bg-gray-600 rounded-full">
                                            {displayTasks.length}
                                        </span>
                                    )}
                                </button>
                                <button
                                    onClick={() => setActiveTab('notes')}
-                                    className={`flex items-center space-x-2 text-sm font-medium transition-colors ${
+                                    className={`flex items-center space-x-1 sm:space-x-2 text-xs sm:text-sm font-medium transition-colors ${
                                        activeTab === 'notes'
                                            ? 'text-gray-900 dark:text-gray-100'
                                            : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
@ -927,7 +930,7 @@ const ProjectDetails: React.FC = () => {
                                >
                                    <span>{t('sidebar.notes', 'Notes')}</span>
                                    {notes.length > 0 && (
-                                        <span className="ml-2 px-2 py-0.5 text-xs bg-gray-200 dark:bg-gray-600 rounded-full">
+                                        <span className="ml-1 sm:ml-2 px-1.5 sm:px-2 py-0.5 text-xs bg-gray-200 dark:bg-gray-600 rounded-full">
                                            {notes.length}
                                        </span>
                                    )}
@ -935,10 +938,10 @@ const ProjectDetails: React.FC = () => {
                            </div>

                            {activeTab === 'tasks' && (
-                                <div className="flex items-center gap-4">
+                                <div className="flex items-center justify-end gap-2 sm:gap-4">
                                    <button
                                        onClick={toggleMetrics}
-                                        className={`flex items-center transition-all duration-300 focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset rounded-lg p-2 ${
+                                        className={`flex items-center transition-all duration-300 focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset rounded-lg p-1.5 sm:p-2 ${
                                            showMetrics
                                                ? 'bg-blue-100 dark:bg-blue-900/30 shadow-sm'
                                                : 'bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700'
@ -968,7 +971,7 @@ const ProjectDetails: React.FC = () => {
                                        }
                                    >
                                        <ChartBarIcon
-                                            className={`h-5 w-5 ${
+                                            className={`h-4 w-4 sm:h-5 sm:w-5 ${
                                                showMetrics
                                                    ? 'text-blue-600 dark:text-blue-200'
                                                    : 'text-gray-600 dark:text-gray-200'
@ -979,7 +982,7 @@ const ProjectDetails: React.FC = () => {
                                        onClick={() =>
                                            setIsSearchExpanded((v) => !v)
                                        }
-                                        className={`flex items-center transition-all duration-300 focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset rounded-lg p-2 ${
+                                        className={`flex items-center transition-all duration-300 focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset rounded-lg p-1.5 sm:p-2 ${
                                            isSearchExpanded
                                                ? 'bg-blue-50/70 dark:bg-blue-900/20'
                                                : 'bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700'
@ -991,7 +994,7 @@ const ProjectDetails: React.FC = () => {
                                                : 'Show search input'
                                        }
                                    >
-                                        <MagnifyingGlassIcon className="h-5 w-5 text-gray-600 dark:text-gray-200" />
+                                        <MagnifyingGlassIcon className="h-4 w-4 sm:h-5 sm:w-5 text-gray-600 dark:text-gray-200" />
                                    </button>
                                    <IconSortDropdown
                                        options={sortOptions}
--- a/frontend/components/Shared/IconSortDropdown.tsx
+++ b/frontend/components/Shared/IconSortDropdown.tsx
@ -56,11 +56,11 @@ const IconSortDropdown: React.FC<IconSortDropdownProps> = ({
            <button
                type="button"
                onClick={() => setIsOpen((prev) => !prev)}
-                className={`p-1 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors ${buttonClassName}`}
+                className={`p-1.5 sm:p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors ${buttonClassName}`}
                aria-label={ariaLabel}
                title={title}
            >
-                <ListBulletIcon className="h-5 w-5" />
+                <ListBulletIcon className="h-4 w-4 sm:h-5 sm:w-5" />
            </button>
            {isOpen && (
                <div
--- a/frontend/components/Task/TaskHeader.tsx
+++ b/frontend/components/Task/TaskHeader.tsx
@ -579,7 +579,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
                    </div>

                    {/* Task content - full width */}
-                    <div className="ml-2 flex-1 min-w-0">
+                    <div className="ml-3 flex-1 min-w-0">
                        {/* Task Title */}
                        <div className="font-light text-md text-gray-900 dark:text-gray-300 dark:font-extralight">
                            <span className="break-words">
--- a/public/locales/ar/translation.json
+++ b/public/locales/ar/translation.json
@ -143,7 +143,9 @@
    "tasks": "مهام",
    "showingItems": "عرض {{current}} من {{total}} عنصر",
    "overdue": "متأخر",
-    "planned": "مخطط"
+    "planned": "مخطط",
+    "open": "فتح",
+    "completed": "مكتمل"
  },
  "timeline": {
    "activityTimeline": "جدول الأنشطة",
--- a/public/locales/bg/translation.json
+++ b/public/locales/bg/translation.json
@ -143,7 +143,9 @@
    "tasks": "задачи",
    "showingItems": "Показване на {{current}} от {{total}} елемента",
    "overdue": "Просрочено",
-    "planned": "Планирано"
+    "planned": "Планирано",
+    "open": "Отвори",
+    "completed": "Завършено"
  },
  "timeline": {
    "activityTimeline": "Хронология на активността",
--- a/public/locales/da/translation.json
+++ b/public/locales/da/translation.json
@ -143,7 +143,9 @@
    "tasks": "opgaver",
    "showingItems": "Viser {{current}} af {{total}} elementer",
    "overdue": "Forsinket",
-    "planned": "Planlagt"
+    "planned": "Planlagt",
+    "open": "Åbn",
+    "completed": "Fuldført"
  },
  "timeline": {
    "activityTimeline": "Aktivitets Tidslinje",
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@ -143,7 +143,9 @@
    "noProject": "Kein Projekt",
    "unknownProject": "Unbekanntes Projekt",
    "tasks": "Aufgaben",
-    "showingItems": "{{current}} von {{total}} Elementen angezeigt"
+    "showingItems": "{{current}} von {{total}} Elementen angezeigt",
+    "open": "Öffnen",
+    "completed": "Abgeschlossen"
  },
  "timeline": {
    "activityTimeline": "Aktivitätsverlauf",
--- a/public/locales/el/translation.json
+++ b/public/locales/el/translation.json
@ -356,7 +356,9 @@
    "tasks": "εργασίες",
    "showingItems": "Εμφάνιση {{current}} από {{total}} στοιχεία",
    "overdue": "Υπερβολικό",
-    "planned": "Προγραμματισμένο"
+    "planned": "Προγραμματισμένο",
+    "open": "Άνοιγμα",
+    "completed": "Ολοκληρώθηκε"
  },
  "timeline": {
    "activityTimeline": "Χρονοδιάγραμμα Δραστηριότητας",
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@ -137,7 +137,9 @@
      "none": "None"
    },
    "show": "Show",
+    "open": "Open",
    "all": "All",
+    "completed": "Completed",
    "completedOnly": "Completed only",
    "notCompleted": "Not completed",
    "noProject": "No project",
--- a/public/locales/es/translation.json
+++ b/public/locales/es/translation.json
@ -356,7 +356,9 @@
    "noProject": "Sin proyecto",
    "unknownProject": "Proyecto desconocido",
    "tasks": "tareas",
-    "showingItems": "Mostrando {{current}} de {{total}} elementos"
+    "showingItems": "Mostrando {{current}} de {{total}} elementos",
+    "open": "Abrir",
+    "completed": "Completado"
  },
  "timeline": {
    "activityTimeline": "Línea de Tiempo de Actividad",
--- a/public/locales/fi/translation.json
+++ b/public/locales/fi/translation.json
@ -143,7 +143,9 @@
    "tasks": "tehtävät",
    "showingItems": "Näytetään {{current}} / {{total}} kohdetta",
    "overdue": "Erääntynyt",
-    "planned": "Suunniteltu"
+    "planned": "Suunniteltu",
+    "open": "Avaa",
+    "completed": "Valmis"
  },
  "timeline": {
    "activityTimeline": "Toiminta-aikajana",
--- a/public/locales/fr/translation.json
+++ b/public/locales/fr/translation.json
@ -143,7 +143,9 @@
    "noProject": "Aucun projet",
    "unknownProject": "Projet inconnu",
    "tasks": "tâches",
-    "showingItems": "Affichage de {{current}} sur {{total}} éléments"
+    "showingItems": "Affichage de {{current}} sur {{total}} éléments",
+    "open": "Ouvrir",
+    "completed": "Terminé"
  },
  "timeline": {
    "activityTimeline": "Chronologie d'Activité",
--- a/public/locales/id/translation.json
+++ b/public/locales/id/translation.json
@ -143,7 +143,9 @@
    "tasks": "tugas",
    "showingItems": "Menampilkan {{current}} dari {{total}} item",
    "overdue": "Terlambat",
-    "planned": "Direncanakan"
+    "planned": "Direncanakan",
+    "open": "Buka",
+    "completed": "Selesai"
  },
  "timeline": {
    "activityTimeline": "Garis Waktu Aktivitas",
--- a/public/locales/it/translation.json
+++ b/public/locales/it/translation.json
@ -143,7 +143,9 @@
    "tasks": "attività",
    "showingItems": "Visualizzazione di {{current}} su {{total}} elementi",
    "overdue": "Scaduto",
-    "planned": "Pianificato"
+    "planned": "Pianificato",
+    "open": "Apri",
+    "completed": "Completato"
  },
  "timeline": {
    "activityTimeline": "Timeline delle Attività",
--- a/public/locales/jp/translation.json
+++ b/public/locales/jp/translation.json
@ -143,7 +143,9 @@
    "tasks": "タスク",
    "showingItems": "{{total}}件中{{current}}件を表示",
    "overdue": "期限切れ",
-    "planned": "計画中"
+    "planned": "計画中",
+    "open": "開く",
+    "completed": "完了"
  },
  "timeline": {
    "activityTimeline": "アクティビティタイムライン",
--- a/public/locales/ko/translation.json
+++ b/public/locales/ko/translation.json
@ -143,7 +143,9 @@
    "tasks": "작업",
    "showingItems": "{{total}}개 중 {{current}}개 표시",
    "overdue": "연체",
-    "planned": "계획됨"
+    "planned": "계획됨",
+    "open": "열기",
+    "completed": "완료됨"
  },
  "timeline": {
    "activityTimeline": "활동 타임라인",
--- a/public/locales/nl/translation.json
+++ b/public/locales/nl/translation.json
@ -143,7 +143,9 @@
    "tasks": "taken",
    "showingItems": "{{current}} van {{total}} items weergegeven",
    "overdue": "Te laat",
-    "planned": "Gepland"
+    "planned": "Gepland",
+    "open": "Open",
+    "completed": "Voltooid"
  },
  "timeline": {
    "activityTimeline": "Activiteit Tijdlijn",
--- a/public/locales/no/translation.json
+++ b/public/locales/no/translation.json
@ -143,7 +143,9 @@
    "tasks": "oppgaver",
    "showingItems": "Viser {{current}} av {{total}} elementer",
    "overdue": "Forsinket",
-    "planned": "Planlagt"
+    "planned": "Planlagt",
+    "open": "Åpne",
+    "completed": "Fullført"
  },
  "timeline": {
    "activityTimeline": "Aktivitetslinje",
--- a/public/locales/pl/translation.json
+++ b/public/locales/pl/translation.json
@ -143,7 +143,9 @@
    "tasks": "zadania",
    "showingItems": "Wyświetlanie {{current}} z {{total}} elementów",
    "overdue": "Przeterminowane",
-    "planned": "Zaplanowane"
+    "planned": "Zaplanowane",
+    "open": "Otwórz",
+    "completed": "Zakończone"
  },
  "timeline": {
    "activityTimeline": "Oś czasu aktywności",
--- a/public/locales/pt/translation.json
+++ b/public/locales/pt/translation.json
@ -143,7 +143,9 @@
    "tasks": "tarefas",
    "showingItems": "Mostrando {{current}} de {{total}} itens",
    "overdue": "Atrasado",
-    "planned": "Planejado"
+    "planned": "Planejado",
+    "open": "Abrir",
+    "completed": "Concluído"
  },
  "timeline": {
    "activityTimeline": "Linha do Tempo de Atividades",
--- a/public/locales/ro/translation.json
+++ b/public/locales/ro/translation.json
@ -143,7 +143,9 @@
    "tasks": "sarcini",
    "showingItems": "Se afișează {{current}} din {{total}} elemente",
    "overdue": "Întârziat",
-    "planned": "Planificat"
+    "planned": "Planificat",
+    "open": "Deschide",
+    "completed": "Finalizat"
  },
  "timeline": {
    "activityTimeline": "Cronologia activităților",
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@ -143,7 +143,9 @@
    "tasks": "задачи",
    "showingItems": "Показано {{current}} из {{total}} элементов",
    "overdue": "Просрочено",
-    "planned": "Запланировано"
+    "planned": "Запланировано",
+    "open": "Открыть",
+    "completed": "Завершено"
  },
  "timeline": {
    "activityTimeline": "Хронология активности",
--- a/public/locales/sl/translation.json
+++ b/public/locales/sl/translation.json
@ -143,7 +143,9 @@
    "tasks": "naloge",
    "showingItems": "Prikazovanje {{current}} od {{total}} elementov",
    "overdue": "Zapadlo",
-    "planned": "Načrtovano"
+    "planned": "Načrtovano",
+    "open": "Odpri",
+    "completed": "Dokončano"
  },
  "timeline": {
    "activityTimeline": "Časovnica aktivnosti",
--- a/public/locales/sv/translation.json
+++ b/public/locales/sv/translation.json
@ -143,7 +143,9 @@
    "tasks": "uppgifter",
    "showingItems": "Visar {{current}} av {{total}} objekt",
    "overdue": "Förfallen",
-    "planned": "Planerad"
+    "planned": "Planerad",
+    "open": "Öppna",
+    "completed": "Avslutad"
  },
  "timeline": {
    "activityTimeline": "Aktivitetslinje",
--- a/public/locales/tr/translation.json
+++ b/public/locales/tr/translation.json
@ -143,7 +143,9 @@
    "tasks": "görevler",
    "showingItems": "{{total}} öğeden {{current}} tanesi gösteriliyor",
    "overdue": "Gecikmiş",
-    "planned": "Planlanmış"
+    "planned": "Planlanmış",
+    "open": "Aç",
+    "completed": "Tamamlandı"
  },
  "timeline": {
    "activityTimeline": "Etkinlik Zaman Çizelgesi",
--- a/public/locales/ua/translation.json
+++ b/public/locales/ua/translation.json
@ -143,7 +143,9 @@
    "tasks": "завдання",
    "showingItems": "Показано {{current}} з {{total}} елементів",
    "overdue": "Прострочено",
-    "planned": "Заплановано"
+    "planned": "Заплановано",
+    "open": "Відкрити",
+    "completed": "Завершено"
  },
  "timeline": {
    "activityTimeline": "Хронологія Активності",
--- a/public/locales/vi/translation.json
+++ b/public/locales/vi/translation.json
@ -143,7 +143,9 @@
    "tasks": "nhiệm vụ",
    "showingItems": "Hiển thị {{current}} trong số {{total}} mục",
    "overdue": "Quá hạn",
-    "planned": "Đã lên kế hoạch"
+    "planned": "Đã lên kế hoạch",
+    "open": "Mở",
+    "completed": "Đã hoàn thành"
  },
  "timeline": {
    "activityTimeline": "Dòng Thời Gian Hoạt Động",
--- a/public/locales/zh/translation.json
+++ b/public/locales/zh/translation.json
@ -143,7 +143,9 @@
    "tasks": "任务",
    "showingItems": "显示 {{current}} / {{total}} 项",
    "overdue": "逾期",
-    "planned": "计划中"
+    "planned": "计划中",
+    "open": "打开",
+    "completed": "已完成"
  },
  "timeline": {
    "activityTimeline": "活动时间线",