From 357faa5b187bf21254e09e8f25277f17b9e98934 Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Tue, 30 May 2023 00:19:41 -0500
Subject: [PATCH] print preview improvements
---
src/components/Footer.tsx | 8 ++++----
src/components/Header.tsx | 11 ++++-------
src/components/ResourceTable.tsx | 2 +-
src/pages/resources/index.tsx | 29 +++++++++++++++++++----------
4 files changed, 28 insertions(+), 22 deletions(-)
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 074851f..5b80a0f 100644
--- a/src/components/Footer.tsx
+++ b/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>
);
};
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6a34162..9d79c34 100644
--- a/src/components/Header.tsx
+++ b/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
- style={{ printColorAdjust: "exact" }}
- className="rounded-xl border border-black p-2"
- >
+ <div className="rounded-xl border border-black bg-yellow-100 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>
);
};
diff --git a/src/components/ResourceTable.tsx b/src/components/ResourceTable.tsx
index 51d8ce3..f6ce3a9 100644
--- a/src/components/ResourceTable.tsx
+++ b/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>
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
index 44902e0..e88d389 100644
--- a/src/pages/resources/index.tsx
+++ b/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 = queryData.page;
+ const currentPage = queryState.page;
const resourceQuery = api.auditoryResource.search.useQuery({
- skip: (queryData.page - 1) * queryData.perPage,
- take: queryData.perPage,
- ages: queryData.age,
- platforms: queryData.platforms,
- skill_levels: queryData.skill_levels,
- skills: queryData.skills,
+ skip: (queryState.page - 1) * queryState.perPage,
+ take: queryState.perPage,
+ ages: queryState.age,
+ platforms: queryState.platforms,
+ skill_levels: queryState.skill_levels,
+ 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}