fixed scrolling bugs

nmacdon3 · Mar 11, 2023 · e8d31e9 · e8d31e9
1 parent e0e614a
commit e8d31e9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 34 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,3 @@
-import { Transition } from '@headlessui/react';
-import classNames from 'classnames';
-import { useEffect, useState } from 'react';
 import { BiPrinter } from 'react-icons/bi';
 
 import pdf from '~/assets/MacDonald_Resume_2023.pdf';
@@ -20,7 +17,7 @@ const PrintButton = () => {
 const MobilePrintButton = () => {
   return (
     <a
-      className="lg:hidden transition duration-300 ease-in-out absolute top-4 right-4 z-100 backdrop-blur-lg bg-white/30   text-black p-2 rounded-full   hover:bg-gray-200"
+      className="lg:hidden print:hidden transition duration-300 ease-in-out absolute top-4 right-4 z-100 backdrop-blur-lg bg-white/30   text-black p-2 rounded-full   hover:bg-gray-200"
       download
       href={pdf}>
       <BiPrinter className="h-5 w-5" />
@@ -29,36 +26,11 @@ const MobilePrintButton = () => {
 };
 
 const App = () => {
-  const [show, setShow] = useState<boolean>(false);
-
-  useEffect(() => {
-    setTimeout(() => setShow(true), 500);
-  }, []);
-
   return (
-    <div
-      className={classNames(
-        'h-screen bg-gradient-to-t from-gray-300 font-body flex justify-center overflow-x-scroll sm:py-10 transition-all'
-      )}>
-      <div
-        className={classNames(
-          'h-screen w-screen absolute top-0 left-0 transition-all duration-1000 bg-white -z-10',
-          show ? 'opacity-0' : 'opacity-100'
-        )}></div>
+    <div className="h-screen bg-gradient-to-t from-gray-300 font-body flex justify-center overflow-y-scroll sm:py-10">
       <PrintButton />
-      <Transition
-        show={show}
-        className="print:hidden print:absolute transition-all ease-in-out duration-1000 shadow h-auto sm:h-[56rem] w-[43rem] sm:overflow-hidden overflow-scroll flex flex-col bg-white relative px-10  sm:rounded-lg"
-        enterFrom="opacity-0 scale-90 translate-y-0">
-        <Resume />
-      </Transition>
+      <Resume />
       <MobilePrintButton />
-
-      <div
-        id="toBePrinted"
-        className="absolute invisible print:visible print:relative h-full w-full z-100 top-0 left-0">
-        <Resume />
-      </div>
     </div>
   );
 };

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -70,7 +70,7 @@ const Footer = () => {
           </div>
         </>
       )}
-      <div className="text-xs  text-gray-400 absolute bottom-4 right-0 print:right-16  print:hidden">
+      <div className="text-xs  text-gray-400 md:absolute md:pb-0 pb-2 bottom-4 right-0 print:right-16  print:hidden">
         Last updated: {humanReadable}
       </div>
     </footer>

diff --git a/src/components/Resume.tsx b/src/components/Resume.tsx
@@ -7,7 +7,7 @@ import Footer from './Footer';
 
 const Resume = () => {
   return (
-    <>
+    <div className=" print:h-full print:w-full transition-all ease-in-out duration-1000 shadow h-auto sm:h-[56rem] w-[43rem] sm:overflow-hidden overflow-scroll flex flex-col bg-white relative px-10 print:px-0  sm:rounded-lg">
       <Header />
       <div className="flex sm:space-x-16 print:space-x-10 mt-12 sm:mt-10 print:mt-12  flex-grow flex-wrap print:pl-16 ">
         <section className="w-full sm:w-[24rem] print:w-[28.5rem]">
@@ -20,7 +20,7 @@ const Resume = () => {
         </aside>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };