knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve mobile responsiveness across UI components

Browse Source 
- Add responsive layout for action buttons (stack vertically on mobile, horizontal on sm+)
- Adjust card max-widths for better mobile display (LocationCard, MultiBillEdit)
- Improve button text sizing with responsive classes (text-sm on mobile, text-xs on sm+)
- Remove width constraints on file inputs and info boxes for full-width mobile layout
- Fine-tune icon positioning for better visual alignment

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Nikola Derežić
2025-12-19 09:59:37 +01:00
parent c4eea408fa
commit 23c3695a89
8 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEdit.tsx
View File

@@ -107,7 +107,7 @@ export const MultiBillEdit: FC<MultiBillEditProps> = ({ locations, year, month }
</div>
<div className="p-[16px] pt-0">
{locations.map(location => (
<div key={location._id} className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral mb-2">
<div key={location._id} className="card card-compact card-bordered max-w-[35em] bg-base-100 border-1 border-neutral mb-2">
<div className="card-body">
<h2 className="card-title text-[1rem]">
{formatYearMonth(yearMonth)} {location.name}

7
app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEditButton.tsx
View File

@@ -7,18 +7,19 @@ import Link from 'next/link';
export interface MultiBillEditButtonProps {
yearMonth: YearMonth;
className?: string;
}
export const MultiBillEditButton: React.FC<MultiBillEditButtonProps> = ({ yearMonth }) => {
export const MultiBillEditButton: React.FC<MultiBillEditButtonProps> = ({ yearMonth, className }) => {
const t = useTranslations("home-page.multi-bill-edit-button");
return (
<div className="card card-compact card-bordered bg-base-100 shadow-s my-1">
<div className={`card card-compact card-bordered bg-base-100 shadow-s my-1 ${className}`}>
<Link href={`/home/multi-bill-edit/${yearMonth.year}/${yearMonth.month}`} className="card-body tooltip self-center" data-tip={t("tooltip")} data-umami-event="add-new-location">
<span className='flex self-center'>
<Square3Stack3DIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
<span className="ml-1 self-center text-xs text-left leading-[1.2em] w-[5.5em]">{t("tooltip")}</span>
<span className="ml-1 self-center text-sm sm:text-xs text-left w-[5.5em] leading-[1.3em]">{t("tooltip")}</span>
</span>
</Link>
</div>

13
app/ui/AddLocationButton.tsx
View File

@@ -8,20 +8,21 @@ import { useTranslations } from 'next-intl';
export interface AddLocationButtonProps {
/** year and month at which the new billing location should be addes */
yearMonth: YearMonth
yearMonth: YearMonth;
className?: string;
}
export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yearMonth}) => {
export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yearMonth, className}) => {
const t = useTranslations("home-page.add-location-button");
return(
<div className="card card-compact card-bordered bg-base-100 shadow-s my-1">
<div className={`card card-compact card-bordered bg-base-100 shadow-s my-1 ${className}`}>
<Link href={`/home/location/${ formatYearMonth(yearMonth) }/add`} className="card-body tooltip self-center" data-tip={t("tooltip")} data-umami-event="add-new-location">
<span className='flex self-center'>
<HomeIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.6em] mt-[-.4em]" />
<span className="ml-1 self-center text-xs text-left leading-[1.2em] w-[5.5em]">{t("tooltip")}</span>
<HomeIcon className="h-[1em] w-[1em] cursor-pointer text-4xl mt-[.1rem]" />
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.6em] mt-[-.3em]" />
<span className="ml-1 self-center text-sm sm:text-xs text-left w-[5.5em] leading-[1.3em]">{t("tooltip")}</span>
</span>
</Link>
</div>

2
app/ui/BillEditForm.tsx
View File

@@ -147,7 +147,7 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
: null
}
<div className="flex">
<input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered grow file-input-s my-2 block max-w-[17em] md:max-w-[80em] break-words" onChange={billAttachment_handleChange} />
<input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered grow file-input-s my-2 block w-full break-words" onChange={billAttachment_handleChange} />
</div>
{
isScanningPDF &&

2
app/ui/InfoBox.tsx
View File

@@ -11,7 +11,7 @@ export const InfoBox: FC<{
const t = useTranslations("info-box");
return (
<details className="group border border-gray-800 rounded-lg p-2 mb-1 w-full max-w-md">
<details className="group border border-gray-800 rounded-lg p-2 mb-1 w-full">
<summary className="flex cursor-pointer items-center justify-between">
<span className="font-bold"><QuestionMarkCircleIcon className="w-5 h-5 inline mr-1 mt-[-.3em]" /> {title ?? t("default-title")}</span>
<span className="ml-2 text-sm text-gray-500 group-open:hidden"><ChevronDownIcon className="w-5 h-5 inline" /></span>

2
app/ui/LocationCard.tsx
View File

@@ -48,7 +48,7 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
}
return (
<div data-key={_id} className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral my-1">
<div data-key={_id} className="card card-compact card-bordered sm:max-w-[35em] bg-base-100 border-1 border-neutral my-1">
<div className="card-body">
<Link href={`/home/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}>
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-[-.2rem] right-0 text-2xl" />

8
app/ui/MonthLocationList.tsx
View File

@@ -132,10 +132,10 @@ export const MonthLocationList:React.FC<MonthLocationListProps > = ({
locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} currency={userSettings?.currency} />)
: null
}
<div className="flex gap-2 justify-center">
<AddLocationButton yearMonth={yearMonth} />
<PrintButton yearMonth={yearMonth} />
<MultiBillEditButton yearMonth={yearMonth} />
<div className="flex flex-col sm:flex-row sm:gap-2 justify-center">
<AddLocationButton yearMonth={yearMonth} />
<PrintButton yearMonth={yearMonth} />
<MultiBillEditButton yearMonth={yearMonth} />
</div>
</MonthCard>
)

7
app/ui/PrintButton.tsx
View File

@@ -6,9 +6,10 @@ import { YearMonth } from '../lib/db-types';
export interface PrintButtonProps {
yearMonth: YearMonth;
className?: string;
}
export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth }) => {
export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth, className }) => {
const t = useTranslations("home-page.month-card");
const handlePrintClick = () => {
@@ -16,7 +17,7 @@ export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth }) => {
};
return (
<div className="card card-compact card-bordered bg-base-100 shadow-s my-1">
<div className={`card card-compact card-bordered bg-base-100 shadow-s my-1 ${className}`}>
<button
className="card-body tooltip self-center cursor-pointer"
onClick={handlePrintClick}
@@ -24,7 +25,7 @@ export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth }) => {
>
<span className='flex self-center'>
<PrinterIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
<span className="ml-1 self-center text-xs text-left leading-[1.2em] w-[4em]">{t("print-codes-label")}</span>
<span className="ml-1 self-center text-sm sm:text-xs text-left sm:w-[5.5em] leading-[1.3em]">{t("print-codes-label")}</span>
</span>
</button>
</div>