feat: print styles, closes #54

Longridge-High-School · Dec 17, 2024 · 5716420 · 5716420
1 parent 6b76d41
commit 5716420
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 7 deletions.
diff --git a/app/lib/components/header.tsx b/app/lib/components/header.tsx
@@ -25,15 +25,15 @@ export const Header = ({
             <LinkButton
               key={i}
               to={link}
-              className={className}
+              className={`${className} print:hidden`}
               onClick={action}
             >
               {label}
             </LinkButton>
           )
         })}
         <Button
-          className="bg-success"
+          className="bg-success print:hidden"
           onClick={() => {
             copyToClipboard(window.location.href)
             notify({

diff --git a/app/lib/components/sortable-table.tsx b/app/lib/components/sortable-table.tsx
@@ -35,6 +35,7 @@ export const SortableTable = ({
           <th>
             {asset.singular}
             <button
+              className="print:hidden"
               onClick={() => {
                 sort(
                   sortedBy === asset.nameFieldId && sortOrder === 'ASC'
@@ -56,6 +57,7 @@ export const SortableTable = ({
                 <th key={id}>
                   {field.name}{' '}
                   <button
+                    className="print:hidden"
                     onClick={() => {
                       sort(
                         sortedBy === field.id && sortOrder === 'ASC'

diff --git a/app/routes/app.$assetslug.$entry._index.tsx b/app/routes/app.$assetslug.$entry._index.tsx
@@ -110,7 +110,7 @@ const AssetEntry = () => {
 
   return (
     <div className="grid grid-cols-4 gap-4">
-      <div className="col-span-3">
+      <div className="col-span-3 print:col-span-4">
         <div className="border border-gray-300 shadow-xl bg-white p-2">
           <h2 className="border-b border-b-gray-200 text-xl font-light mb-4">
             {name}
@@ -128,7 +128,7 @@ const AssetEntry = () => {
           })}
         </div>
       </div>
-      <div>
+      <div className="print:hidden">
         <h3 className="border-b border-b-gray-200 text-xl font-light mb-4">
           Additional Details
         </h3>

diff --git a/app/routes/app.tsx b/app/routes/app.tsx
@@ -157,7 +157,7 @@ const Dashboard = () => {
         ''
       )}
       <nav
-        className="shadow-xl pt-8 text-[#444]"
+        className="shadow-xl pt-8 text-[#444] print:hidden"
         style={{
           backgroundColor: settings['site-color'],
           color: contrastColor(settings['site-color'].replace('#', ''))
@@ -236,7 +236,7 @@ const Dashboard = () => {
           <Link to="/app/logout">👋 Logout</Link>
         </div>
       </nav>
-      <div className="pt-8 pr-8">
+      <div className="pt-8 pr-8 print:col-span-2">
         <Outlet />
       </div>
     </div>

diff --git a/app/styles/root.css b/app/styles/root.css
@@ -11,7 +11,7 @@ body {
 }
 
 .entry-table {
-  @apply border border-gray-300 bg-white shadow-xl;
+  @apply border border-gray-300 bg-white shadow-xl print:shadow-none;
 }
 
 .entry-table th,