admin/pos-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance marketing page responsiveness by introducing new CSS classes, a mobile bar, and adapting layouts for chatbot, CRM, and AI chatbot on smaller screens.

Browse Source
This commit is contained in:
Ho Ngoc Hai
2026-02-12 23:44:39 +07:00
parent e3915aee9e
commit d4f0e1ca03
5 changed files with 92 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/web-client-tpos-net/src/WebClientTpos.Client/Layout/MarketingLayout.razor
View File

@@ -80,10 +80,13 @@
@* ═══ MAIN AREA / VÙNG NỘI DUNG ═══ *@
<main class="mkt-main">
@* Mobile toggle button — visible only on ≤768px *@
<button class="mkt-mobile-toggle" @onclick="ToggleSidebar" style="position:fixed;top:12px;left:12px;z-index:998;">
<i data-lucide="menu"></i>
</button>
@* Mobile-only header bar — sits in doc flow above page content *@
<div class="mkt-mobile-bar">
<button class="mkt-mobile-toggle" @onclick="ToggleSidebar">
<i data-lucide="menu"></i>
</button>
<span class="mkt-mobile-bar__title">tMARKETING</span>
</div>
@Body
</main>
</div>

2
apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiChatbot.razor
View File

@@ -123,7 +123,7 @@
</div>
@* ═══ RIGHT: Test Chat ═══ *@
<div style="width:280px;background:var(--mkt-bg-card);border-left:1px solid var(--mkt-border);display:flex;flex-direction:column;">
<div class="mkt-aibot-test-chat" style="width:280px;background:var(--mkt-bg-card);border-left:1px solid var(--mkt-border);display:flex;flex-direction:column;">
<div style="padding:16px;border-bottom:1px solid var(--mkt-border);display:flex;align-items:center;gap:8px;">
<i data-lucide="message-square" style="width:16px;height:16px;color:var(--mkt-yellow-primary);"></i>
<span style="font-size:13px;font-weight:700;color:var(--mkt-text-primary);letter-spacing:0.5px;">TEST CHAT</span>

6
apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/ChatbotAutomation.razor
View File

@@ -61,7 +61,7 @@
</div>
@* Flow canvas *@
<div style="flex:1;display:flex;align-items:center;justify-content:center;gap:0;padding:40px;">
<div class="mkt-flow-canvas-nodes" style="flex:1;display:flex;align-items:center;justify-content:center;gap:0;padding:40px;">
@* Trigger Node *@
<div style="width:280px;padding:16px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:10px;display:flex;flex-direction:column;gap:8px;">
<div style="display:flex;align-items:center;gap:8px;">
@@ -73,7 +73,7 @@
</div>
@* Connector *@
<div style="width:40px;height:2px;background:var(--mkt-border);"></div>
<div class="mkt-flow-connector" style="width:40px;height:2px;background:var(--mkt-border);"></div>
@* Action Node *@
<div style="width:280px;padding:16px;background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);border-radius:10px;display:flex;flex-direction:column;gap:8px;">
@@ -86,7 +86,7 @@
</div>
@* Connector *@
<div style="width:40px;height:2px;background:var(--mkt-border);"></div>
<div class="mkt-flow-connector" style="width:40px;height:2px;background:var(--mkt-border);"></div>
@* Condition Node *@
<div style="width:280px;padding:16px;background:rgba(250,204,21,0.08);border:1px solid rgba(250,204,21,0.2);border-radius:10px;display:flex;flex-direction:column;gap:8px;">

2
apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/CustomerCrm.razor
View File

@@ -132,7 +132,7 @@
</div>
@* ── Bottom Actions + Pagination ── *@
<div style="display:flex;justify-content:space-between;align-items:center;">
<div class="mkt-crm-actions" style="display:flex;justify-content:space-between;align-items:center;">
<div style="display:flex;gap:8px;">
<button class="mkt-btn-ghost">
<i data-lucide="mail"></i>

83
apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/css/marketing.css
View File

@@ -600,6 +600,23 @@
flex-shrink: 0;
}
/* ── Mobile bar — hidden on desktop ── */
.mkt-mobile-bar {
display: none;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: var(--mkt-bg-card);
border-bottom: 1px solid var(--mkt-border);
}
.mkt-mobile-bar__title {
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
color: var(--mkt-yellow-primary);
}
@media (max-width: 768px) {
/* ── Sidebar hide/show ── */
@@ -628,18 +645,28 @@
display: flex;
}
/* ── Topbar ── */
.mkt-mobile-bar {
display: flex;
}
/* ── Topbar — integrate hamburger ── */
.mkt-topbar {
padding: 12px 16px;
gap: 8px;
}
.mkt-topbar__left {
display: flex;
align-items: center;
gap: 8px;
}
.mkt-topbar__title {
font-size: 16px;
font-size: 14px;
}
.mkt-topbar__subtitle {
font-size: 11px;
font-size: 10px;
}
.mkt-topbar__right {
@@ -647,6 +674,15 @@
gap: 6px;
}
.mkt-topbar__right .mkt-search {
display: none;
}
.mkt-topbar__right .mkt-btn-ghost span,
.mkt-topbar__right .mkt-btn-primary span {
display: none;
}
/* ── Content area ── */
.mkt-content {
padding: 0 12px 16px;
@@ -831,4 +867,45 @@
font-size: 11px;
padding: 6px 10px;
}
/* ═══ CHATBOT CANVAS — stack nodes vertically ═══ */
.mkt-flow-canvas-nodes {
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
padding: 20px 16px !important;
gap: 0 !important;
}
.mkt-flow-canvas-nodes>div[style*="width:280px"] {
width: 100% !important;
}
.mkt-flow-connector {
width: 2px !important;
height: 24px !important;
margin: 0 auto;
}
/* ═══ CRM — bottom action bar wraps ═══ */
.mkt-crm-actions {
flex-direction: column !important;
gap: 10px !important;
}
.mkt-crm-actions>div {
flex-wrap: wrap;
gap: 6px;
}
.mkt-crm-actions .mkt-btn-ghost,
.mkt-crm-actions .mkt-btn-primary {
font-size: 11px;
padding: 6px 10px;
}
/* ═══ AI CHATBOT — hide test chat panel on small mobile ═══ */
.mkt-aibot-test-chat {
display: none !important;
}
}