Merge pull request #51 from UoaWDCC/jolin/jobboard

Jolin/jobboard

README.MD

@@ -10,11 +10,11 @@
 - Don Lin (Back-end, Architecture)
 - Jack Haddad (Back-end, Front-end, Architecture)
 - Sienna Nguyen (Front-end, Back-end)
-- Claudia Chan (Design)
 - Frank Situ (Back-end, Architecture)
 - Danny Jung (Back-end, Front-end, Architecture)
 - Jolin Chen (Front-end)
 - Jaehoon Oh (Front-end, Back-end)
+- Josef Santos (Front-end)
 
 ## About
 

web/package.json

@@ -19,10 +19,10 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@mantine/carousel": "^7.11.2",
-    "@mantine/core": "7.11.2",
-    "@mantine/dropzone": "^7.11.2",
-    "@mantine/hooks": "^7.11.2",
+    "@mantine/carousel": "^7.12.0",
+    "@mantine/core": "^7.12.0",
+    "@mantine/dropzone": "^7.12.0",
+    "@mantine/hooks": "^7.12.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@tabler/icons-react": "^3.7.0",
     "embla-carousel-react": "^8.1.7",

web/src/app/components/JobBoard/JobBoard.module.css

@@ -1,23 +1,16 @@
-.filterContainer {
-  flex: 1;
-  display: flex;
-  max-width: 360px;
-  width: 100%;
-  flex-direction: column;
-}
-
 .listingContainer {
   flex: 3;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  max-width: 1200px;
+  flex-grow: 1;
   height: 100%;
 }
 
 .listingInnerContainer {
+  flex: 1;
   min-height: 85%;
   width: 100%;
+  margin: 0;
   display: grid;
   grid-template-columns: repeat(
     2,
@@ -27,19 +20,10 @@
   gap: 1rem;
 }
 
-@media (min-width: 1080px) {
-  .listingInnerContainer {
-    grid-template-columns: repeat(
-      3,
-      1fr
-    ); /* 3 columns, each taking up 1 fraction of available space */
-  }
-}
 .paginationContainer {
   display: flex;
   width: 100%;
   flex-direction: column;
-  justify-items: center;
   align-items: center;
 }
 
@@ -50,34 +34,25 @@
 
 .filterSubheading {
   color: var(--mantine-color-customAzureBlue-1);
-  font-weight: 700;
-  font-size: 1.2rem;
+  font-weight: 600;
+  font-size: 1.1rem;
 }
 
 .checkbox {
   margin: 0.8em 0;
 }
 
-.listItemContainer {
+.jobCard {
   background-color: var(--mantine-color-customCharcoalGrey-1);
   border-radius: 1rem;
   padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
 }
 
 .listItemTitle {
   font-size: 1.2rem;
   margin: 0;
 }
 
-.listItemCompanyContainer {
-  background-color: var(--mantine-color-customAzureBlue-1);
-  width: fit-content;
-  padding: 0.2rem 1rem;
-  border-radius: 2rem;
-}
 .listItemCompanyName {
   margin: 0;
 }
@@ -89,10 +64,38 @@
   font-size: 0.8rem;
 }
 
-.headingContainer {
-  flex: 2;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+.filterButton {
+  text-decoration: underline;
+  font-size: 1.2rem;
+}
+
+/* larger screen */
+@media (min-width: 1080px) {
+  .listingInnerContainer {
+    grid-template-columns: repeat(
+      3,
+      1fr
+    ); /* 3 columns, each taking up 1 fraction of available space */
+  }
+
+  .searchInputContainer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .searchInput {
+    width: 60%;
+    align-self: flex-end;
+  }
+}
+
+/* mobile view */
+@media (max-width: 768px) {
+  .listingInnerContainer {
+    grid-template-columns: repeat(
+      1,
+      1fr
+    ); /* 3 columns, each taking up 1 fraction of available space */
+  }
 }