e

src/App.tsx

@@ -16,7 +16,10 @@ export const classOptions = [ // TODO REMOVE
 ];
 
 
-
+function findIfMobile() {
+  //return true;
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
 
 function App() {
   const [openModal, setOpenModal] = useState(false);
@@ -26,6 +29,7 @@ function App() {
   const [tempFileId, setTempFileId] = useState<string>("");
 
   const [file, setFile] = useState<File | null>(null);
+  const [isMobile, setIsMobile] = useState(false);
 
 
   const [syllabi, setSyllabi] = useState<ClassListing[]>([]);
@@ -56,8 +60,8 @@ function App() {
     let formdata = new FormData();
 
     if (file === null) {
-        alert("File not uploaded");
+      alert("File not uploaded");
-        throw new Error("File not uploaded");
+      throw new Error("File not uploaded");
     }
     formdata.append("upload", file);
     formdata.append("email", email);
@@ -67,9 +71,9 @@ function App() {
       method: 'POST',
       body: formdata,
     })
-    .then(async (response) => {
+      .then(async (response) => {
         if (!response.ok) {
-            throw new Error(`Server error: ${response.statusText}`);
+          throw new Error(`Server error: ${response.statusText}`);
         }
         setAccordionOpen(true);
         let data = await response.json();
@@ -77,26 +81,36 @@ function App() {
         setTempFileId(data.fileId);
         setOpenModal(false);
         alert("Upload successful! You will receive an email with your volunteer hours within 3 days.");
-    })
+      })
-    .catch((error) => {
+      .catch((error) => {
         console.error("Upload failed:", error);
         alert("Upload failed: " + error.message);
-    });
+      });
-}
+  }
 
   useEffect(() => {
     console.log("temp file is", tempFileId)
   }, [tempFileId])
 
 
+
   useEffect(() => {
     handleSearch();
+
+    if (findIfMobile()) {
+      // Code for mobile devices
+      setIsMobile(true);
+      console.log("mobile")
+    } else {
+      // Code for desktop devices
+      console.log("pc")
+    }
   },
-   [])
+    [])
 
 
 
-  const handleFileChange = (e:React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files === null) return
     if (e.target.files[0] === null) return
 
@@ -113,33 +127,71 @@ function App() {
   return (
     <>
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
-      <h3 className="text-2xl font-bold text-center">Easily View & Share College Syllabi JFKMCHS/Norco College</h3> <br></br>
+      {isMobile === false && <div className="place-items-center p-10">
-      <div className="">
+        <h3 className="text-2xl font-bold text-center">Easily View & Share College Syllabi JFKMCHS/Norco College</h3> <br></br>
-        <div className="flex space-x-1">
+        <div className="">
-          <button onClick={() => setOpenModal(true)} className=" bg-blue-700 p-2 text-yellow-50 rounded-lg flex flex-row">
+          <div className="flex space-x-1">
-            <span className="flex justify-center items-center aspect-square flex-1"><i className="material-symbols-rounded">attach_file</i></span>
+            <button onClick={() => setOpenModal(true)} className=" bg-blue-700 p-2 text-yellow-50 rounded-lg flex flex-row">
-            <span className="flex flex-col">            <span className="text-sm">add a syllabus</span>
+              <span className="flex justify-center items-center aspect-square flex-1"><i className="material-symbols-rounded">attach_file</i></span>
-            <span className="text-xs">2 volunteer hours</span></span>
+              <span className="flex flex-col">            <span className="text-sm">add a syllabus</span>
-          </button>
+                <span className="text-xs">1 volunteer hours</span></span>
-          <div className="flex-1 flex bg-white rounded-lg">
+            </button>
-          <input type="search" onKeyDown={handleKeyDown} placeholder="search, hit enter or the search button to enter query" className="focus:outline-none bg-transparent border-none flex-1 text-black" value={query} onChange={(e) => setQuery(e.target.value)}>
+            <div className="flex-1 flex bg-white rounded-lg">
+              <input type="search" onKeyDown={handleKeyDown} placeholder="search, hit enter or the search button to enter query" className="focus:outline-none bg-transparent border-none flex-1 text-black" value={query} onChange={(e) => setQuery(e.target.value)}>
 
-          </input>
+              </input>
-          <button className="aspect-square flex justify-center items-center" onClick={handleSearch}>
+              <button className="aspect-square flex justify-center items-center" onClick={handleSearch}>
-            
+                <span className="material-symbols-rounded text-black">
-          <span className="material-symbols-rounded text-black">
+                  search
-search
+                </span>
-</span>
+              </button></div>
-          </button></div>
 
+          </div>
+          <div className="listing">
+            {syllabi.map((syllabus, i) => {
+              return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} professor={syllabus.professor} />
+            })}
+            <SyllabusListing fileName={"syllabus.fileName"} className={"syllabus.className"} professor={"syllabus.professor"} />
+            <SyllabusListing fileName={"syllabus.fileName"} className={"syllabus.className"} professor={"syllabus.professor"} />
+          </div>
         </div>
-        <div className="listing">
+      </div>}
+      {isMobile === true && <div className="p-1 pt-4">
+        <h3 className="text-2xl font-bold">Easily View & Share College Syllabi JFKMCHS/Norco College</h3> <br></br>
+        <div className="">
+          <div className="flex space-x-1">
+            <button onClick={() => setOpenModal(true)} className=" bg-blue-700 p-2 text-yellow-50 rounded-lg flex flex-row">
+              <span className="flex justify-center items-center aspect-square flex-1"><i className="material-symbols-rounded">attach_file</i></span>
+              <span className="flex flex-col">            <span className="text-sm">add a syllabus</span>
+                <span className="text-xs">1 volunteer hours</span></span>
+            </button>
+            <div className="flex-1 flex bg-white rounded-lg">
+              <input type="search" onKeyDown={handleKeyDown} placeholder="search, hit enter or the search button to enter query" className="focus:outline-none bg-transparent border-none flex-1 text-black" value={query} onChange={(e) => setQuery(e.target.value)}>
+
+              </input>
+              <button className="aspect-square flex justify-center items-center" onClick={handleSearch}>
+                <span className="material-symbols-rounded text-black">
+                  search
+                </span>
+              </button></div>
+
+          </div>
+          <div className="listing">
           {syllabi.map((syllabus, i) => {
-            return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} professor={syllabus.professor} />
+            return (
-          })}
+              <>
-        </div>
+                <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} professor={syllabus.professor} />
+                {i === syllabi.length - 1 && <SyllabusListing key={i + 1} fileName={"syllabus.fileName"} className={"syllabus.className"} professor={"syllabus.professor"} />}
+              </>
               
-      </div>
+            )
+
+          })}
+          <SyllabusListing fileName={"syllabus.fileName"} className={"syllabus.className"} professor={"syllabus.professor"} />
+          <SyllabusListing fileName={"syllabus.fileName"} className={"syllabus.className"} professor={"syllabus.professor"} />
+          </div>
+        </div>
+      </div>}
 
 
       <Modal show={openModal} size="md" onClose={onCloseModal} popup>
