diff --git a/src/pages/views/commcoach/CommcoachDashboardView.module.css b/src/pages/views/commcoach/CommcoachDashboardView.module.css index 54899b2..0cd3f8c 100644 --- a/src/pages/views/commcoach/CommcoachDashboardView.module.css +++ b/src/pages/views/commcoach/CommcoachDashboardView.module.css @@ -149,3 +149,90 @@ font-size: 0.9rem; line-height: 1.6; } + +/* ============================================================ */ +/* MOBILE RESPONSIVE */ +/* ============================================================ */ +@media (max-width: 768px) { + .dashboard { + padding: 0.75rem; + } + .kpiGrid { + grid-template-columns: repeat(2, 1fr); + gap: 0.75rem; + } + .kpiCard { + padding: 0.85rem; + } + .kpiValue { + font-size: 1.5rem; + } + .contextGrid { + grid-template-columns: 1fr; + } + .badgeGrid { + gap: 0.5rem; + } + .badgeCard { + padding: 0.4rem 0.7rem; + font-size: 0.8rem; + } +} + +@media (max-width: 400px) { + .kpiGrid { + grid-template-columns: 1fr 1fr; + gap: 0.5rem; + } + .kpiCard { + padding: 0.65rem; + border-radius: 8px; + } + .kpiValue { + font-size: 1.25rem; + } + .kpiLabel { + font-size: 0.75rem; + } +} + +.newTopicBtn { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.6rem 1.25rem; + background: var(--primary-color, #F25843); + color: #fff; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 0.85rem; + font-weight: 500; +} + +.newTopicBtn:hover { filter: brightness(1.08); } + +@media (max-width: 768px) { + .dashboard { padding: 0.75rem; } + + .kpiGrid { + grid-template-columns: repeat(2, 1fr); + gap: 0.65rem; + } + + .kpiCard { padding: 0.9rem; } + .kpiValue { font-size: 1.5rem; } + .kpiLabel { font-size: 0.78rem; } + .kpiSub { font-size: 0.7rem; } + + .contextGrid { + grid-template-columns: 1fr; + gap: 0.65rem; + } + + .badgeGrid { gap: 0.5rem; } + .badgeCard { padding: 0.4rem 0.65rem; font-size: 0.8rem; } + + .sectionTitle { font-size: 1rem; } + .tipCard { padding: 0.9rem; font-size: 0.85rem; } +} diff --git a/src/pages/views/commcoach/CommcoachDashboardView.tsx b/src/pages/views/commcoach/CommcoachDashboardView.tsx index 72dc546..466d55d 100644 --- a/src/pages/views/commcoach/CommcoachDashboardView.tsx +++ b/src/pages/views/commcoach/CommcoachDashboardView.tsx @@ -25,6 +25,12 @@ export const CommcoachDashboardView: React.FC = () => { } }; + const _handleNewTopic = useCallback(() => { + if (mandateId && instanceId) { + navigate(`/mandates/${mandateId}/commcoach/${instanceId}/coaching?newContext=true`); + } + }, [mandateId, instanceId, navigate]); + const _categoryLabel = useCallback( (category: string) => { const labels: Record = { @@ -88,11 +94,16 @@ export const CommcoachDashboardView: React.FC = () => { {/* Active Contexts */}
-

{t('Aktive Coaching-Themen')}

+
+

{t('Aktive Coaching-Themen')}

+ +
{dashboard.contexts.length === 0 ? (

{t('Noch keine Coaching-Themen angelegt.')}

-

{t('Wechseln Sie zum Tab Coaching, um ein Thema anzulegen.')}

+

{t('Klicken Sie auf "Neues Thema" um zu starten.')}

) : (
diff --git a/src/pages/views/commcoach/CommcoachDossierView.module.css b/src/pages/views/commcoach/CommcoachDossierView.module.css index 459578d..09b56bb 100644 --- a/src/pages/views/commcoach/CommcoachDossierView.module.css +++ b/src/pages/views/commcoach/CommcoachDossierView.module.css @@ -22,6 +22,21 @@ min-width: 36px; } +@media (max-width: 768px) { + .dossierLayout { + flex-direction: column; + height: calc(100vh - var(--mobile-topbar-height, 56px)); + } + + .udbSidebar { + display: none; + } + + .udbSidebarCollapsed { + display: none; + } +} + .udbToggle { position: absolute; top: 8px; @@ -51,9 +66,17 @@ flex-direction: column; flex: 1; min-width: 0; + min-height: 0; overflow: hidden; } +@media (max-width: 768px) { + .dossier { + overflow-y: auto; + overflow-x: hidden; + } +} + /* Context Selector */ .contextSelector { display: flex; @@ -65,6 +88,29 @@ align-items: center; } +@media (max-width: 768px) { + .contextSelector { + flex-wrap: nowrap; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + padding: 0.5rem 0.75rem; + } + .contextSelector::-webkit-scrollbar { display: none; } +} + +@media (max-width: 768px) { + .contextSelector { + flex-wrap: nowrap; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding: 0.5rem 0.75rem; + gap: 0.4rem; + scrollbar-width: none; + } + .contextSelector::-webkit-scrollbar { display: none; } +} + .contextChip { display: flex; align-items: center; @@ -166,6 +212,31 @@ flex-shrink: 0; } +@media (max-width: 768px) { + .header { + flex-direction: column; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + } + .headerActions { + flex-wrap: wrap; + } +} + +@media (max-width: 768px) { + .header { + flex-direction: column; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + } + .headerActions { + width: 100%; + justify-content: flex-start; + flex-wrap: wrap; + } + .title { font-size: 1.1rem; } +} + .title { font-size: 1.3rem; font-weight: 600; @@ -273,6 +344,36 @@ padding: 0 1rem; } +@media (max-width: 768px) { + .tabs { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + padding: 0 0.5rem; + } + .tabs::-webkit-scrollbar { display: none; } + .tab { + white-space: nowrap; + padding: 0.5rem 0.75rem; + font-size: 0.8rem; + } +} + +@media (max-width: 768px) { + .tabs { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding: 0 0.5rem; + scrollbar-width: none; + } + .tabs::-webkit-scrollbar { display: none; } + .tab { + white-space: nowrap; + padding: 0.5rem 0.9rem; + font-size: 0.8rem; + } +} + .tab { padding: 0.6rem 1.25rem; background: transparent; @@ -325,6 +426,12 @@ .personaSelector { margin-bottom: 1rem; } .personaLabel { font-size: 0.85rem; font-weight: 500; color: var(--text-primary, #333); display: block; margin-bottom: 0.5rem; } .personaGrid { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } + +@media (max-width: 768px) { + .personaGrid { gap: 0.35rem; } + .personaChip { font-size: 0.75rem; padding: 0.3rem 0.6rem; } + .sessionStart { padding: 1rem; } +} .personaChip { display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.8rem; @@ -350,6 +457,17 @@ .sessionLabel { font-size: 0.85rem; font-weight: 500; color: var(--text-primary, #333); } .sessionActions { display: flex; gap: 0.5rem; } +@media (max-width: 768px) { + .sessionHeader { + flex-wrap: wrap; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + } + .sessionActions { + flex-wrap: wrap; + } +} + /* Messages */ .messages { flex: 1; @@ -361,9 +479,25 @@ } .message { max-width: 80%; } + +@media (max-width: 768px) { + .message { max-width: 92%; } + .messages { padding: 0.75rem 0.5rem; gap: 0.5rem; } +} .messageUser { align-self: flex-end; } .messageAssistant { align-self: flex-start; } +@media (max-width: 768px) { + .message { max-width: 92%; } + .messages { padding: 0.75rem; gap: 0.5rem; } + .sessionHeader { + flex-wrap: wrap; + gap: 0.4rem; + padding: 0.4rem 0.75rem; + } + .sessionActions { flex-wrap: wrap; gap: 0.3rem; } +} + .messageBubble { padding: 0.75rem 1rem; border-radius: 12px; @@ -528,6 +662,25 @@ .textInputRow { display: flex; gap: 0.5rem; align-items: flex-end; } +@media (max-width: 768px) { + .inputArea { + padding: 0.5rem 0.5rem calc(env(safe-area-inset-bottom, 0px) + 0.5rem); + } + .textInputRow { + gap: 0.35rem; + } + .sendBtn { + padding: 0.5rem 0.75rem; + font-size: 0.8rem; + } +} + +@media (max-width: 768px) { + .inputArea { padding: 0.5rem 0.75rem; } + .textInputRow { gap: 0.35rem; } + .sendBtn { padding: 0.5rem 0.75rem; font-size: 0.8rem; } +} + .textInput { flex: 1; min-width: 0; padding: 0.6rem 0.75rem; diff --git a/src/pages/views/commcoach/CommcoachDossierView.tsx b/src/pages/views/commcoach/CommcoachDossierView.tsx index b4ca96c..24c12a6 100644 --- a/src/pages/views/commcoach/CommcoachDossierView.tsx +++ b/src/pages/views/commcoach/CommcoachDossierView.tsx @@ -7,6 +7,7 @@ */ import React, { useState, useRef, useCallback, useEffect } from 'react'; +import { useSearchParams } from 'react-router-dom'; import { useCommcoach } from '../../../hooks/useCommcoach'; import { type TtsEvent } from '../../../hooks/useTtsPlayback'; import { useApiRequest } from '../../../hooks/useApi'; @@ -73,6 +74,7 @@ export const CommcoachDossierView: React.FC = ({ pers const mandateId = persistentMandateId || routeMandateId; const coach = useCommcoach(instanceId); const { request } = useApiRequest(); + const [searchParams, setSearchParams] = useSearchParams(); const [activeTab, setActiveTab] = useState('coaching'); const [showNewContext, setShowNewContext] = useState(false); @@ -144,6 +146,14 @@ export const CommcoachDossierView: React.FC = ({ pers } }, [coach.contexts, coach.selectedContextId, coach.selectContext]); + useEffect(() => { + if (searchParams.get('newContext') === 'true') { + setShowNewContext(true); + searchParams.delete('newContext'); + setSearchParams(searchParams, { replace: true }); + } + }, [searchParams, setSearchParams]); + // Load scores, personas when context changes useEffect(() => { if (!instanceId || !coach.selectedContextId) return; diff --git a/src/pages/views/commcoach/CommcoachKeepAlive.tsx b/src/pages/views/commcoach/CommcoachKeepAlive.tsx index cdf19c5..81f1ae0 100644 --- a/src/pages/views/commcoach/CommcoachKeepAlive.tsx +++ b/src/pages/views/commcoach/CommcoachKeepAlive.tsx @@ -41,7 +41,6 @@ export const CommcoachKeepAlive: React.FC = ({ isVisibl left: 0, right: 0, bottom: 0, - overflow: 'hidden', }} >