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 (
<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">
{showMoreInfo ? (
<Link href={`resources/${resource.id}`}>
@ -71,7 +75,7 @@ export const ResourceInfo = ({
<h2 className="text-xs italic text-gray-600">
{resource.manufacturer?.name}
</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} />
<PriceIcon type={resource?.payment_options[0] ?? "FREE"} />
</div>
@ -170,7 +174,7 @@ const ResourceEntry = ({ resource }: { resource: AuditoryResource }) => {
});
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 ? (
<div className="rounded-lg border border-neutral-900 bg-gray-100 drop-shadow">
<ul className="divide-y-2">{skillsComponents}</ul>

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

@ -127,10 +127,10 @@ const Resources = () => {
onClick={() => {
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>
<PrinterIcon className="inline w-6" />
<span className="hidden sm:inline-block">Print Results</span>
<PrinterIcon className="inline-block w-6" />
</button>
</section>
</div>