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

Merge branch 'feature/fixing-month-location-list-button-layout' into develop

Browse Source
This commit is contained in:
Nikola Derežić
2025-12-19 10:00:40 +01:00
parent c4eea408fa 23c3695a89
commit c49705433f
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>
<div className="p-[16px] pt-0"> <div className="p-[16px] pt-0">
{locations.map(location => ( {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"> <div className="card-body">
<h2 className="card-title text-[1rem]"> <h2 className="card-title text-[1rem]">
{formatYearMonth(yearMonth)} {location.name} {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 { export interface MultiBillEditButtonProps {
yearMonth: YearMonth; 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"); const t = useTranslations("home-page.multi-bill-edit-button");
return ( 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"> <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'> <span className='flex self-center'>
<Square3Stack3DIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" /> <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> </span>
</Link> </Link>
</div> </div>

13
app/ui/AddLocationButton.tsx
View File

@@ -8,20 +8,21 @@ import { useTranslations } from 'next-intl';
export interface AddLocationButtonProps { export interface AddLocationButtonProps {
/** year and month at which the new billing location should be addes */ /** 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"); const t = useTranslations("home-page.add-location-button");
return( 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"> <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'> <span className='flex self-center'>
<HomeIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" /> <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-[-.4em]" /> <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.6em] mt-[-.3em]" />
<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> </span>
</Link> </Link>
</div> </div>

2
app/ui/BillEditForm.tsx
View File

@@ -147,7 +147,7 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
: null : null
} }
<div className="flex"> <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> </div>
{ {
isScanningPDF && isScanningPDF &&

2
app/ui/InfoBox.tsx
View File

@@ -11,7 +11,7 @@ export const InfoBox: FC<{
const t = useTranslations("info-box"); const t = useTranslations("info-box");
return ( 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"> <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="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> <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 ( 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"> <div className="card-body">
<Link href={`/home/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}> <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" /> <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} />) locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} currency={userSettings?.currency} />)
: null : null
} }
<div className="flex gap-2 justify-center"> <div className="flex flex-col sm:flex-row sm:gap-2 justify-center">
<AddLocationButton yearMonth={yearMonth} /> <AddLocationButton yearMonth={yearMonth} />
<PrintButton yearMonth={yearMonth} /> <PrintButton yearMonth={yearMonth} />
<MultiBillEditButton yearMonth={yearMonth} /> <MultiBillEditButton yearMonth={yearMonth} />
</div> </div>
</MonthCard> </MonthCard>
) )

7
app/ui/PrintButton.tsx
View File

@@ -6,9 +6,10 @@ import { YearMonth } from '../lib/db-types';
export interface PrintButtonProps { export interface PrintButtonProps {
yearMonth: YearMonth; 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 t = useTranslations("home-page.month-card");
const handlePrintClick = () => { const handlePrintClick = () => {
@@ -16,7 +17,7 @@ export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth }) => {
}; };
return ( 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 <button
className="card-body tooltip self-center cursor-pointer" className="card-body tooltip self-center cursor-pointer"
onClick={handlePrintClick} onClick={handlePrintClick}
@@ -24,7 +25,7 @@ export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth }) => {
> >
<span className='flex self-center'> <span className='flex self-center'>
<PrinterIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" /> <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> </span>
</button> </button>
</div> </div>