Merge pull request #92 from uday-kalyan-s/fix-input-overflow

Make UI more responsive and CSS cleanup

Author: harshkhandeparkar

frontend/src/components/SearchBar.tsx

@@ -40,17 +40,15 @@ const SearchBar: React.FC<SearchBarProps> = ({ onSelectProfessor }) => {
   return (
     <form className="search-bar-container" onSubmit={onSubmitForm}>
       <div className="input-wrapper">
-        <div>
-          <FaSearch id="search-icon" />
-          <input
-            className="input"
-            type="text"
-            placeholder="Who are you looking for?"
-            value={searchName}
-            autoFocus={true}
-            onChange={(e) => handleChange(e.target.value)}
-          />
-        </div>
+        <FaSearch id="search-icon" />
+        <input
+          className="input"
+          type="text"
+          placeholder="Who are you looking for?"
+          value={searchName}
+          autoFocus={true}
+          onChange={(e) => handleChange(e.target.value)}
+        />
       </div>
       {dropdownVisibility && (
         <div className="dropdown">

frontend/src/components/Table.tsx

@@ -32,11 +32,10 @@ function Table() {
       {selectedProfessor && (
         <div className="table-container">
           <div className="table-caption">
-            <span>
+            <span className="space"></span>
               <a href={`${selectedProfessor.prof.profile_url}`} target="_blank">
                 {selectedProfessor.prof.name}
               </a>
-            </span>
             <span className="dept space">|</span>
             <span className="dept">{selectedProfessor.prof.dept_code}</span>
           </div>

frontend/src/index.css

@@ -4,40 +4,28 @@
 }
 
 .footer-text {
-  bottom: 0px;
-  margin: 0 auto;
-  left: 0;
+  margin: 0;
   padding-top: 1rem;
   padding-bottom: 2px;
-  width: 100%;
   text-align: center;
-  color: black;
 }
 
 .main {
-  display: flex;
-  margin: 0 auto;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
   text-align: center;
 
   .logo {
     max-width: 100%;
     height: auto;
-    margin-bottom: -70px;
   }
 
   .doodle {
-    width: 30%;
-    margin-top: -48px;
+    width: 90%;
+    max-width: 500px;
   }
 }
 
 p {
-  margin: 0 auto !important;
-  text-align: center !important;
-  width: 70% !important;
+  margin: 5vh;
 }
 
 * {
@@ -47,39 +35,32 @@ p {
 h1 {
   font-size: 60px;
   font-weight: 200;
+  margin: 0;
 }
 
 .input-wrapper {
-  position: relative;
-  color: black;
-  width: 100%;
-  height: 2.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-items: center;
+  align-items: center;
   border: none;
   border-radius: 10px;
-  padding: 0 15px;
+  padding: 7px;
   box-shadow: 0px 0px 8px #ddd;
   background-color: white;
-  display: flex;
-  margin-bottom: 20px;
 }
 
 .search-bar-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  margin: 0 auto;
-  width: 45%;
-  margin-top: 20px;
-  justify-content: center;
-  align-items: center;
+  width: 100%;
+  width: fit-content;
+  max-width: 90%;
+  padding: 10px;
+  min-width: 40%;
 }
 
 .input-wrapper input {
-  color: black;
   background-color: transparent;
-  height: 100%;
   font-size: 1.25rem;
-  width: 500px;
   border: none;
   margin-left: 10px;
   padding-left: 15px;
@@ -90,24 +71,17 @@ input:focus {
 }
 
 #search-icon {
-  position: absolute;
-  top: 50%;
-  left: 13px;
-  transform: translateY(-50%);
   color: royalblue;
-  margin-right: 10px;
 }
 
 .dropdown {
   width: 100%;
-  background-color: white;
-  max-height: 250px;
+  margin-top: 10px;
 }
 
 .dropdown-row {
   padding: 10px;
   cursor: pointer;
-  color: black;
   outline: none;
 }
 
@@ -127,10 +101,8 @@ a:hover {
 .search-results {
   display: flex;
   flex-direction: column;
-  flex-wrap: wrap;
-  width: 100%;
-  height: 100%;
   align-items: center;
+  justify-content: center;
 
   .time-table {
     display: flex;
@@ -147,22 +119,36 @@ a:hover {
   display: none;
 }
 
-.table-caption {
+.table-container {
   display: flex;
-  justify-content: center;
-  font-weight: "lighter";
+  flex-direction: column;
+  align-items: center;
+}
 
+.table-caption {
+  display: flex;
   .dept {
     font-size: 2rem;
+    display: inline;
+    
   }
 
   .space {
     margin: 0 8px;
+    display: inline;
   }
 
   a {
     font-size: 2rem;
   }
+  @media screen and (max-width: 700px) {
+    a {
+      max-width: 300px;
+      overflow-x: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
 }
 
 .table {
@@ -174,7 +160,7 @@ a:hover {
   overflow-x: auto;
   /*table-layout: fixed;*/
 
-
+  /* margin: 0 auto; */
   td {
     padding: 8px 2px;
     border: 1px solid #ddd;