@@ -148,49 +200,49 @@ search
           <div className="space-y-6">
             <h3 className="text-xl font-medium text-gray-900 dark:text-white">Upload a Syllabus</h3>
             <div>
-            <div className="mb-2 block">
-              <Label htmlFor="large-file-upload" value="(pdf, doc, or docx) *"></Label>
-            </div>
-            <form method="post" className="space-y-6">
-             <FileInput id="large-file-upload" onChange={handleFileChange} sizing="lg"  /> 
-             
-             <Accordion>
-            <Accordion.Panel isOpen={accordionOpen}>
-              <Accordion.Title className="">(Optional) Fill out information to get volunteer hours</Accordion.Title>
-              <Accordion.Content className="space-y-6">
-              <div>
               <div className="mb-2 block">
-                <Label htmlFor="email" value="Your email (cnusd school email is fine)" />
+                <Label htmlFor="large-file-upload" value="(pdf, doc, or docx) *"></Label>
               </div>
-              <TextInput
+              <form method="post" className="space-y-6">
-                id="email"
+                <FileInput id="large-file-upload" onChange={handleFileChange} sizing="lg" />
-                placeholder="name@company.com"
-                value={email}
-                // @ts-ignore
-                onChange={(event: Event) => setEmail(event?.target?.value)}
 
