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

improvements to the resource list

Browse Source
This commit is contained in:
Brandon Egger 2023-05-29 23:49:37 -05:00
parent 72c0954dd6
commit 11f6db80cd
4 changed files with 42 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Footer.tsx
View File

@ -113,7 +113,7 @@ const AdminLogin = () => {
return (
<Link
className="text-sm text-neutral-300 hover:underline"
className="text-sm text-neutral-300 hover:underline print:hidden"
href="/admin/login"
>
Site Admin Login
@ -140,12 +140,12 @@ const Footer: NextPage = () => {
return (
<div className="w-full bg-neutral-800">
{/** yellow stripe */}
<div className="border-t-[1px] border-neutral-400 bg-yellow-400 p-[4px]"></div>
<div className="print:border-t-0 border-t-[1px] border-neutral-400 bg-yellow-400 p-[4px]"></div>
{/** Main footer area */}
<div className="mx-auto flex max-w-5xl flex-col-reverse justify-between p-4 md:flex-row">
<div className="mx-auto flex max-w-5xl flex-col-reverse justify-between p-4 print:flex-row md:flex-row">
{/** Wendell Johnson Info */}
<div className="mt-8 flex-col sm:mt-0">
<div className="mt-8 flex-col print:mt-0 sm:mt-0">
<Image
alt="University of Iowa logo"
width={128}
@ -185,14 +185,16 @@ const Footer: NextPage = () => {
</div>
{/** Header and tabs */}
<div className="mx-auto flex flex-row divide-x divide-neutral-500 text-neutral-200 sm:px-4 md:mx-0">
<FooterLabeledSection title="Quick Links">
<div className="flex flex-col space-y-2 pt-4">
{links.map((quickLink, index) => {
return <QuickLink key={index} {...quickLink} />;
})}
</div>
</FooterLabeledSection>
<div className="mx-auto print:inline-block flex flex-row divide-x divide-neutral-500 text-neutral-200 sm:px-4 md:mx-0">
<span className="print:hidden">
<FooterLabeledSection title="Quick Links">
<div className="flex flex-col space-y-2 pt-4">
{links.map((quickLink, index) => {
return <QuickLink key={index} {...quickLink} />;
})}
</div>
</FooterLabeledSection>
</span>
<FooterLabeledSection title="Contact">
<div className="flex flex-col divide-y divide-neutral-500">
{contacts.map((contactInfo, index) => {

26
src/components/Header.tsx
View File

@ -77,7 +77,7 @@ const NavBar = () => {
];
return (
<nav className="sticky top-0 z-50 w-full border-b border-neutral-400 bg-gradient-to-b from-amber-300 to-amber-300 shadow-black drop-shadow-md">
<nav className="sticky top-0 z-50 w-full border-b border-neutral-400 bg-gradient-to-b from-amber-300 to-amber-300 shadow-black drop-shadow-md print:hidden">
<li className="mx-auto flex max-w-5xl flex-row px-4 sm:justify-between">
<ul id="left-nav-links" className="flex flex-row space-x-10">
<NavBarLink href="/" label="Home" />
@ -115,9 +115,10 @@ const NavBar = () => {
const Header: NextPage = () => {
return (
<>
{/** Main view */}
<div
id="logo-row"
className="border-yellow flex flex-row justify-center border-b bg-neutral-800 p-4 drop-shadow-xl"
className="border-yellow flex flex-row justify-center border-b bg-neutral-800 p-4 drop-shadow-xl print:hidden"
>
<div className="rounded-xl bg-yellow-100 p-2 shadow-md shadow-yellow-500/50">
<Image
@ -134,6 +135,27 @@ const Header: NextPage = () => {
</div>
</div>
<NavBar />
{/** Print view */}
<div className="hidden flex-row justify-center print:block print:flex">
<div
style={{ printColorAdjust: "exact" }}
className="rounded-xl border border-black p-2"
>
<Image
alt="Ear listening"
src="/listening-ear.svg"
width={64}
height={64}
/>
</div>
<div id="header-title" className="grid w-48 place-items-center">
<h1 className="text-center text-lg font-bold text-neutral-200">
Center for Auditory Training Resources
</h1>
<span>auditorytraining.info</span>
</div>
</div>
</>
);
};

4
src/components/ResourceTable.tsx
View File

@ -81,7 +81,7 @@ export const ResourceInfo = ({
width={512}
height={512}
/>
<span className="block rounded-lg border border-neutral-900 bg-neutral-900 py-[1px] text-center text-white hover:bg-neutral-500">
<span className="block rounded-lg border border-neutral-900 bg-neutral-900 py-[1px] text-center text-white hover:bg-neutral-500 print:hidden">
more info
</span>
</div>
@ -305,7 +305,7 @@ const PagesNavigation = ({
};
return (
<div className="flex flex-row justify-between bg-amber-100 py-2 pl-2 pr-4">
<div className="flex flex-row justify-between bg-amber-100 py-2 pl-2 pr-4 print:hidden">
<div className="flex w-64 flex-row space-x-2">
<div className="relative inline-flex">
<select

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

@ -33,7 +33,7 @@ const Resources = () => {
<>
<Header />
<main className="mx-auto my-6 max-w-6xl md:px-4">
<div className="mb-2 p-2 sm:mb-4 sm:p-4 flex flex-row justify-between">
<div className="mb-2 flex flex-row justify-between p-2 print:hidden sm:mb-4 sm:p-4">
<section className="space-y-2">
<h1 className="text-3xl font-bold">All Resources</h1>
<div className="">
@ -57,7 +57,7 @@ const Resources = () => {
onClick={() => {
window.print();
}}
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"
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"
>
<span className="inline">Print Results</span>
<PrinterIcon className="inline w-6" />