From 3c8a0833689e3e8e34ca1c8f67fa24f878ae9436 Mon Sep 17 00:00:00 2001
From: Derek Holloway <derek@mistox.com>
Date: Sat, 30 Aug 2025 08:11:43 -0700
Subject: [PATCH] Work on style of job viewer

---
 ToDo.yaml                                     |  3 +
 .../pages/jobs/viewer/jobviewer.component.css | 75 ++++++++++++++++-
 .../jobs/viewer/jobviewer.component.html      | 84 ++++++++++++-------
 3 files changed, 130 insertions(+), 32 deletions(-)

diff --git a/ToDo.yaml b/ToDo.yaml
index 5e2d436..f42cd88 100755
--- a/ToDo.yaml
+++ b/ToDo.yaml
@@ -51,5 +51,8 @@ Client:
         Need to impliment Add employee
         Need to impliment Remove employee
 
+    AI Resume Rating:
+        Allow companies to determine if the resume looks AI -> add rating
+
 database:
     Add Applied Jobs Table
\ No newline at end of file
diff --git a/src/Client/src/app/pages/jobs/viewer/jobviewer.component.css b/src/Client/src/app/pages/jobs/viewer/jobviewer.component.css
index e9653e1..1ce3c33 100644
--- a/src/Client/src/app/pages/jobs/viewer/jobviewer.component.css
+++ b/src/Client/src/app/pages/jobs/viewer/jobviewer.component.css
@@ -58,10 +58,13 @@
 }
 
 .content-desc {
-    border: solid 1px red;
-    border-radius: 5px;
     padding: 20px;
+    border-radius: 20px;
     margin: 0 100px;
+    background-color: var(--mistox-bg-medium);
+    border: 1px solid var(--mistox-border);
+    box-shadow: var(--mistox-shadow);
+    color: var(--mistox-text);
 }
 
 .content-desc h1 {
@@ -83,9 +86,75 @@
 }
 
 .job-timestamp {
+    display: flex;
     width: 100%;
+    justify-content: end;
 }
 
-.job-timestamp h1 {
+.job-warning {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    width: 100%;
+    background-color: #f00;
+}
+
+.split {
+    column-count: 2;
+    margin: 0 100px;
+}
+
+.nobreak {
+    break-inside: avoid;
+    padding: 20px;
+    border-radius: 20px;
+    margin-bottom: 20px;
+    background-color: var(--mistox-bg-medium);
+    border: 1px solid var(--mistox-border);
+    box-shadow: var(--mistox-shadow);
+    color: var(--mistox-text);
+}
+
+.detail-block {
+    padding: 20px;
+    border-radius: 20px;
+    margin-bottom: 20px;
+    background-color: var(--mistox-bg-light);
+    border: 1px solid var(--mistox-border);
+    box-shadow: var(--mistox-shadow);
+    color: var(--mistox-text);
+}
+
+.detail-block h1 {
     margin: 0;
+}
+
+.detail-block h2 {
+    margin: 0;
+}
+
+.description-box {
+    padding: 20px;
+    border-radius: 20px;
+    margin-bottom: 20px;
+    background-color: var(--mistox-bg-light);
+    border: 1px solid var(--mistox-border);
+    box-shadow: var(--mistox-shadow);
+    color: var(--mistox-text);
+}
+
+.description-box h1 {
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+}
+
+.skill-combo {
+    column-count: 2;
+}
+
+.bottom-bar {
+    display: grid;
+
 }
\ No newline at end of file
diff --git a/src/Client/src/app/pages/jobs/viewer/jobviewer.component.html b/src/Client/src/app/pages/jobs/viewer/jobviewer.component.html
index f5610f9..b0f8daf 100644
--- a/src/Client/src/app/pages/jobs/viewer/jobviewer.component.html
+++ b/src/Client/src/app/pages/jobs/viewer/jobviewer.component.html
@@ -23,46 +23,72 @@
     }
     @if (selectedJob != null) {
         <div class="job-details">
-            <div class="job-timestamp">
-                <h1>Opened: {{ selectedJob.createdTime }}</h1>
-                <h1>Modified: {{ selectedJob.modifiedTime }}</h1>
-            </div>
-
             @if (selectedJob.isDeleted){
                 <div class="job-warning">
                     <h2>THIS JOB POSTING IS CLOSED</h2>
                 </div>
             }
+            <div class="center-item">
+                <h1>{{ selectedJob.title }}</h1>
+            </div>
+            <div class="split">
+                <div class="nobreak">
+                    <h1>Job Details:</h1>
+                    <div class="detail-block">
+                        <h1>Job Type</h1>
+                        <h2>{{ selectedJob.jobType }}</h2>
+                    </div>
+                    
+                    <div class="detail-block">
+                        <h1>In Office:</h1>
+                        @if (selectedJob.remote){
+                            <h2>Remote</h2>
+                        } @else {
+                            <h2>On-Site</h2>
+                        }
+                    </div>
 
-            <h1>{{ selectedJob.title }}</h1>
-
-            <h1>{{ selectedJob.jobType }}</h1>
-            <h1>{{ selectedJob.remote }}</h1>
-
-            <h1>{{ selectedJob.salaryMin }}</h1>
-            <h1>{{ selectedJob.salaryMax }}</h1>
-            
-            <h1>{{ selectedJob.city }}</h1>
-            <h1>{{ selectedJob.stateOrRegion }}</h1>
-            <h1>{{ selectedJob.country }}</h1>
-            <h1>{{ selectedJob.postalCode }}</h1>
-
-            <div>
-                <h1>Required Skills</h1>
-                    @for(skill of selectedJob.skills; track skill.trackUUID){
-                        <div>
-                            <h1>{{ skill.name }}</h1>
-                            <h1>{{ skill.description }}</h1>
+                    <div class="detail-block">
+                        <h1>Pay Range:</h1>
+                        <h2>{{ selectedJob.salaryMin }} - {{ selectedJob.salaryMax }}</h2>
+                    </div>
+                    
+                    @if (!selectedJob.remote){
+                        <div class="detail-block">
+                            <h1>Location:</h1>
+                            <h2>{{ selectedJob.city }}, {{ selectedJob.stateOrRegion }} {{ selectedJob.country }} {{ selectedJob.postalCode }}</h2>
                         </div>
                     }
+
+                    <div class="detail-block">
+                        <h1>Required Skills:</h1>
+                            @for(skill of selectedJob.skills; track skill.trackUUID){
+                                <div class="skill-combo">
+                                    <div class="nobreak">
+                                        <h1>{{ skill.name }}</h1>
+                                    </div>
+                                    <div class="nobreak">
+                                        <h2>{{ skill.description }}</h2>
+                                    </div>
+                                </div>
+                            }
+                    </div>
+
+                    <div class="job-timestamp">
+                        <span>Opened: {{ selectedJob.createdTime }} | Last Updated: {{ selectedJob.modifiedTime }}</span>
+                    </div>
+                </div>
+                <div class="nobreak">
+                    <h1>Job Description: </h1>
+                    <div class="description-box">
+                        <h1>{{ selectedJob.description }}</h1>
+                    </div>
+                </div>
             </div>
 
-            <h1>{{ selectedJob.description }}</h1>
-            <div>
+            <div class="bottom-bar">
                 @for(resume of myResumes; track resume.trackUUID){
-                    <div>
-                        <button type="button" (click)="applyWithResume(resume)">APPLY USING RESUME: {{ resume.name }}</button>
-                    </div>
+                    <button type="button" (click)="applyWithResume(resume)">APPLY USING RESUME: {{ resume.name }}</button>
                 }
             </div>
         </div>