improve upload layout

slidr-app · Jul 26, 2023 · ab333d6 · ab333d6
1 parent 2cc66b5
commit ab333d6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 25 deletions.
diff --git a/src/components/pdf/Pdf.tsx b/src/components/pdf/Pdf.tsx
@@ -17,7 +17,7 @@ function Pdf({
   return (
     <Document
       file={file}
-      className="w-full aspect-video relative rounded-t-md"
+      className="w-full aspect-video rounded-t-md"
       onLoadSuccess={(pdf) => {
         onSetPageCount(pdf.numPages);
       }}

diff --git a/src/pages/Upload.tsx b/src/pages/Upload.tsx
@@ -346,31 +346,23 @@ export default function Upload() {
             </div>
           )}
           {uploadState !== 'ready' && (
-            <div className="relative flex flex-col w-full max-w-screen-sm">
-              {
-                // Must be a better way in typescript
-                [
-                  'creating',
-                  'rendering pages',
-                  'setting pages',
-                  'uploading pages',
-                ].includes(uploadState) && (
-                  <Pdf
-                    pageIndex={pageIndex}
-                    file={file!}
-                    onSetPageCount={setPageCount}
-                    onPageRendered={pageRendered}
-                  />
-                )
-              }
-              <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-teal-800 bg-opacity-90">
-                <div className={clsx('w-10 h-10', icon)} />
-                <div>{message}</div>
+            <div className="flex flex-col w-full max-w-screen-sm">
+              <div className="relative w-full">
+                <Pdf
+                  pageIndex={pageIndex}
+                  file={file!}
+                  onSetPageCount={setPageCount}
+                  onPageRendered={pageRendered}
+                />
+                <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-teal-800 bg-opacity-90">
+                  <div className={clsx('w-10 h-10', icon)} />
+                  <div>{message}</div>
+                </div>
+                <div
+                  className="absolute bottom-0 h-[6px] bg-teal"
+                  style={{width: `${((pageIndex + 1) * 100) / pageCount}%`}}
+                />
               </div>
-              <div
-                className="absolute bottom-0 h-[6px] bg-teal"
-                style={{width: `${((pageIndex + 1) * 100) / pageCount}%`}}
-              />
               <div>Rendering slide: {pageIndex + 1}</div>
             </div>
           )}