print preview improvements

src/components/Footer.tsx

@@ -138,9 +138,9 @@ const FooterLabeledSection = ({
 
 const Footer: NextPage = () => {
   return (
-    <div className="w-full bg-neutral-800">
+    <footer className="w-full break-inside-avoid bg-neutral-800">
       {/** yellow stripe */}
-      <div className="print:border-t-0 border-t-[1px] border-neutral-400 bg-yellow-400 p-[4px]"></div>
+      <div className="border-t-[1px] border-neutral-400 bg-yellow-400 p-[4px] print:border-t-0"></div>
 
       {/** Main footer area */}
       <div className="mx-auto flex max-w-5xl flex-col-reverse justify-between p-4 print:flex-row md:flex-row">
@@ -185,7 +185,7 @@ const Footer: NextPage = () => {
         </div>
 
         {/** Header and tabs */}
-        <div className="mx-auto print:inline-block flex flex-row divide-x divide-neutral-500 text-neutral-200 sm:px-4 md:mx-0">
+        <div className="mx-auto flex flex-row divide-x divide-neutral-500 text-neutral-200 print:inline-block sm:px-4 md:mx-0">
           <span className="print:hidden">
             <FooterLabeledSection title="Quick Links">
               <div className="flex flex-col space-y-2 pt-4">
@@ -204,7 +204,7 @@ const Footer: NextPage = () => {
           </FooterLabeledSection>
         </div>
       </div>
-    </div>
+    </footer>
   );
 };
 

src/components/Header.tsx

@@ -114,7 +114,7 @@ const NavBar = () => {
 
 const Header: NextPage = () => {
   return (
-    <>
+    <header>
       {/** Main view */}
       <div
         id="logo-row"
@@ -138,10 +138,7 @@ const Header: NextPage = () => {
 
       {/** Print view */}
       <div className="hidden flex-row justify-center print:block print:flex">
-        <div
+        <div className="rounded-xl border border-black bg-yellow-100 p-2">
-          style={{ printColorAdjust: "exact" }}
-          className="rounded-xl border border-black p-2"
-        >
           <Image
             alt="Ear listening"
             src="/listening-ear.svg"
@@ -150,13 +147,13 @@ const Header: NextPage = () => {
           />
         </div>
         <div id="header-title" className="grid w-48 place-items-center">
-          <h1 className="text-center text-lg font-bold text-neutral-200">
+          <h1 className="text-center text-lg font-bold text-neutral-400">
             Center for Auditory Training Resources
           </h1>
           <span>auditorytraining.info</span>
         </div>
       </div>
-    </>
+    </header>
   );
 };
 

src/components/ResourceTable.tsx

@@ -216,7 +216,7 @@ const ResourceEntry = ({ resource }: { resource: AuditoryResource }) => {
   };
 
   return (
-    <tr className="divide-x-[1px] divide-slate-400">
+    <tr className="break-inside-avoid divide-x-[1px] divide-slate-400">
       <td className="max-w-xs">
         <ResourceInfo showMoreInfo resource={resource} />
       </td>

src/pages/resources/index.tsx

@@ -7,27 +7,28 @@ import { api } from "~/utils/api";
 import { parseQueryData } from "~/utils/parseSearchForm";
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
+import { useState } from "react";
 
 const Resources = () => {
   const router = useRouter();
+  const [queryState, setQueryState] = useState(parseQueryData(router.query));
 
-  const queryData = parseQueryData(router.query);
+  const currentPage = queryState.page;
-  const currentPage = queryData.page;
 
   const resourceQuery = api.auditoryResource.search.useQuery({
-    skip: (queryData.page - 1) * queryData.perPage,
+    skip: (queryState.page - 1) * queryState.perPage,
-    take: queryData.perPage,
+    take: queryState.perPage,
-    ages: queryData.age,
+    ages: queryState.age,
-    platforms: queryData.platforms,
+    platforms: queryState.platforms,
-    skill_levels: queryData.skill_levels,
+    skill_levels: queryState.skill_levels,
-    skills: queryData.skills,
+    skills: queryState.skills,
   });
 
   if (!resourceQuery.data) {
     return <></>;
   }
 
-  const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);
+  const totalPages = Math.ceil(resourceQuery.data.count / queryState.perPage);
 
   return (
     <>
@@ -55,6 +56,14 @@ const Resources = () => {
           <section className="mt-auto">
             <button
               onClick={() => {
+                const queryAllResources = { ...queryState };
+                queryAllResources.page = 1;
+                queryAllResources.perPage = resourceQuery.data.count;
+
+                setQueryState(queryAllResources);
+                window.onafterprint = () => {
+                  setQueryState(parseQueryData(router.query));
+                };
                 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 print:hidden"
@@ -65,7 +74,7 @@ const Resources = () => {
           </section>
         </div>
         <ResourceTable
-          resourcesPerPage={queryData.perPage}
+          resourcesPerPage={queryState.perPage}
           resources={resourceQuery.data.resources}
           totalPages={totalPages}
           query={router.query}