-              />
+                <Accordion>
+                  <Accordion.Panel isOpen={accordionOpen}>
+                    <Accordion.Title className="">(Optional) Fill out information to get volunteer hours</Accordion.Title>
+                    <Accordion.Content className="space-y-6">
+                      <div>
+                        <div className="mb-2 block">
+                          <Label htmlFor="email" value="Your email (cnusd school email is fine)" />
+                        </div>
+                        <TextInput
+                          id="email"
+                          placeholder="name@company.com"
+                          value={email}
+                          // @ts-ignore
+                          onChange={(event: Event) => setEmail(event?.target?.value)}
 
-            </div>
+                        />
-            <div>
-              <div className="mb-2 block">
-                <Label value="Your Name" />
-              </div>
-              <TextInput
-                placeholder="John Doe"
-                value={name}
-                // @ts-ignore
-                onChange={(event: Event) => setName(event?.target?.value)}
 
-              />
+                      </div>
-            </div>
+                      <div>
-            <p className="text-xs text-black">We will handle classifying and organizing your syllabus and will contact you within 3 days to give you community service hours — College Success Club</p>
+                        <div className="mb-2 block">
-              </Accordion.Content>
+                          <Label value="Your Name" />
-            </Accordion.Panel>
+                        </div>
-            </Accordion>
+                        <TextInput
+                          placeholder="John Doe"
+                          value={name}
+                          // @ts-ignore
+                          onChange={(event: Event) => setName(event?.target?.value)}
 
-             <Button onClick={uploadFile} className="bg-blue-700 text-white">Upload File</Button>
+                        />
-            </form>
+                      </div>
+                      <p className="text-xs text-black">We will handle classifying and organizing your syllabus and will contact you within 3 days to give you community service hours — College Success Club</p>
+                    </Accordion.Content>
+                  </Accordion.Panel>
+                </Accordion>
+
+                <Button onClick={uploadFile} className="bg-blue-700 text-white">Upload File</Button>
+              </form>
             </div>
 
           </div>

src/index.css

@@ -8,7 +8,7 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
+  color-scheme: dark;
   color: rgba(255, 255, 255, 0.87);
 
   font-synthesis: none;
@@ -29,7 +29,6 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }

src/syllabus_comp.tsx

@@ -1,11 +1,15 @@
 import "./syllabuslisting.css";
+import "./App.tsx";
 
 export interface ClassListing {
     className: string;
     professor: string;
     fileName: string;
 }
-
+function findIfMobile() {
+    //return true;
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  }
 function SyllabusListing({className, professor, fileName}: ClassListing) {
 
     async function handleDownload() {
@@ -17,15 +21,28 @@ function SyllabusListing({className, professor, fileName}: ClassListing) {
         window.URL.revokeObjectURL(`https://api.sharesyllabus.me/files/${fileName}`);
     }
 
-    return(
+    if (!findIfMobile()) {
-        <>
+
-            <div className="w-full flex bg-white text-black rounded-lg p-3">
+        return(
-                <span className=" font-extrabold">{className}</span>
+            <>
-                <span className="flex-1">{professor}</span>
+                <div className="w-full flex bg-white text-black rounded-lg p-3">
-                <button className="border-2 border-blue-600 p-1 rounded-lg" onClick={handleDownload}>download <br></br>pdf 📄</button>
+                    <span className=" font-extrabold">{className}</span>
-            </div>
+                    <span className="flex-1">{professor}</span>
-        </>
+                    <button className="border-2 border-blue-600 p-1 rounded-lg" onClick={handleDownload}>download <br></br>pdf 📄</button>
-    )
+                </div>
+            </>
+        )
+    } else {
+        return(
+            <>
+                <div className="w-full flex flex-col text-left bg-white space-y-2 text-black rounded-lg p-3">
+                    <span className=" font-extrabold">{className}</span>
+                    <span className="flex-1">{professor}</span>
+                    <button className="border-2 h-20 border-blue-600 p-1 rounded-lg" onClick={handleDownload}>view pdf 📄</button>
+                </div>
+            </>
+        )
+    }
 }
 
 export default SyllabusListing;