Mobile UI Polish - fixed Sunday stretch and optimized calendar for app-like feel
This commit is contained in:
Avery Felts
parent
b19b867958
commit
b90686fac0
@ -220,6 +220,9 @@
|
||||
/* Calendar styling - optimize cell size */
|
||||
.rdp {
|
||||
--rdp-cell-size: 40px;
|
||||
--rdp-accent-color: var(--primary);
|
||||
--rdp-background-color: var(--primary-foreground);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Make calendar fill available space on mobile */
|
||||
@ -230,15 +233,21 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rdp-months {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rdp-month {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rdp-table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
/* V9 grid class */
|
||||
.rdp-month_grid {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
display: table !important;
|
||||
table-layout: fixed !important;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.rdp-day {
|
||||
@ -246,10 +255,24 @@
|
||||
max-width: none;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
padding: 2px !important;
|
||||
}
|
||||
|
||||
.rdp-head_cell {
|
||||
.rdp-weekday {
|
||||
width: 100%;
|
||||
padding: 8px 0 !important;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Ensure Sunday (first column) doesn't stretch */
|
||||
.rdp-month_grid th,
|
||||
.rdp-month_grid td {
|
||||
width: 14.28% !important;
|
||||
max-width: 14.28% !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -132,16 +132,16 @@ export function DailyInspirationCard({ initialReligion, onReligionChange }: Dail
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex-1 flex flex-col justify-center p-5 rounded-xl border border-white/10 min-h-[120px] relative overflow-hidden group"
|
||||
className="flex-1 flex flex-col justify-center p-3 sm:p-5 rounded-xl border border-white/10 min-h-[100px] sm:min-h-[120px] relative overflow-hidden group"
|
||||
style={{
|
||||
background: getBackground(),
|
||||
boxShadow: `inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 20px ${getShadowColor()}`
|
||||
}}
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-white/10 to-transparent rounded-full -translate-y-1/2 translate-x-1/2" />
|
||||
<div className="absolute top-0 right-0 w-24 h-24 sm:w-32 sm:h-32 bg-gradient-to-br from-white/10 to-transparent rounded-full -translate-y-1/2 translate-x-1/2" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center justify-between mb-2 sm:mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
{getIcon()}
|
||||
<span className="text-xs font-semibold text-white/80 uppercase tracking-wider">
|
||||
@ -174,13 +174,13 @@ export function DailyInspirationCard({ initialReligion, onReligionChange }: Dail
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<p className="text-sm font-medium text-white leading-relaxed mb-3 text-shadow-sm italic">
|
||||
<p className="text-xs sm:text-sm font-medium text-white leading-relaxed mb-2 sm:mb-3 text-shadow-sm italic">
|
||||
“{dailyVerse.text}”
|
||||
</p>
|
||||
<p className="text-xs text-white/70 font-medium">
|
||||
<p className="text-[10px] sm:text-xs text-white/70 font-medium">
|
||||
— {dailyVerse.source}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
@ -17,6 +17,7 @@ import { ChevronLeftIcon, ChevronRightIcon, Cigarette, Leaf, Sparkles } from 'lu
|
||||
import { useTheme } from '@/lib/theme-context';
|
||||
import { getLocalDateString, getTodayString } from '@/lib/date-utils';
|
||||
import { DailyInspirationCard } from './DailyInspirationCard';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
|
||||
|
||||
@ -184,22 +185,26 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
|
||||
<button
|
||||
{...props}
|
||||
style={!isFuture ? colorStyle : undefined}
|
||||
className={`relative w-full h-full p-2 text-sm rounded-md transition-all hover:opacity-80 ${isFuture ? 'text-muted-foreground opacity-30 cursor-not-allowed' : 'cursor-pointer shadow-sm'
|
||||
} ${isToday ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-background' : ''}`}
|
||||
className={cn(
|
||||
"relative w-full h-full text-xs sm:text-sm transition-all hover:opacity-80",
|
||||
isFuture ? "text-muted-foreground opacity-30 cursor-not-allowed" : "cursor-pointer shadow-sm",
|
||||
isToday && "ring-2 ring-amber-400 ring-offset-2 ring-offset-background",
|
||||
props.className
|
||||
)}
|
||||
onClick={() => !isFuture && handleDateSelect(date)}
|
||||
disabled={isFuture}
|
||||
>
|
||||
<span className="font-medium">{date.getDate()}</span>
|
||||
<span className="font-semibold">{date.getDate()}</span>
|
||||
{(nicotineCount > 0 || weedCount > 0) && (
|
||||
<div className="absolute bottom-0.5 right-1 flex gap-0.5">
|
||||
<div className="absolute bottom-0.5 inset-x-0 flex justify-center gap-0.5">
|
||||
{nicotineCount > 0 && (
|
||||
<span className="text-[9px] font-bold bg-red-900/50 px-1 rounded">
|
||||
{nicotineCount}
|
||||
<span className="text-[7px] leading-tight font-black bg-red-900/40 px-0.5 rounded-sm">
|
||||
•
|
||||
</span>
|
||||
)}
|
||||
{weedCount > 0 && (
|
||||
<span className="text-[9px] font-bold bg-green-900/50 px-1 rounded">
|
||||
{weedCount}
|
||||
<span className="text-[7px] leading-tight font-black bg-green-900/40 px-0.5 rounded-sm">
|
||||
•
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@ -212,25 +217,38 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card className="bg-card/80 backdrop-blur-xl shadow-xl drop-shadow-lg hover-lift transition-all duration-300 border-white/10 overflow-hidden">
|
||||
<CardContent className="p-3 sm:p-6">
|
||||
<Card className="bg-card/80 backdrop-blur-xl shadow-xl drop-shadow-lg transition-all duration-300 border-white/10 overflow-hidden">
|
||||
<CardContent className="p-2 sm:p-6">
|
||||
<div className="flex flex-col lg:flex-row gap-4">
|
||||
{/* Calendar */}
|
||||
<div className="w-full lg:w-auto overflow-x-auto block">
|
||||
<div className="w-full lg:w-auto block">
|
||||
<DayPicker
|
||||
mode="single"
|
||||
selected={selectedDate}
|
||||
onSelect={handleDateSelect}
|
||||
className={`rounded-md sm:border p-0 sm:p-3 w-full ${theme === 'light' ? 'text-slate-900 border-slate-200/20' : 'text-white border-white/20'}`}
|
||||
className={`rounded-xl p-0 sm:p-3 w-full ${theme === 'light' ? 'text-slate-900' : 'text-white'}`}
|
||||
showOutsideDays={false}
|
||||
components={{
|
||||
DayButton: CustomDayButton,
|
||||
DayButton: (props) => (
|
||||
<CustomDayButton
|
||||
{...props}
|
||||
className={cn(
|
||||
props.className,
|
||||
"aspect-square rounded-full flex items-center justify-center p-0"
|
||||
)}
|
||||
/>
|
||||
),
|
||||
Chevron: ({ orientation }) => (
|
||||
<div className={`p-1.5 rounded-full border ${theme === 'light' ? 'bg-white/50 border-slate-200/60 shadow-sm' : 'bg-slate-800/50 border-slate-700/60 shadow-sm'}`}>
|
||||
<div className={cn(
|
||||
"p-1 rounded-full border transition-colors",
|
||||
theme === 'light'
|
||||
? "bg-slate-100/50 border-slate-200 text-slate-600 hover:bg-slate-200"
|
||||
: "bg-white/5 border-white/10 text-white/70 hover:bg-white/10"
|
||||
)}>
|
||||
{orientation === 'left' ? (
|
||||
<ChevronLeftIcon className="h-4 w-4" />
|
||||
<ChevronLeftIcon className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<ChevronRightIcon className="h-4 w-4" />
|
||||
<ChevronRightIcon className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user