christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 15:25:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: full mobile responsive optimization for Android/iPhone

Browse Source 
- Add bottom navigation bar (6 tabs) for mobile, hidden on desktop
- Compact header with smaller logo and reduced padding on mobile
- Collapsible filter bar with active filter count badge on mobile
- Bottom-sheet style dropdowns with overlay and larger touch targets
- Fullscreen AI chat on mobile, floating window on desktop
- Responsive dashboard cards with always-visible expand button
- Smaller table text and touch-friendly scroll on all data grids
- iPhone safe-area support and thinner scrollbars on mobile

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-02-16 09:27:46 +01:00
co-authored by Claude Opus 4.6
parent fecc7264c8
commit 9895545910
11 changed files with 172 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AdsPerformance.tsx
+6 -6
View File
@@ -363,10 +363,10 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({
}, [filteredAndSorted]);
return (
<div className="flex flex-col gap-6 animate-fade-in p-6 bg-[#0B0E14] min-h-screen text-slate-300">
<div className="flex flex-col gap-4 md:gap-6 animate-fade-in p-3 md:p-6 bg-[#0B0E14] min-h-screen text-slate-300">
<div className="flex justify-between items-end">
<div>
<h1 className="text-2xl font-bold text-white mb-1">Performance Overview</h1>
<h1 className="text-lg md:text-2xl font-bold text-white mb-1">Performance Overview</h1>
<div className="flex items-center gap-2 text-xs text-slate-400">
<span className="w-2 h-2 rounded-full bg-emerald-500"></span>
<span>
@@ -376,7 +376,7 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({
</div>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 xl:grid-cols-13 gap-4 bg-[#141820] p-4 rounded-xl border border-white/5 shadow-xl">
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 xl:grid-cols-13 gap-2 md:gap-4 bg-[#141820] p-2 md:p-4 rounded-xl border border-white/5 shadow-xl">
<SummaryCard label="TOTAL SALES" value={totals.curr.salesTotal} prevValue={totals.prev?.salesTotal} format="currency" color="text-emerald-400" />
<SummaryCard label="ADS SALES" value={totals.curr.salesAds} prevValue={totals.prev?.salesAds} format="currency" color="text-orange-400" />
<SummaryCard label="ORGANIC SALES" value={totals.curr.salesOrganic} prevValue={totals.prev?.salesOrganic} format="currency" color="text-blue-400" />
@@ -395,7 +395,7 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({
</div>
<div className="bg-[#141820] rounded-xl border border-white/10 overflow-hidden shadow-2xl flex-1 flex flex-col">
<div className="p-4 border-b border-white/5 flex justify-between items-center bg-[#1A1F29]">
<div className="p-2 md:p-4 border-b border-white/5 flex flex-wrap justify-between items-center gap-2 bg-[#1A1F29]">
<div>
<h2 className="text-sm font-bold text-white uppercase tracking-wider">Product Inventory</h2>
<p className="text-[10px] text-slate-400 mt-0.5">
@@ -428,8 +428,8 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({
</div>
</div>
<div className="overflow-x-auto flex-1 custom-scrollbar">
<table className="w-full text-left border-collapse text-[11px]">
<div className="overflow-x-auto flex-1 custom-scrollbar scroll-touch">
<table className="w-full text-left border-collapse text-[10px] md:text-[11px]">
<thead className="sticky top-0 z-20 bg-[#1A1F29]">
<tr className="border-b border-white/5">
<th className="p-4 font-black text-slate-400 uppercase tracking-widest min-w-[250px]">