(style) LocationCard: fixing shared button position, compacting layout
This commit is contained in:
@@ -45,24 +45,27 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
|
||||
<div data-key={_id} className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral my-1">
|
||||
<div className="card-body">
|
||||
<Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}>
|
||||
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
|
||||
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-[-.2rem] right-0 text-2xl" />
|
||||
</Link>
|
||||
<h2 className="card-title mr-[2em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
|
||||
<div className="card-actions">
|
||||
{
|
||||
bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
|
||||
}
|
||||
<h2 className="card-title mr-[2em] mt-[-1em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
|
||||
{
|
||||
bills.length > 0 ? (
|
||||
<div className="card-actions mb-1">
|
||||
{
|
||||
bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
<div className="flex justify-between items-center mb-0">
|
||||
<Link href={`/bill/${_id}/add`} className="tooltip" data-tip={t("add-bill-button-tooltip")}>
|
||||
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline-block" /><span className="text-xs ml-[0.2rem] mr-[3rem]">{t("add-bill-button-tooltip")}</span>
|
||||
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline" /><span className="text-xs ml-[0.2rem]">{t("add-bill-button-tooltip")}</span>
|
||||
</Link>
|
||||
<ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline hover:text-red-500" title="create sharable link" onClick={handleCopyLinkClick} />
|
||||
</div>
|
||||
|
||||
|
||||
{monthlyExpense > 0 || seenByTenant || utilBillsProofOfPaymentUploadedAt ?
|
||||
<>
|
||||
<div className="divider mt-1 mb-0 font-bold uppercase">{t("monthly-statement-legend")}</div>
|
||||
|
||||
|
||||
<div className="divider m-0 font-bold uppercase">{t("monthly-statement-legend")}</div>
|
||||
{
|
||||
monthlyExpense > 0 ?
|
||||
<div className="flex items-center gap-2 ml-2">
|
||||
@@ -93,7 +96,6 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
|
||||
</>: null
|
||||
}
|
||||
|
||||
<ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline-block hover:text-red-500" title="create sharable link" style={{ position: "absolute", bottom: ".6em", right: "1.2em" }} onClick={handleCopyLinkClick} />
|
||||
</div>
|
||||
</div>);
|
||||
};
|
||||
Reference in New Issue
Block a user