Merge pull request #27 from metakgp/qol-frontend-changes

Responsive and Better Button
metakgp · Apr 19, 2024 · 37d9413 · 37d9413
2 parents d76ed3d + f198522
commit 37d9413
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 17 deletions.
diff --git a/frontend/src/components/SearchResults.tsx b/frontend/src/components/SearchResults.tsx
@@ -1,6 +1,7 @@
 import { Component, For, createEffect, createSignal } from "solid-js";
 import type { SearchResult } from "../types/types";
 import { Spinner } from "./Spinner";
+import { FiDownload as DownloadIcon } from "solid-icons/fi";
 
 type Props = {
   results: SearchResult[];
@@ -12,9 +13,9 @@ type Props = {
 const examMap = (exam: string) => {
   switch (exam) {
     case "midsem":
-      return "Mid Semester";
+      return "Midsem";
     case "endsem":
-      return "End Semester";
+      return "Endsem";
     default:
       return "Unknown";
   }
@@ -121,28 +122,26 @@ const SearchResults: Component<Props> = (props) => {
                       <tr>
                         <th>Year</th>
                         <th>Course Name</th>
-                        <th>Exam</th>
                       </tr>
                     </thead>
                     <tbody>
                       <For each={displayedResults()}>
                         {(result) => (
                           <tr class="result-card">
                             <td>{result.year}</td>
-                            <td>
-                              {decodeURIComponent(result.course_name).replaceAll("_", " ")} &nbsp; [
-                              <a
-                                class="download-btn"
-                                style={{ display: "inline-flex", gap: "5px", "align-items": "center" }}
-                                href={result.filelink}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
-                                PDF
-                              </a>
-                              ]
+                            <td style={{display: 'flex', "align-items": 'center'}}>
+                              <p>
+                              {decodeURIComponent(result.course_name).replaceAll("_", " ")}&nbsp;
+                              </p>
+                                <a
+                                  class="download-btn icon-btn"
+                                  href={result.filelink}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                >
+                                  {examMap(result.exam)} <DownloadIcon />
+                                </a>
                             </td>
-                            <td>{examMap(result.exam)}</td>
                           </tr>
                         )}
                       </For>

diff --git a/frontend/src/styles/styles.scss b/frontend/src/styles/styles.scss
@@ -106,7 +106,7 @@ select option {
 }
 
 .search-form {
-  padding: 20px;
+  padding: 20px 15%;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
@@ -178,6 +178,16 @@ select option {
     width: 100%;
     border-collapse: collapse;
 
+    .download-btn {
+      background-color: rgba($accent-color, 0.8);
+      color: rgba($fg-color, 0.75);
+      margin-left: auto;
+      font-weight: bold;
+
+      padding: 5px 8px;
+      border-radius: 5px;
+    }
+
     tr {
       width: fit-content;
     }
@@ -241,3 +251,29 @@ select option {
   color: rgba($fg-color, 0.8);
   animation: spin 1s infinite;
 }
+
+
+@media only screen and (max-width: 768px) {
+  .search-form {
+    padding: 0;
+  }
+
+  .search-results {
+    padding: 0.5rem 0;
+
+    .results-filter {
+      gap: 0rem;
+      padding: 0 1rem;
+
+      .select-wrapper {
+        width: 100%;
+      }
+    }
+
+    .search-results-table {
+      td,th {
+        padding: 10px;
+      }
+    }
+  }
+}