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

fix: job list ui

Browse Source
This commit is contained in:
Jannat Patel
2022-06-30 17:45:48 +05:30
parent 999c267dfe
commit de0200f352
2 changed files with 90 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
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: 0.5rem;
}
.job-card-parent {
@@ -1121,11 +1126,9 @@ 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: 1rem;
}
.job-detail-card {
@@ -1138,11 +1141,6 @@ 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);
@@ -1451,3 +1449,35 @@ 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;
}
@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));
}
}

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 %}