Stylize
This commit is contained in:
@@ -11,9 +11,8 @@
|
||||
<button type="button" (click)="nextStep()">Next</button>
|
||||
</div>
|
||||
<div class="footer-frame">
|
||||
<span>
|
||||
This should be your actual company name. It will be public on all the job postings you make.
|
||||
</span>
|
||||
<span>Company Name</span><br />
|
||||
<span>Cannot be changed later</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -28,9 +27,7 @@
|
||||
<button type="button" (click)="nextStep()">Next</button>
|
||||
</div>
|
||||
<div class="footer-frame">
|
||||
<span>This should be a link to your companies URL</span><br />
|
||||
<span>so that people searching for your company</span><br />
|
||||
<span>can find it with ease</span>
|
||||
<span>Link to your company URL</span><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,13 +36,13 @@
|
||||
<div #step class="sub-frame">
|
||||
<div class="center">
|
||||
<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" />
|
||||
<button type="button" (click)="prevStep()">Back</button>
|
||||
<button type="button" (click)="nextStep()">Next</button>
|
||||
</div>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
@@ -54,45 +51,54 @@
|
||||
<!-- Contact -->
|
||||
<div #step class="sub-frame">
|
||||
<div class="center">
|
||||
<div class="content-frame split">
|
||||
<div class="half-frame">
|
||||
<label>Company Email</label>
|
||||
<input name="email" [(ngModel)]="newListing.email" type="text" />
|
||||
</div>
|
||||
<div class="half-frame">
|
||||
<label>Company Phone Number</label>
|
||||
<input name="email" [(ngModel)]="newListing.phone" type="text" />
|
||||
<div class="content-frame">
|
||||
<div class="split">
|
||||
<div class="half-frame">
|
||||
<label>Company Email</label>
|
||||
<input name="email" [(ngModel)]="newListing.email" type="text" placeholder="Questions@mistox.com" />
|
||||
</div>
|
||||
<div class="half-frame">
|
||||
<label>Company Phone Number</label>
|
||||
<input name="email" [(ngModel)]="newListing.phone" type="text" placeholder="+1 800-000-0000" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" (click)="prevStep()">Back</button>
|
||||
<button type="button" (click)="nextStep()">Next</button>
|
||||
</div>
|
||||
<div class="footer-frame">
|
||||
<span>How clients can get in contact with you about the open job listings</span><br />
|
||||
</div>
|
||||
<button type="button" (click)="prevStep()">Back</button>
|
||||
<button type="button" (click)="nextStep()">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div #step class="sub-frame">
|
||||
<div class="center">
|
||||
<h2>Job Location</h2>
|
||||
<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 class="half-frame">
|
||||
<label>2 Letter State/Region</label>
|
||||
<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 class="content-frame">
|
||||
<div class="split">
|
||||
<div class="half-frame">
|
||||
<label>City</label>
|
||||
<input name="city" [(ngModel)]="newListing.city" type="text" placeholder="San Diego" />
|
||||
</div>
|
||||
<div class="half-frame">
|
||||
<label>2 Letter Country</label>
|
||||
<input name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" placeholder="US" />
|
||||
</div>
|
||||
<div class="half-frame">
|
||||
<label>2 Letter State/Region</label>
|
||||
<input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" placeholder="CA" />
|
||||
</div>
|
||||
<div class="half-frame">
|
||||
<label>Postal Code</label>
|
||||
<input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" placeholder="92020" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" (click)="prevStep()">Back</button>
|
||||
<button type="button" (click)="nextStep()">Next</button>
|
||||
</div>
|
||||
<div class="footer-frame">
|
||||
<span>The location of your company office or hq</span><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -105,6 +111,9 @@
|
||||
<button type="button" (click)="prevStep()">Back</button>
|
||||
<button type="button" (click)="nextStep()">Next</button>
|
||||
</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>
|
||||
|
||||
@@ -142,6 +151,9 @@
|
||||
<button type="button" (click)="prevStep()">Back</button>
|
||||
<button type="submit">CREATE COMPANY</button>
|
||||
</div>
|
||||
<div class="footer-frame">
|
||||
<span>Does everything look good</span><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -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 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -5,14 +23,65 @@
|
||||
}
|
||||
|
||||
.tile-frame {
|
||||
column-count: 4;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
column-gap: 20px;
|
||||
padding: 20px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.tile{
|
||||
background-color: var(--Mistox-Dark)\);
|
||||
height: 40px;
|
||||
background-color: var(--Mistox-Dark);
|
||||
color: var(--Mistox-White);
|
||||
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);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<!-- 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="tile">
|
||||
<h1>{{ cur.title }}</h1>
|
||||
@@ -11,14 +11,13 @@
|
||||
<h1>{{ cur.stateOrRegion }}</h1>
|
||||
<h1>{{ cur.country }}</h1>
|
||||
<h1>{{ cur.postalCode }}</h1>
|
||||
<h1>{{ cur.description }}</h1>
|
||||
<h1>Posted: {{ cur.createdTime }}</h1>
|
||||
<h1>Modified: {{ cur.modifiedTime }}</h1>
|
||||
</div>
|
||||
<button [routerLink]="['/jobs/edit']" [queryParams]="{ JobID: cur.id }" >EDIT</button>
|
||||
<button (click)="RemoveJobListing(cur.id)">DELETE</button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="post-job-frame">
|
||||
<button [routerLink]="['/jobs/new']">POST JOB</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,17 +25,20 @@
|
||||
<!-- Avaliable Jobs -->
|
||||
<div class="tile-frame" *ngFor="let cur of JobListingPage">
|
||||
<div class="tile">
|
||||
<h1>{{ cur.title }}</h1>
|
||||
<h1>{{ cur.jobType }}</h1>
|
||||
<h1>Is Remote: {{ cur.remote }}</h1>
|
||||
<h1>{{ cur.salaryMin }}</h1>
|
||||
<h1>{{ cur.salaryMax }}</h1>
|
||||
<h1>{{ cur.city }}</h1>
|
||||
<h1>{{ cur.stateOrRegion }}</h1>
|
||||
<h1>{{ cur.country }}</h1>
|
||||
<h1>{{ cur.postalCode }}</h1>
|
||||
<h1>{{ cur.description }}</h1>
|
||||
<h1>Posted: {{ cur.createdTime }}</h1>
|
||||
<h1>Modified: {{ cur.modifiedTime }}</h1>
|
||||
<div class="tile-title">
|
||||
<h1>{{ cur.title }}</h1>
|
||||
<h2>${{ cur.salaryMax }} - ${{ cur.salaryMin }}</h2>
|
||||
</div>
|
||||
<div class="tile-split">
|
||||
<h1>{{ cur.jobType }}</h1>
|
||||
<h1 *ngIf="cur.remote" >Remote</h1>
|
||||
</div>
|
||||
<div class="tile-split">
|
||||
<h1>{{ cur.city }}</h1>
|
||||
<h1>{{ cur.stateOrRegion }}</h1>
|
||||
</div>
|
||||
<div class="tile-button">
|
||||
<button [routerLink]="['/jobs/new']">VIEW LISTING</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -14,7 +14,7 @@ form {
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -31,6 +31,15 @@ form {
|
||||
border-radius: 10px;
|
||||
padding: 40px;
|
||||
break-inside: avoid;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer-frame {
|
||||
background-color: #00000044;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
break-inside: avoid;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.split {
|
||||
|
||||
Reference in New Issue
Block a user