From e3915aee9ed37c5c62a2b865b151af0cac87bfd0 Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Thu, 12 Feb 2026 22:37:10 +0700 Subject: [PATCH] feat: Implement mobile responsiveness for marketing pages with adaptive layouts and a sidebar toggle. --- .../Layout/MarketingLayout.razor | 4 + .../Pages/Marketing/AiChatbot.razor | 8 +- .../Pages/Marketing/AiContentStudio.razor | 2 +- .../Pages/Marketing/AnalyticsDashboard.razor | 4 +- .../Pages/Marketing/ChatbotAutomation.razor | 8 +- .../Pages/Marketing/SocialHub.razor | 2 +- .../wwwroot/css/marketing.css | 221 +++++++++++++++++- 7 files changed, 227 insertions(+), 22 deletions(-) diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Layout/MarketingLayout.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Layout/MarketingLayout.razor index 58d1812a..80f69f63 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Layout/MarketingLayout.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Layout/MarketingLayout.razor @@ -80,6 +80,10 @@ @* ═══ MAIN AREA / VÙNG NỘI DUNG ═══ *@
+ @* Mobile toggle button — visible only on ≤768px *@ + @Body
diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiChatbot.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiChatbot.razor index 54564670..5e757e38 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiChatbot.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiChatbot.razor @@ -10,9 +10,9 @@ AI Chatbot — tMarketing -
+
@* ═══ LEFT: Scenario List ═══ *@ -
+
@@ -48,7 +48,7 @@
@* ═══ CENTER: Scenario Detail ═══ *@ -
+
@* Header *@
@@ -68,7 +68,7 @@
@* Scenario content *@ -
+
@* Training Data Panel *@
diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiContentStudio.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiContentStudio.razor index 0d3ee402..a2405d89 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiContentStudio.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiContentStudio.razor @@ -29,7 +29,7 @@
@* ═══ CONTENT ═══ *@ -
+
@* ── LEFT: Calendar + Upcoming ── *@
@* Content Calendar *@ diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AnalyticsDashboard.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AnalyticsDashboard.razor index 771acc00..b5a29ecf 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AnalyticsDashboard.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AnalyticsDashboard.razor @@ -52,7 +52,7 @@
@* ── ROW 2: Engagement Chart + Top Content ── *@ -
+
@* Engagement Chart (placeholder) *@
@@ -113,7 +113,7 @@
-
+
@foreach (var channel in _channelPerf) {
diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/ChatbotAutomation.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/ChatbotAutomation.razor index 1653b0f5..0a158653 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/ChatbotAutomation.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/ChatbotAutomation.razor @@ -10,9 +10,9 @@ Chatbot Automation — tMarketing -
+
@* ═══ LEFT: Flow List ═══ *@ -
+
@@ -41,7 +41,7 @@
@* ═══ CENTER: Flow Builder Canvas ═══ *@ -
+
@* Header *@
@@ -101,7 +101,7 @@
@* ═══ RIGHT: Node Palette ═══ *@ -
+
ADD NODE diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/SocialHub.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/SocialHub.razor index 925084b1..8ff370a0 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/SocialHub.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/SocialHub.razor @@ -31,7 +31,7 @@ @* ═══ CONTENT ═══ *@
@* ── ROW 1: Platform Status + Quick Actions ── *@ -
+
@* Platform Status *@
diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/css/marketing.css b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/css/marketing.css index 61319861..bb6f0e4d 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/css/marketing.css +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/css/marketing.css @@ -585,7 +585,24 @@ display: none; } +/* ── Mobile hamburger button ── */ +.mkt-mobile-toggle { + display: none; + width: 36px; + height: 36px; + border-radius: 6px; + background: var(--mkt-bg-card); + border: 1px solid var(--mkt-border); + color: var(--mkt-text-primary); + align-items: center; + justify-content: center; + cursor: pointer; + flex-shrink: 0; +} + @media (max-width: 768px) { + + /* ── Sidebar hide/show ── */ .mkt-sidebar { position: fixed; left: -260px; @@ -607,27 +624,211 @@ z-index: 999; } - .mkt-kpi-row { + .mkt-mobile-toggle { + display: flex; + } + + /* ── Topbar ── */ + .mkt-topbar { + padding: 12px 16px; + gap: 8px; + } + + .mkt-topbar__title { + font-size: 16px; + } + + .mkt-topbar__subtitle { + font-size: 11px; + } + + .mkt-topbar__right { flex-wrap: wrap; + gap: 6px; + } + + /* ── Content area ── */ + .mkt-content { + padding: 0 12px 16px; + gap: 16px; + } + + /* ── KPI row → 2x2 grid ── */ + .mkt-kpi-row { + display: grid !important; + grid-template-columns: 1fr 1fr; + gap: 10px !important; } .mkt-kpi-card { - min-width: calc(50% - 8px); + min-width: 0; } - .mkt-topbar { - padding: 16px; + .mkt-kpi-card__value { + font-size: 20px; } - .mkt-content { - padding: 0 16px 16px; + /* ── Table → horizontal scroll ── */ + .mkt-panel:has(.mkt-table) .mkt-panel__body, + .mkt-table-wrap { + overflow-x: auto; + -webkit-overflow-scrolling: touch; } - .mkt-chat-info { - display: none; + .mkt-table { + min-width: 600px; + } + + /* ── Search → smaller ── */ + .mkt-search { + min-width: 120px; + } + + /* ═══ LIVECHAT — single column ═══ */ + .mkt-chat-layout { + flex-direction: column !important; } .mkt-chat-list { - width: 100%; + width: 100% !important; + max-height: 220px; + border-right: none !important; + border-bottom: 1px solid var(--mkt-border); } -} + + .mkt-chat-main { + min-height: 300px; + } + + .mkt-chat-info { + display: none !important; + } + + /* ═══ SOCIAL HUB — stack sections ═══ */ + .mkt-hub-columns { + flex-direction: column !important; + gap: 16px !important; + } + + .mkt-hub-columns>div { + width: 100% !important; + } + + .mkt-platform-grid { + flex-direction: column !important; + gap: 10px !important; + } + + .mkt-platform-grid>div { + width: 100% !important; + } + + /* ═══ AI CONTENT STUDIO — stack calendar + AI panel ═══ */ + .mkt-content-split { + flex-direction: column !important; + padding: 0 12px 16px !important; + } + + .mkt-content-split>div { + width: 100% !important; + padding-right: 0 !important; + } + + .mkt-calendar-grid { + font-size: 11px; + } + + /* ═══ ANALYTICS — stack chart + top content ═══ */ + .mkt-analytics-row { + flex-direction: column !important; + gap: 16px !important; + } + + .mkt-analytics-row>.mkt-panel { + width: 100% !important; + flex: none !important; + } + + .mkt-channel-cards { + flex-direction: column !important; + gap: 10px !important; + } + + .mkt-channel-cards>div { + width: 100% !important; + } + + /* ═══ CHATBOT — stack flows + canvas ═══ */ + .mkt-chatbot-layout { + flex-direction: column !important; + } + + .mkt-chatbot-layout>.mkt-flow-list { + width: 100% !important; + max-height: 200px; + border-right: none !important; + border-bottom: 1px solid var(--mkt-border); + overflow-y: auto; + } + + .mkt-chatbot-layout>.mkt-flow-canvas { + min-height: 300px; + } + + .mkt-node-palette { + position: static !important; + width: 100% !important; + right: auto !important; + top: auto !important; + bottom: auto !important; + display: flex !important; + flex-direction: row !important; + overflow-x: auto !important; + gap: 8px !important; + padding: 12px !important; + border-top: 1px solid var(--mkt-border); + } + + .mkt-node-palette>div { + min-width: 140px; + flex-shrink: 0; + } + + /* ═══ AI CHATBOT — stack scenarios + panels ═══ */ + .mkt-aibot-layout { + flex-direction: column !important; + } + + .mkt-aibot-layout>.mkt-scenario-list { + width: 100% !important; + max-height: 200px; + border-right: none !important; + border-bottom: 1px solid var(--mkt-border); + overflow-y: auto; + } + + .mkt-aibot-layout>.mkt-aibot-main { + width: 100% !important; + } + + .mkt-aibot-panels { + flex-direction: column !important; + gap: 16px !important; + } + + .mkt-aibot-panels>div { + width: 100% !important; + } + + /* ═══ Panel footer actions → wrap ═══ */ + .mkt-panel-footer { + flex-wrap: wrap; + gap: 8px; + } + + .mkt-panel-footer .mkt-btn-ghost, + .mkt-panel-footer .mkt-btn-primary { + font-size: 11px; + padding: 6px 10px; + } +} \ No newline at end of file