derek/boredcareers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stylize

Browse Source
This commit is contained in:
Derek Holloway
2025-07-25 22:26:35 -07:00
parent 985d021888
commit dfdadd9509
4 changed files with 146 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Client/src/app/pages/main/company/connect/companyconnect.component.html
+29 -17
View File
@@ -11,9 +11,8 @@
<button type="button" (click)="nextStep()">Next</button> <button type="button" (click)="nextStep()">Next</button>
</div> </div>
<div class="footer-frame"> <div class="footer-frame">
<span> <span>Company Name</span><br />
This should be your actual company name. It will be public on all the job postings you make. <span>Cannot be changed later</span>
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -28,9 +27,7 @@
<button type="button" (click)="nextStep()">Next</button> <button type="button" (click)="nextStep()">Next</button>
</div> </div>
<div class="footer-frame"> <div class="footer-frame">
<span>This should be a link to your companies URL</span><br /> <span>Link to your company URL</span><br />
<span>so that people searching for your company</span><br />
<span>can find it with ease</span>
</div> </div>
</div> </div>
</div> </div>
@@ -39,13 +36,13 @@
<div #step class="sub-frame"> <div #step class="sub-frame">
<div class="center"> <div class="center">
<div class="content-frame"> <div class="content-frame">
<label>Company LOGO URL</label> <label>Company Logo URL</label>
<input name="logoURL" [(ngModel)]="newListing.logoURL" type="text" placeholder="https://mistox.com/img/logo.png" /> <input name="logoURL" [(ngModel)]="newListing.logoURL" type="text" placeholder="https://mistox.com/img/logo.png" />
<button type="button" (click)="prevStep()">Back</button> <button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button> <button type="button" (click)="nextStep()">Next</button>
</div> </div>
<div class="footer-frame"> <div class="footer-frame">
<span>This should be a link to your companies Logo</span><br /> <span>Link to your company Logo</span><br />
<span>This will show on all your job listings</span><br /> <span>This will show on all your job listings</span><br />
</div> </div>
</div> </div>
@@ -54,45 +51,54 @@
<!-- Contact --> <!-- Contact -->
<div #step class="sub-frame"> <div #step class="sub-frame">
<div class="center"> <div class="center">
<div class="content-frame split"> <div class="content-frame">
<div class="split">
<div class="half-frame"> <div class="half-frame">
<label>Company Email</label> <label>Company Email</label>
<input name="email" [(ngModel)]="newListing.email" type="text" /> <input name="email" [(ngModel)]="newListing.email" type="text" placeholder="Questions@mistox.com" />
</div> </div>
<div class="half-frame"> <div class="half-frame">
<label>Company Phone Number</label> <label>Company Phone Number</label>
<input name="email" [(ngModel)]="newListing.phone" type="text" /> <input name="email" [(ngModel)]="newListing.phone" type="text" placeholder="+1 800-000-0000" />
</div> </div>
</div> </div>
<button type="button" (click)="prevStep()">Back</button> <button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button> <button type="button" (click)="nextStep()">Next</button>
</div> </div>
<div class="footer-frame">
<span>How clients can get in contact with you about the open job listings</span><br />
</div>
</div>
</div> </div>
<!-- Location --> <!-- Location -->
<div #step class="sub-frame"> <div #step class="sub-frame">
<div class="center"> <div class="center">
<h2>Job Location</h2> <div class="content-frame">
<div class="content-frame split"> <div class="split">
<div class="half-frame"> <div class="half-frame">
<label>City</label> <label>City</label>
<input name="city" [(ngModel)]="newListing.city" type="text" /> <input name="city" [(ngModel)]="newListing.city" type="text" placeholder="San Diego" />
</div> </div>
<div class="half-frame"> <div class="half-frame">
<label>2 Letter Country</label> <label>2 Letter Country</label>
<input name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" /> <input name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" placeholder="US" />
</div> </div>
<div class="half-frame"> <div class="half-frame">
<label>2 Letter State/Region</label> <label>2 Letter State/Region</label>
<input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" /> <input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" placeholder="CA" />
</div> </div>
<div class="half-frame"> <div class="half-frame">
<label>Postal Code</label> <label>Postal Code</label>
<input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" /> <input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" placeholder="92020" />
</div>
</div> </div>
<button type="button" (click)="prevStep()">Back</button> <button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button> <button type="button" (click)="nextStep()">Next</button>
</div> </div>
<div class="footer-frame">
<span>The location of your company office or hq</span><br />
</div>
</div> </div>
</div> </div>
@@ -105,6 +111,9 @@
<button type="button" (click)="prevStep()">Back</button> <button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button> <button type="button" (click)="nextStep()">Next</button>
</div> </div>
<div class="footer-frame">
<span>Describe your buisiness so that people applying can understand the core values and culture</span><br />
</div>
</div> </div>
</div> </div>
@@ -142,6 +151,9 @@
<button type="button" (click)="prevStep()">Back</button> <button type="button" (click)="prevStep()">Back</button>
<button type="submit">CREATE COMPANY</button> <button type="submit">CREATE COMPANY</button>
</div> </div>
<div class="footer-frame">
<span>Does everything look good</span><br />
</div>
</div> </div>
</div> </div>
</form> </form>
src/Client/src/app/pages/main/jobs/jobs.component.css
+72 -3
View File
@@ -1,3 +1,21 @@
button {
width: 150px;
border-radius: 5px;
margin: 10px;
text-align: center;
padding: 15px 0;
transition: .5s;
background-color: #0000;
border: 1px solid var(--Mistox-White);
color: var(--Mistox-White);
text-decoration: none;
}
button:hover {
background-color: #00000044;
color: var(--Mistox-Light);
}
.full-width { .full-width {
display: block; display: block;
width: 100%; width: 100%;
@@ -5,14 +23,65 @@
} }
.tile-frame { .tile-frame {
column-count: 4; display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 20px; column-gap: 20px;
padding: 20px; padding: 20px;
width: calc(100% - 40px); width: calc(100% - 40px);
} }
.tile{ .tile{
background-color: var(--Mistox-Dark)\); background-color: var(--Mistox-Dark);
height: 40px; color: var(--Mistox-White);
break-inside: avoid; break-inside: avoid;
padding: 20px;
border-radius: 20px;
margin-bottom: 20px;
}
.jobs-frame {
width: 100%;
background-color: #8888;
border-top: 2px solid black;
}
.post-job-frame {
display: flex;
justify-content: center;
padding: 10px 0;
}
.tile-title {
text-align: center;
border-bottom: 1px solid;
}
.tile-title h1 {
font-size: 40px;
margin: 5px 0;
}
.tile-title h2 {
font-size: 14px;
}
.tile-split {
columns: 2;
text-align: center;
padding: 10px 0;
}
.tile-split h1 {
margin: 0;
}
.tile-button {
display: flex;
width: 100%;
justify-content: center;
}
.post-job-frame button {
border-color: var(--Mistox-Black);
color: var(--Mistox-Black);
} }
src/Client/src/app/pages/main/jobs/jobs.component.html
+13 -11
View File
@@ -1,5 +1,5 @@
<!-- My Jobs --> <!-- My Jobs -->
<div class="jobs-frame"> <div *ngIf="auth.isLoggedIn" class="jobs-frame">
<div class="posted-jobs-frame" *ngFor="let cur of MyJobListings"> <div class="posted-jobs-frame" *ngFor="let cur of MyJobListings">
<div class="tile"> <div class="tile">
<h1>{{ cur.title }}</h1> <h1>{{ cur.title }}</h1>
@@ -11,14 +11,13 @@
<h1>{{ cur.stateOrRegion }}</h1> <h1>{{ cur.stateOrRegion }}</h1>
<h1>{{ cur.country }}</h1> <h1>{{ cur.country }}</h1>
<h1>{{ cur.postalCode }}</h1> <h1>{{ cur.postalCode }}</h1>
<h1>{{ cur.description }}</h1>
<h1>Posted: {{ cur.createdTime }}</h1> <h1>Posted: {{ cur.createdTime }}</h1>
<h1>Modified: {{ cur.modifiedTime }}</h1> <h1>Modified: {{ cur.modifiedTime }}</h1>
</div> </div>
<button [routerLink]="['/jobs/edit']" [queryParams]="{ JobID: cur.id }" >EDIT</button> <button [routerLink]="['/jobs/edit']" [queryParams]="{ JobID: cur.id }" >EDIT</button>
<button (click)="RemoveJobListing(cur.id)">DELETE</button> <button (click)="RemoveJobListing(cur.id)">DELETE</button>
</div> </div>
<div> <div class="post-job-frame">
<button [routerLink]="['/jobs/new']">POST JOB</button> <button [routerLink]="['/jobs/new']">POST JOB</button>
</div> </div>
</div> </div>
@@ -26,17 +25,20 @@
<!-- Avaliable Jobs --> <!-- Avaliable Jobs -->
<div class="tile-frame" *ngFor="let cur of JobListingPage"> <div class="tile-frame" *ngFor="let cur of JobListingPage">
<div class="tile"> <div class="tile">
<div class="tile-title">
<h1>{{ cur.title }}</h1> <h1>{{ cur.title }}</h1>
<h2>${{ cur.salaryMax }} - ${{ cur.salaryMin }}</h2>
</div>
<div class="tile-split">
<h1>{{ cur.jobType }}</h1> <h1>{{ cur.jobType }}</h1>
<h1>Is Remote: {{ cur.remote }}</h1> <h1 *ngIf="cur.remote" >Remote</h1>
<h1>{{ cur.salaryMin }}</h1> </div>
<h1>{{ cur.salaryMax }}</h1> <div class="tile-split">
<h1>{{ cur.city }}</h1> <h1>{{ cur.city }}</h1>
<h1>{{ cur.stateOrRegion }}</h1> <h1>{{ cur.stateOrRegion }}</h1>
<h1>{{ cur.country }}</h1> </div>
<h1>{{ cur.postalCode }}</h1> <div class="tile-button">
<h1>{{ cur.description }}</h1> <button [routerLink]="['/jobs/new']">VIEW LISTING</button>
<h1>Posted: {{ cur.createdTime }}</h1> </div>
<h1>Modified: {{ cur.modifiedTime }}</h1>
</div> </div>
</div> </div>
src/Client/src/app/pages/main/jobs/new/jobnew.component.css
+10 -1
View File
@@ -14,7 +14,7 @@ form {
.center { .center {
width: 100%; width: 100%;
display: flex; display: grid;
justify-content: center; justify-content: center;
} }
@@ -31,6 +31,15 @@ form {
border-radius: 10px; border-radius: 10px;
padding: 40px; padding: 40px;
break-inside: avoid; break-inside: avoid;
margin-bottom: 20px;
}
.footer-frame {
background-color: #00000044;
border-radius: 10px;
padding: 10px;
break-inside: avoid;
margin-bottom: 20px;
} }
.split { .split {