From 4fafe38e8deb468bb33e1f762635d0369cb62ef0 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sat, 10 Feb 2024 21:05:14 -0800
Subject: [PATCH] update responsive design

---
 package-lock.json                             |  6 -----
 package.json                                  |  1 -
 src/app/document/document.module.css          |  0
 .../view/[slug]/documentViewer.module.css     | 27 -------------------
 src/app/document/view/[slug]/page.tsx         | 22 +++++----------
 src/app/home.module.css                       | 10 ++-----
 src/app/layout.tsx                            | 20 +++++++-------
 src/app/searchBar/SearchBar.tsx               |  6 ++---
 8 files changed, 22 insertions(+), 70 deletions(-)
 delete mode 100644 src/app/document/document.module.css
 delete mode 100644 src/app/document/view/[slug]/documentViewer.module.css

diff --git a/package-lock.json b/package-lock.json
index c764ec5..d151c97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
       "name": "eexiv-2",
       "version": "0.1.0",
       "dependencies": {
-        "file-saver": "^2.0.5",
         "next": "14.1.0",
         "react": "^18",
         "react-dom": "^18",
@@ -1993,11 +1992,6 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
-    "node_modules/file-saver": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
-      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
-    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
diff --git a/package.json b/package.json
index aaf5e4e..83864f4 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "file-saver": "^2.0.5",
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
diff --git a/src/app/document/document.module.css b/src/app/document/document.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/document/view/[slug]/documentViewer.module.css b/src/app/document/view/[slug]/documentViewer.module.css
deleted file mode 100644
index 1ae3e1c..0000000
--- a/src/app/document/view/[slug]/documentViewer.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.itemTitle {
-  margin: 0;
-  font-size: 2em;
-}
-
-.itemAbstractHeader {
-  margin-top: 20px;
-  margin-bottom: 10px;
-  color: 33;
-  font-size: 1.5em;
-}
-
-.typePresentation {
-  background-color: #007bff;
-}
-
-.typeOther {
-  background-color: #6c757d;
-}
-
-.resultAbstract {
-  color: #333;
-}
-
-.downloadButton {
-  padding: 10px;
-}
diff --git a/src/app/document/view/[slug]/page.tsx b/src/app/document/view/[slug]/page.tsx
index 4d9c9f4..e9adddc 100644
--- a/src/app/document/view/[slug]/page.tsx
+++ b/src/app/document/view/[slug]/page.tsx
@@ -1,6 +1,4 @@
-import styles from './documentViewer.module.css'
 import { Zilla_Slab } from 'next/font/google'
-import { saveAs } from 'file-saver'
 import {
   DocumentType,
   documents,
@@ -9,6 +7,7 @@ import {
 } from '../../../db/data'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
+import { Fragment } from 'react'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
@@ -32,19 +31,11 @@ export default function Page({
   const doc = documents[params.slug]
   if (!doc) {
     notFound()
-    return
   }
   const { abstract, file } = doc
   const { title, authors, topics, dates, references, code, type, latest } =
     doc.manifest
 
-  const handleDownloadLatest = () => {
-    saveAs(
-      `/download/${params.slug}/file${latest}.${file}`,
-      `${params.slug}-rev-${latest}.pdf`
-    )
-  }
-
   const generateTopics = () => {
     return (
       <>
@@ -67,12 +58,12 @@ export default function Page({
         <>
           <span className='font-bold'>Code: </span>
           {code.map((c: string, i) => (
-            <>
+            <Fragment key={c}>
               <Link href={c} target='_blank'>
                 {c}
               </Link>
               {i !== code.length - 1 ? ', ' : null}
-            </>
+            </Fragment>
           ))}
         </>
       )
@@ -122,15 +113,14 @@ export default function Page({
   return (
     <div>
       <div>
-        <h3
+        <h1
           className={`
-            ${styles.itemTitle}
-            text-slate-800
+            text-slate-800 font-bold text-5xl mb-8
             ${zillaSlab.className}
           `}
         >
           {title}
-        </h3>
+        </h1>
         <p className={`text-slate-800 mt-2`}>{generateAuthors()}</p>
         <p className='mt-4'>
           Latest revision published{' '}
diff --git a/src/app/home.module.css b/src/app/home.module.css
index 2c2ba62..57b2dfe 100644
--- a/src/app/home.module.css
+++ b/src/app/home.module.css
@@ -9,20 +9,15 @@
 }
 
 .banner {
-  width: 100%;
-  height: 100px;
-  padding: 20px;
   background-color: #0c5198;
   color: white;
-  margin-bottom: 50px;
 }
 
 .title {
-  position: absolute;
-  top: 162.5px;
+  /* top: 162.5px; */
   color: white;
   font-size: 50px;
-  margin-bottom: 50px;
+  /* margin-bottom: 50px; */
   cursor: pointer;
 }
 
@@ -34,7 +29,6 @@
 
 .contributions {
   width: 40vw;
-  margin-top: 50px;
   margin-left: calc(100% - 40vw - 10px);
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0c5e033..5087caa 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -29,9 +29,9 @@ export default function RootLayout({
     <html lang='en'>
       <body className={inter.className}>
         <div className={styles.header}>
-          <Container width='1200px'>
-            <img className={styles.wordmark} src='/eecs-wordmark.png' />
-            <p className={styles.contributions}>
+          <div className='max-w-[1200px] flex flex-nowrap mx-auto justify-between items-center'>
+            <img className='h-[100px] mt-4' src='/eecs-wordmark.png' />
+            <p className={`max-w-[600px] hidden md:inline`}>
               We gratefully acknowledge support from our volunteer peer
               reviewers, member institutions, and all{' '}
               <a
@@ -42,17 +42,19 @@ export default function RootLayout({
               </a>
               .
             </p>
-          </Container>
+          </div>
         </div>
-        <div className={styles.banner}>
-          <Container width='1200px'>
-            <h1 className={`${styles.title} ${zillaSlab.className}`}>
+        <div className={`${styles.banner} w-full h-[100px] mb-[50px]`}>
+          <div className='max-w-[1200px] flex justify-between mx-auto items-center pt-3 flex-nowrap'>
+            <h1 className={`${styles.title} ${zillaSlab.className} mx-10`}>
               <Link href='/' className='no-link-style'>
                 eeXiv<sup>2</sup>
               </Link>
             </h1>
-          </Container>
-          <SearchBar />
+            <div className='hidden md:inline'>
+              <SearchBar />
+            </div>
+          </div>
         </div>
         <Container width='1200px' fill>
           {children}
diff --git a/src/app/searchBar/SearchBar.tsx b/src/app/searchBar/SearchBar.tsx
index e9cd290..c7fcb71 100644
--- a/src/app/searchBar/SearchBar.tsx
+++ b/src/app/searchBar/SearchBar.tsx
@@ -3,14 +3,14 @@ import styles from './searchBar.module.css'
 
 export default function SearchBar() {
   return (
-    <div className={styles.search}>
+    <div className='width-[40vw]'>
       <input
         type='text'
-        className={`${styles.searchBox} text-slate-800`}
+        className='py-3 px-5 rounded-xl text-slate-800'
         name='q'
         placeholder='Search...'
       />
-      <button type='submit' className={styles.searchButton}>
+      <button type='submit' className='p-2.5 mx-4 border-2 rounded-xl bg-'>
         Search
       </button>
     </div>