Create UI flow for New Job

src/Client/src/app/pages/main/jobs/new/jobnew.component.css

@@ -1,3 +1,75 @@
+.title-text {
+    width: 100%;
+    text-align: center;
+}
+
+form {
+    display: grid;
+    grid-template-areas: "stack";
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    transition: 0.5s;
+}
+
+.center {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.sub-frame {
+    position: relative;
+    grid-area: stack;
+    transition: 0.5s;
+    width: 100%;
+    text-align: center;
+}
+
+.content-frame {
+    background-color: #00000088;
+    border-radius: 10px;
+    padding: 40px;
+    break-inside: avoid;
+}
+
+.split {
+    column-count: 2;
+}
+
+.half-frame {
+    width: 400px;
+    break-inside: avoid;
+}
+
+.content-frame label {
+    color: #FFF;
+}
+
+.content-frame textarea {
+    width: calc(100% - 40px);
+    margin: 0 20px;
+    height: 200px;
+    resize: none;
+}
+
+.content-frame input {
+    width: calc(50% - 24px);
+    margin: 0 calc(25% + 10px);
+    margin-bottom: 20px;
+    appearance: textfield;
+}
+
+.content-frame input:focus ~ label {
+    color: green;
+}
+
+.content-frame select {
+    width: calc(50% - 24px);
+    margin: 0 calc(25% + 10px);
+    margin-bottom: 20px;
+}
+
 .tile-frame {
     column-count: 4;
     column-gap: 20px;

src/Client/src/app/pages/main/jobs/new/jobnew.component.html

@@ -1,42 +1,80 @@
+<div class="title-text">
+    <h1>POST A NEW JOB</h1>
+</div>
 <form (ngSubmit)="PostJobListing(newListing)">
-    <div>
+    <!-- Title -->
-        <h1>Title</h1>
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame">
+                <label>Title</label>
                 <input name="title" [(ngModel)]="newListing.title" type="text" />
+                <button type="button" (click)="nextStep()">Next</button>
             </div>
-    <div>
-        <h1>Description</h1>
-        <input name="description" [(ngModel)]="newListing.description" type="text" />
         </div>
-    <div>
-        <div>
-            <h1>Postal Code</h1>
-            <input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" />
     </div>
-        <div>
+
-            <h1>Country</h1>
+    <!-- Description -->
-            <input name="country" [(ngModel)]="newListing.country" type="text" />
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame">
+                <label>Description</label>
+                <textarea name="description" [(ngModel)]="newListing.description" type="text"></textarea>
+                <button type="button" (click)="prevStep()">Back</button>
+                <button type="button" (click)="nextStep()">Next</button>
             </div>
-        <div>
-            <h1>State/Region</h1>
-            <input name="stateOrRegion" [(ngModel)]="newListing.stateOrRegion" type="text" />
         </div>
-        <div>
+    </div>
-            <h1>City</h1>
+
+    <!-- Location -->
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame split">
+                <div class="half-frame">
+                    <label>City</label>
                     <input name="city" [(ngModel)]="newListing.city" type="text" />
                 </div>
+                <div class="half-frame">
+                    <label>2 Letter Country</label>
+                    <input name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" />
                 </div>
-    <div>
+                <div class="half-frame">
-        <div>
+                    <label>2 Letter State/Region</label>
-            <h1>Minimum Salary</h1>
+                    <input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" />
+                </div>
+                <div class="half-frame">
+                    <label>Postal Code</label>
+                    <input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" />
+                </div>
+                <button type="button" (click)="prevStep()">Back</button>
+                <button type="button" (click)="nextStep()">Next</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Salary Range -->
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame split">
+                <div class="half-frame">
+                    <label>Minimum Salary</label>
                     <input name="salaryMin" [(ngModel)]="newListing.salaryMin" type="number" />
                 </div>
-        <div>
+                <div class="half-frame">
-            <h1>Maximum Salary</h1>
+                    <label>Maximum Salary</label>
                     <input name="salaryMax" [(ngModel)]="newListing.salaryMax" type="number" />
                 </div>
+                <button type="button" (click)="prevStep()">Back</button>
+                <button type="button" (click)="nextStep()">Next</button>
             </div>
-    <div>
+        </div>
-        <h1>Job Type</h1>
+    </div>
+
+    <!-- Job Type -->
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame split">
+                <div class="half-frame">
+                    <label>Job Type</label>
                     <select name="jobType" [(ngModel)]="newListing.jobType">
                         <option value="">-- Select Job Type --</option>
                         <option value="Full-time">Full-time</option>
@@ -46,11 +84,23 @@
                         <option value="Internship">Internship</option>
                     </select>
                 </div>
-    <div>
+                <div class="half-frame">
-        <h1>Remote Position</h1>
+                    <label>Remote Position</label>
                     <input name="remote" [(ngModel)]="newListing.remote" type="checkbox" />
                 </div>
-    <div>
+                <button type="button" (click)="prevStep()">Back</button>
+                <button type="button" (click)="nextStep()">Next</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Submit -->
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame">
+                <button type="button" (click)="prevStep()">Back</button>
                 <button type="submit">CREATE JOB LISTING</button>
             </div>
+        </div>
+    </div>
 </form>

src/Client/src/app/pages/main/jobs/new/jobnew.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
@@ -15,6 +15,9 @@ import { Authentication } from 'app/services/Authentication';
 })
 export class JobNewComponent {
 
+  @ViewChildren('step') formSteps!: QueryList<ElementRef<HTMLDivElement>>;
+  currentStep: number = 0;
+
   public newListing: JobListing = new JobListing();
   public ErrorMsg: string = "";
 
@@ -22,6 +25,44 @@ export class JobNewComponent {
     this.title.setTitle("Jobs - new | BoredCareers");
   };
 
+  ngAfterViewInit(){
+    this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
+      if (i === this.currentStep) {
+        step.nativeElement.style.left = '0%';
+      } else if (i < this.currentStep) {
+        step.nativeElement.style.left = '-100%';
+      } else {
+        step.nativeElement.style.left = '100%';
+      }
+    });
+  }
+
+  nextStep(){
+    this.currentStep += 1;
+    this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
+      if (i === this.currentStep) {
+        step.nativeElement.style.left = '0%';
+      } else if (i < this.currentStep) {
+        step.nativeElement.style.left = '-100%';
+      } else {
+        step.nativeElement.style.left = '100%';
+      }
+    });
+  }
+
+  prevStep(){
+    this.currentStep -= 1;
+    this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
+      if (i === this.currentStep) {
+        step.nativeElement.style.left = '0%';
+      } else if (i < this.currentStep) {
+        step.nativeElement.style.left = '-100%';
+      } else {
+        step.nativeElement.style.left = '100%';
+      }
+    });
+  }
+
   PostJobListing(jobListing: JobListing){
     this.http.post("api/joblisting", jobListing).subscribe({
       next: data => {