230417/smartagenda_pap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement mobile-responsive layout adjustments and horizontal scrollable containers across components

Browse Source
This commit is contained in:
230417
2026-04-28 15:41:07 +01:00
parent 153655da8c
commit d6f9b51205
5 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/ServiceList.tsx
View File

@@ -13,10 +13,10 @@ export const ServiceList = ({
}) => (
<div className="grid md:grid-cols-2 gap-4 sm:gap-6">
{services.map((s) => (
<Card key={s.id} className="p-4 sm:p-6 border-none glass-card rounded-2xl sm:rounded-[2rem] group hover:shadow-2xl transition-all duration-300">
<div className="flex items-start justify-between gap-3 sm:gap-4">
<Card key={s.id} className="p-4 sm:p-6 border-none glass-card rounded-2xl sm:rounded-[2rem] group hover:shadow-2xl transition-all duration-300 overflow-hidden">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4">
<div className="flex-1 min-w-0 space-y-2">
<h3 className="font-black text-slate-900 text-lg sm:text-xl tracking-tight leading-tight group-hover:text-indigo-600 transition-colors uppercase italic truncate">{s.name}</h3>
<h3 className="font-black text-slate-900 text-lg sm:text-xl tracking-tight leading-tight group-hover:text-indigo-600 transition-colors uppercase italic">{s.name}</h3>
<div className="flex items-center gap-3">
<div className="flex items-center gap-1.5 px-2 py-1 bg-slate-100 rounded-lg text-xs font-bold text-slate-500 uppercase">
<Clock size={12} />
@@ -24,17 +24,17 @@ export const ServiceList = ({
</div>
</div>
</div>
<div className="text-xl sm:text-2xl font-black text-slate-900 tracking-tighter bg-indigo-50 px-2 sm:px-3 py-1 rounded-xl border border-indigo-100 whitespace-nowrap shrink-0">
<div className="text-xl sm:text-2xl font-black text-slate-900 tracking-tighter bg-indigo-50 px-2 sm:px-3 py-1 rounded-xl border border-indigo-100 whitespace-nowrap shrink-0 w-fit">
{currency(s.price)}
</div>
</div>
{onSelect && (
<div className="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-slate-100 flex items-center justify-between gap-3 sm:gap-4">
<p className="text-xs font-medium text-slate-400 max-w-[100px] sm:max-w-[150px] shrink-0">Lugar disponível hoje</p>
<div className="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-slate-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
<p className="text-xs font-medium text-slate-400 shrink-0">Lugar disponível hoje</p>
<Button
onClick={() => onSelect(s.id)}
className="flex-1 min-w-0 h-10 sm:h-11 bg-slate-900 hover:bg-slate-800 text-indigo-400 font-black rounded-xl shadow-lg shadow-slate-200 transition-all active:scale-95 uppercase tracking-wider sm:tracking-widest text-[10px] sm:text-xs truncate px-3 sm:px-4"
className="w-full sm:w-auto h-10 sm:h-11 bg-slate-900 hover:bg-slate-800 text-indigo-400 font-black rounded-xl shadow-lg shadow-slate-200 transition-all active:scale-95 uppercase tracking-wider sm:tracking-widest text-xs px-6"
>
Reservar
</Button>
@@ -44,3 +44,4 @@ export const ServiceList = ({
))}
</div>
);

2
web/src/components/layout/Shell.tsx
View File

@@ -5,7 +5,7 @@ export function Shell() {
return (
<>
<Header />
<main className="mx-auto max-w-5xl px-3 sm:px-4 py-4 sm:py-6 overflow-x-hidden">
<main className="mx-auto max-w-5xl px-3 sm:px-4 py-4 sm:py-6">
<Outlet />
</main>
</>

6
web/src/components/ui/tabs.tsx
View File

@@ -3,13 +3,13 @@ import { cn } from '../../lib/cn';
type Tab = { id: string; label: string; badge?: number };
export const Tabs = ({ tabs, active, onChange, className }: { tabs: Tab[]; active: string; onChange: (id: string) => void; className?: string }) => (
<div className={cn("flex gap-2 p-1 bg-slate-100 rounded-2xl w-fit", className)}>
<div className={cn("flex gap-1.5 sm:gap-2 p-1 bg-slate-100 rounded-2xl overflow-x-auto scrollbar-hide", className)}>
{tabs.map((t) => (
<button
key={t.id}
onClick={() => onChange(t.id)}
className={cn(
"px-6 py-2.5 text-sm font-black uppercase tracking-widest transition-all rounded-xl whitespace-nowrap",
"px-3 sm:px-6 py-2 sm:py-2.5 text-[11px] sm:text-sm font-black uppercase tracking-wider sm:tracking-widest transition-all rounded-xl whitespace-nowrap shrink-0",
active === t.id
? "bg-slate-900 text-indigo-400 shadow-xl"
: "text-slate-500 hover:text-slate-900 hover:bg-white/50"
@@ -17,7 +17,7 @@ export const Tabs = ({ tabs, active, onChange, className }: { tabs: Tab[]; activ
>
{t.label}
{t.badge && (
<span className="ml-2 inline-flex items-center justify-center w-5 h-5 text-[10px] font-black text-white bg-slate-900 rounded-full border border-indigo-500/50">
<span className="ml-1.5 sm:ml-2 inline-flex items-center justify-center w-4 h-4 sm:w-5 sm:h-5 text-[8px] sm:text-[10px] font-black text-white bg-slate-900 rounded-full border border-indigo-500/50">
{t.badge}
</span>
)}

8
web/src/index.css
View File

@@ -60,6 +60,14 @@
@apply bg-white/80 backdrop-blur-md border border-white/20 shadow-xl shadow-slate-200/50;
}
/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.indigo-gradient {
@apply bg-gradient-to-br from-indigo-400 via-indigo-500 to-indigo-600;

8
web/src/pages/Dashboard.tsx
View File

@@ -387,17 +387,17 @@ function DashboardInner({ shop }: { shop: BarberShop }) {
return (
<div className="space-y-6">
{/* Header */}
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div className="flex flex-col gap-4">
<div>
<h1 className="text-2xl font-bold text-slate-900">{shop.name}</h1>
<h1 className="text-xl sm:text-2xl font-bold text-slate-900">{shop.name}</h1>
<p className="text-sm text-slate-600">{shop.address}</p>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5 sm:gap-2 overflow-x-auto scrollbar-hide pb-1">
{(['hoje', 'semana', 'mes', 'total'] as const).map((p) => (
<button
key={p}
onClick={() => setPeriod(p)}
className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-all ${period === p
className={`px-2.5 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium border transition-all whitespace-nowrap shrink-0 ${period === p
? 'border-indigo-500 bg-indigo-50 text-indigo-700 shadow-sm'
: 'border-slate-200 text-slate-700 hover:border-indigo-300 hover:bg-indigo-50/50'
}`}