fix: job details redesign

This commit is contained in:
Jannat Patel
2022-07-01 17:57:52 +05:30
parent de0200f352
commit 56c51b73b0
2 changed files with 55 additions and 35 deletions

View File

@@ -1117,7 +1117,7 @@ pre {
border-radius: var(--border-radius-sm);
width: 50px;
height: 50px;
margin-right: 0.5rem;
margin-right: 1rem;
}
.job-card-parent {
@@ -1128,11 +1128,11 @@ pre {
.job-card-logo-section {
display: flex;
align-items: center;
margin-top: 1rem;
margin-top: 0.5rem;
}
.job-detail-card {
padding: 1.5rem;
padding: 1rem;
flex-direction: column;
}
@@ -1144,7 +1144,7 @@ pre {
.job-card-heading {
font-weight: 600;
color: var(--gray-900);
margin-bottom: 0.4rem;
margin-bottom: 0.5rem;
}
.course-head-container {
@@ -1463,6 +1463,17 @@ li {
align-items: center;
}
.job-actions {
display: flex;
align-items: flex-start;
margin-left: auto;
margin-bottom: 1rem;
}
.job-detail-header {
display: flex;
}
@media (max-width: 600px) {
.job-company {
flex-direction: column;
@@ -1480,4 +1491,12 @@ li {
.job-cards-parent {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.job-detail-header {
flex-wrap: wrap;
}
.job-actions {
margin-top: 1rem;
}
}

View File

@@ -10,41 +10,42 @@
<div class="common-page-style">
<div class="container">
{{ BreadCrumb(job) }}
<div class="common-card-style job-detail-card">
<div class="d-flex">
<div class="avatar avatar-medium align-self-center" title="{{ job.company_name}}">
<div class="avatar-frame company-logo" style="
background-image: url( {{ job.company_logo | urlencode }} );"></div>
</div>
<div class="ml-5">
<div class="vertically-center">
<div class="course-home-headings mb-0">{{ _(job.job_title) }}</div>
<div class="indicator-pill green ml-5"> {{ job.type }} </div>
</div>
<div class="d-flex align-items-center mt-2">
<a class="dark-links course-meta mr-5" href="{{ job.company_website }}">{{ job.company_name }}</a>
<div class="vertically-center course-meta mr-5">
<svg class="icon icon-sm">
<use class="" href="#icon-location">
</svg>
<div>{{ job.location }}</div>
</div>
<div class="course-meta"> {{ frappe.utils.format_date(job.creation, "medium") }} </div>
</div>
</div>
<div class="job-detail-header">
<span title="{{ job.company_name}}" style="background-image: url( {{ job.company_logo | urlencode }} );"
class="company-logo"></span>
{% set application_link = job.application_link if frappe.session.user != 'Guest' else '/login?redirect-to=/jobs/' + job.name %}
<div class="d-flex align-items-start ml-auto">
<a class="button is-primary mr-2"
href="{{ application_link }}">{{ _("Apply") }}</a>
<div class="button is-default mr-2" id="report" data-job="{{ job.name }}">{{ _("Report") }}</div>
{% if job.owner == frappe.session.user %}
<a class="button is-default button-links" href="/job-opportunity?name={{ job.name }}">Edit</a>
{% endif %}
</div>
</div>
<div class="job-card-info">
<div class="job-card-heading">{{ _(job.job_title) }}</div>
<div class="job-company course-meta">
<div class="mr-5">{{ job.company_name }}</div>
<div class="vertically-center">
<svg class="icon icon-sm">
<use class="" href="#icon-location">
</svg>
{{ job.location }}
</div>
</div>
<div class="job-card-logo-section course-meta">
<div class="indicator-pill green mr-5"> {{ job.type }} </div>
<div class="text-muted">{{ frappe.utils.format_date(job.creation, "medium") }}</div>
</div>
</div>
{% set application_link = job.application_link if frappe.session.user != 'Guest' else '/login?redirect-to=/jobs/' + job.name %}
<div class="job-actions">
<a class="button is-primary mr-2" href="{{ application_link }}"> {{ _("Apply") }} </a>
<div class="button is-default mr-2" id="report" data-job="{{ job.name }}"> {{ _("Report") }} </div>
{% if job.owner == frappe.session.user %}
<a class="button is-default button-links" href="/job-opportunity?name={{ job.name }}"> {{ _("Edit") }} </a>
{% endif %}
</div>
</div>
<div class="course-meta mt-10">{{ _(job.description) }}</div>
</div>