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[]>([]);
@@ -89,8 +93,18 @@ function App() {
   }, [tempFileId])
 
 
+
   useEffect(() => {
     handleSearch();
+
+    if (findIfMobile()) {
+      // Code for mobile devices
+      setIsMobile(true);
+      console.log("mobile")
+    } else {
+      // Code for desktop devices
+      console.log("pc")
+    }
   },
     [])
 
@@ -113,20 +127,20 @@ function App() {
   return (
     <>
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+      {isMobile === false && <div className="place-items-center p-10">
         <h3 className="text-2xl font-bold text-center">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">2 volunteer hours</span></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>
@@ -137,9 +151,47 @@ search
             {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>}
+      {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} />
+                {i === syllabi.length - 1 && <SyllabusListing key={i + 1} 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>}
 
 
       <Modal show={openModal} size="md" onClose={onCloseModal} popup>

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,6 +21,8 @@ function SyllabusListing({className, professor, fileName}: ClassListing) {
         window.URL.revokeObjectURL(`https://api.sharesyllabus.me/files/${fileName}`);
     }
 
+    if (!findIfMobile()) {
+
         return(
             <>
                 <div className="w-full flex bg-white text-black rounded-lg p-3">
@@ -26,6 +32,17 @@ function SyllabusListing({className, professor, fileName}: ClassListing) {
                 </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;