brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

improve mobile UX of resource table

Browse Source
This commit is contained in:
Brandon Egger 2023-06-05 00:51:35 -05:00
parent 15cefe4eef
commit 8ca024b1a4
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/ResourceTable.tsx
View File

@ -37,7 +37,11 @@ export const ResourceInfo = ({
}; };
return ( return (
<div className="flex flex-row space-x-4 p-4"> <div
className={
"flex flex-row space-x-4 " + (showMoreInfo ? "p-1 sm:p-4" : "p-4")
}
>
<div className="my-auto h-full"> <div className="my-auto h-full">
{showMoreInfo ? ( {showMoreInfo ? (
<Link href={`resources/${resource.id}`}> <Link href={`resources/${resource.id}`}>
@ -71,7 +75,7 @@ export const ResourceInfo = ({
<h2 className="text-xs italic text-gray-600"> <h2 className="text-xs italic text-gray-600">
{resource.manufacturer?.name} {resource.manufacturer?.name}
</h2> </h2>
<h1 className="text-xl font-bold">{resource.name}</h1> <h1 className="text-md font-bold sm:text-xl">{resource.name}</h1>
<PlatformInfo platformLinks={resource.platform_links} /> <PlatformInfo platformLinks={resource.platform_links} />
<PriceIcon type={resource?.payment_options[0] ?? "FREE"} /> <PriceIcon type={resource?.payment_options[0] ?? "FREE"} />
</div> </div>
@ -170,7 +174,7 @@ const ResourceEntry = ({ resource }: { resource: AuditoryResource }) => {
}); });
return ( return (
<div className="m-2 flex flex-col space-y-4"> <div className="m-[2px] flex flex-col space-y-4 sm:m-2">
{skillsComponents.length > 0 ? ( {skillsComponents.length > 0 ? (
<div className="rounded-lg border border-neutral-900 bg-gray-100 drop-shadow"> <div className="rounded-lg border border-neutral-900 bg-gray-100 drop-shadow">
<ul className="divide-y-2">{skillsComponents}</ul> <ul className="divide-y-2">{skillsComponents}</ul>

6
src/pages/resources/index.tsx
View File

@ -127,10 +127,10 @@ const Resources = () => {
onClick={() => { onClick={() => {
setPrintMode(true); setPrintMode(true);
}} }}
className="inline-block space-x-2 rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md print:hidden" className="inline-block whitespace-nowrap rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md print:hidden sm:space-x-2"
> >
<span className="inline">Print Results</span> <span className="hidden sm:inline-block">Print Results</span>
<PrinterIcon className="inline w-6" /> <PrinterIcon className="inline-block w-6" />
</button> </button>
</section> </section>
</div> </div>