Mobile friendly the job page

src/Client/src/app/pages/jobs/jobs.component.css

@@ -16,6 +16,7 @@ button {
 
 .top-bar {
     display: flex;
+    flex-wrap: wrap;
     break-inside: avoid;
     padding: 20px;
     border-radius: 20px;
@@ -28,7 +29,8 @@ button {
 
 .top-bar-sub {
     display: flex;
-    height: 20px;
+    height: 40px;
+    align-items: center;
 }
 
 .top-bar-sub :nth-child(1) {
@@ -39,7 +41,9 @@ button {
 .top-bar-sub :nth-child(2) {
     margin-right: 50px;
     margin-left: 5px;
-    height: 15px;
+    margin-top: 0;
+    padding: initial;
+    height: 20px;
 }
 
 .full-width {
@@ -115,6 +119,19 @@ button {
     color: var(--Mistox-Black);
 }
 
+.jobs-per-page {
+    display: flex;
+    justify-content: end;
+    padding: 20px;
+    padding-top: 0;
+}
+
+.jobs-per-page h1 {
+    margin: 0;
+    margin-right: 5px;
+    font-size: 20px;
+}
+
 @media (max-width: 1920px) {
     .tile-frame{
         grid-template-columns: repeat(3, 1fr);

src/Client/src/app/pages/jobs/jobs.component.html

@@ -2,33 +2,37 @@
 <div class="top-bar">
     <div class="top-bar-sub">
         <h1>Country</h1>
-        <input name="CountryCode" [(ngModel)]="currentFilter.CountryCode" (ngModelChange)="reloadFilters()" type="text" />
+        <input name="CountryCode" [(ngModel)]="currentFilter.CountryCode" (ngModelChange)="checkUpdate()" type="text" />
     </div>
     <div class="top-bar-sub">
         <h1>Postal Code</h1>
-        <input name="PostalCode" [(ngModel)]="currentFilter.PostalCode" (ngModelChange)="reloadFilters()" type="text" />
+        <input name="PostalCode" [(ngModel)]="currentFilter.PostalCode" (ngModelChange)="checkUpdate()" type="text" />
     </div>
     @if (currentFilter.CountryCode != null && currentFilter.CountryCode !== "" && currentFilter.PostalCode != null && currentFilter.PostalCode !== ""){
         <div class="top-bar-sub">
             <h1>Distance</h1>
-            <input name="Distance" [(ngModel)]="currentFilter.Distance" (ngModelChange)="reloadFilters()" type="number" />
+            <input name="Distance" [(ngModel)]="currentFilter.Distance" type="number" />
         </div>
     }
     <div class="top-bar-sub">
         <h1>Job Type</h1>
-        <input name="CountryCode" [(ngModel)]="currentFilter.JobType" (ngModelChange)="reloadFilters()" type="text" />
+        <input name="CountryCode" [(ngModel)]="currentFilter.JobType" type="text" />
     </div>
     <div class="top-bar-sub">
         <h1>Remote</h1>
-        <input name="Remote" [(ngModel)]="currentFilter.Remote" (ngModelChange)="reloadFilters()" type="checkbox" />
+        <input name="Remote" [(ngModel)]="currentFilter.Remote" type="checkbox" />
     </div>
     <div class="top-bar-sub">
         <h1>Minimum Salary</h1>
-        <input name="SalaryMin" [(ngModel)]="currentFilter.SalaryMin" (ngModelChange)="reloadFilters()" type="number" />
+        <input name="SalaryMin" [(ngModel)]="currentFilter.SalaryMin" type="number" />
     </div>
     <div class="top-bar-sub">
         <h1>Maximum Salary</h1>
-        <input name="SalaryMax" [(ngModel)]="currentFilter.SalaryMax" (ngModelChange)="reloadFilters()" type="number" />
+        <input name="SalaryMax" [(ngModel)]="currentFilter.SalaryMax" type="number" />
+    </div>
+    <div class="top-bar-sub">
+        <h1></h1>
+        <input name="ApplyButton" style="height: 25px;" value="APPLY" type="button" (click)="reloadFilters()" />
     </div>
 </div>
 
@@ -44,6 +48,8 @@
                 <h1>{{ cur.jobType }}</h1>
                 @if(cur.remote){
                     <h1>Remote</h1>
+                }@else{
+                    <h1>In-Person</h1>
                 }
             </div>
             <div class="tile-split">
@@ -55,8 +61,9 @@
             </div>
         </div>
     }
-    <div>
-        <h1>Jobs Per Page</h1>
-        <input name="JobsPerPage" [(ngModel)]="currentFilter.JobsPerPage" (ngModelChange)="reloadFilters()" type="number" />
-    </div>
+</div>
+
+<div class="jobs-per-page">
+    <h1>Jobs Per Page</h1>
+    <input name="JobsPerPage" [(ngModel)]="currentFilter.JobsPerPage" (ngModelChange)="reloadFilters()" type="number" />
 </div>

src/Client/src/app/pages/jobs/jobs.component.ts

@@ -38,6 +38,12 @@ export class JobsComponent {
     });
   }
 
+  checkUpdate(){
+    if ( this.currentFilter.PostalCode === "" || this.currentFilter.CountryCode === "" ){
+      this.currentFilter.Distance = null;
+    }
+  }
+
   reloadFilters(){
     var queryBuilder = "api/joblisting?PageQuantity=" + this.currentFilter.JobsPerPage + "&Page=" + this.currentFilter.CurrentPage;