strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make admin page mobile friendly

Browse Source
This commit is contained in:
Sam Becker 2023-09-09 18:36:35 -05:00
parent c4044801a1
commit e0d2ee2432
2 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/(auth-state)/admin/photos/page.tsx
View File

@ -58,26 +58,31 @@ export default async function AdminPage() {
)} )}
photo={photo} photo={photo}
/> />
<Link <div className="flex flex-col md:flex-row">
key={photo.id} <Link
href={routeForPhoto(photo)} key={photo.id}
className="grow flex items-center gap-2" href={routeForPhoto(photo)}
> className="w-[50%] flex items-center gap-2"
{photo.title || >
<span className="text-gray-400 dark:text-gray-500"> {photo.title ||
Untitled <span className="text-gray-400 dark:text-gray-500">
</span>} Untitled
{photo.priorityOrder !== null && </span>}
<span className={cc( {photo.priorityOrder !== null &&
'text-xs leading-none px-1.5 py-1 rounded-sm', <span className={cc(
'dark:text-gray-300', 'text-xs leading-none px-1.5 py-1 rounded-sm',
'bg-gray-100 dark:bg-gray-800', 'dark:text-gray-300',
)}> 'bg-gray-100 dark:bg-gray-800',
{photo.priorityOrder} )}>
</span>} {photo.priorityOrder}
</Link> </span>}
<div className="text-gray-400 uppercase"> </Link>
{photo.takenAtNaive} <div className={cc(
'w-[50%] uppercase',
'text-gray-400 dark:text-gray-500',
)}>
{photo.takenAtNaive}
</div>
</div> </div>
<EditButton href={`/admin/photos/${photo.idShort}/edit`} /> <EditButton href={`/admin/photos/${photo.idShort}/edit`} />
<FormWithConfirm <FormWithConfirm
@ -111,7 +116,7 @@ function AdminGrid ({
<div className="min-w-[14rem] overflow-x-scroll"> <div className="min-w-[14rem] overflow-x-scroll">
<div className={cc( <div className={cc(
'w-full', 'w-full',
'grid grid-cols-[auto_auto_1fr_auto_auto] ', 'grid grid-cols-[auto_1fr_auto_auto] ',
'gap-3 items-center', 'gap-3 items-center',
)}> )}>
{children} {children}
@ -127,17 +132,23 @@ function EditButton ({
href: string, href: string,
label?: string, label?: string,
}) { }) {
return <Link return (
href={href} <Link
className="button" title="Edit"
> href={href}
<FaRegEdit className="translate-y-[-0.5px]" /> className="button"
{label} >
</Link>; <FaRegEdit className="translate-y-[-0.5px]" />
<span className="hidden sm:inline-block">
{label}
</span>
</Link>
);
} }
function DeleteButton () { function DeleteButton () {
return <SubmitButtonWithStatus return <SubmitButtonWithStatus
title="Delete"
icon={<span className="inline-flex text-[18px]">×</span>} icon={<span className="inline-flex text-[18px]">×</span>}
> >
Delete Delete
@ -174,7 +185,6 @@ function BlobUrls ({
> >
{pathForBlobUrl(url)} {pathForBlobUrl(url)}
</Link> </Link>
<div />
<EditButton href={href} label="Setup" /> <EditButton href={href} label="Setup" />
<FormWithConfirm <FormWithConfirm
action={deleteBlobPhotoAction} action={deleteBlobPhotoAction}

6
src/components/SubmitButtonWithStatus.tsx
View File

@ -34,14 +34,16 @@ export default function SubmitButtonWithStatus(props: Props) {
{(icon || pending) && {(icon || pending) &&
<span className={cc( <span className={cc(
'min-w-[1rem]', 'min-w-[1rem]',
'inline-flex', 'inline-flex justify-center sm:justify-normal',
'-mx-0.5', '-mx-0.5',
)}> )}>
{pending {pending
? <Spinner size={14} /> ? <Spinner size={14} />
: icon} : icon}
</span>} </span>}
{children} <span className="hidden sm:inline-block">
{children}
</span>
</button> </button>
); );
}; };