eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #350 from pateljannat/job-board-redesign

Browse Source
This commit is contained in:
Jannat Patel
2022-07-01 18:08:43 +05:30
committed by GitHub
parent 1aa82dd03e 56c51b73b0
commit e467aba32f
3 changed files with 143 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
lms/public/css/style.css
View File

@@ -1105,14 +1105,19 @@ pre {
}
.job-card {
display: flex;
align-items: center;
position: relative;
position: relative;
padding: 1rem;
}
.company-logo {
background-position: center;
background-size: 42px;
background-position: center;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: var(--border-radius-sm);
width: 50px;
height: 50px;
margin-right: 1rem;
}
.job-card-parent {
@@ -1121,15 +1126,13 @@ pre {
}
.job-card-logo-section {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
margin-left: auto;
display: flex;
align-items: center;
margin-top: 0.5rem;
}
.job-detail-card {
padding: 1.5rem;
padding: 1rem;
flex-direction: column;
}
@@ -1138,15 +1141,10 @@ pre {
margin-bottom: 1.875rem;
}
.job-list-card {
padding: 1.25rem 1.56rem;
flex-direction: column;
}
.job-card-heading {
font-weight: 600;
color: var(--gray-900);
margin-bottom: 0.4rem;
margin-bottom: 0.5rem;
}
.course-head-container {
@@ -1451,3 +1449,54 @@ li {
.discussions-parent .empty-state {
background-color: var(--gray-200);
}
.job-cards-parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
-moz-column-gap: 40px;
grid-gap: 1rem;
align-items: center;
}
.job-company {
display: flex;
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;
align-items: inherit;
}
}
@media (max-width: 1200px) {
.job-cards-parent {
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
}
@media (max-width: 500px) {
.job-cards-parent {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.job-detail-header {
flex-wrap: wrap;
}
.job-actions {
margin-top: 1rem;
}
}

93
lms/www/jobs/index.html
View File

@@ -8,63 +8,60 @@
{% block content %}
<div class="common-page-style">
<div class="container">
{% if allow_posting and jobs | length %}
<a class="button is-primary pull-right mt-5" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
{% endif %}
<div class="container">
{% if allow_posting and jobs | length %}
<a class="button is-primary pull-right" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
{% endif %}
<div class="course-home-headings mb-2">{{ _("{0}").format(title) }}</div>
<div class="job-subtitle">{{ _("{0}").format(subtitle) }}</div>
<div class="course-home-headings mb-2">{{ _("{0}").format(title) }}</div>
<div class="job-subtitle">{{ _("{0}").format(subtitle) }}</div>
{% if jobs | length %}
<div class="common-card-style job-list-card">
{% for job in jobs %}
<div class="job-card">
<div class="avatar avatar-medium mr-3" title="{{ job.company_name}}">
<span class="avatar-frame company-logo" style="background-image: url( {{ job.company_logo | urlencode }} );"></span>
</div>
<div class="job-card-info">
<div class="job-card-heading">{{ _(job.job_title) }}</div>
<div class="vertically-center 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 }}
{% if jobs | length %}
<div class="job-cards-parent">
{% for job in jobs %}
<div class="common-card-style job-card">
<span title="{{ job.company_name}}" style="background-image: url( {{ job.company_logo | urlencode }} );"
class="company-logo"></span>
<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>
<a class="stretched-link" href="/jobs/{{ job.name }}"></a>
</div>
</div>
{% endfor %}
</div>
<div class="job-card-logo-section course-meta">
<div class="indicator-pill green ml-3"> {{ job.type }} </div>
<div class="mt-2 text-muted">{{ frappe.utils.format_date(job.creation, "medium") }}</div>
</div>
<a class="stretched-link" href="/jobs/{{ job.name }}"></a>
</div>
{% if loop.index != jobs | length %}
<div class="card-divider mt-5"></div>
{% endif %}
{% endfor %}
</div>
</div>
{% else %}
<div class="empty-state">
<div>
<img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
</div>
<div class="empty-state-text">
<div class="empty-state-heading">{{ _("No open jobs") }}</div>
<div class="course-meta">{{ _("There are no job openings at present.") }}</div>
</div>
<div>
{% if allow_posting %}
<a class="button is-secondary dark-links m-auto" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
{% endif %}
</div>
<div>
<img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
</div>
<div class="empty-state-text">
<div class="empty-state-heading">{{ _("No open jobs") }}</div>
<div class="course-meta">{{ _("There are no job openings at present.") }}</div>
</div>
<div>
{% if allow_posting %}
<a class="button is-secondary dark-links m-auto" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}

63
lms/www/jobs/job.html
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>