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 { .job-card {
display: flex; position: relative;
align-items: center; padding: 1rem;
position: relative;
} }
.company-logo { .company-logo {
background-position: center; background-position: center;
background-size: 42px; 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 { .job-card-parent {
@@ -1121,11 +1126,9 @@ pre {
} }
.job-card-logo-section { .job-card-logo-section {
display: flex; display: flex;
flex-direction: column; align-items: center;
align-items: flex-end; margin-top: 1rem;
justify-content: space-between;
margin-left: auto;
} }
.job-detail-card { .job-detail-card {
@@ -1138,11 +1141,6 @@ pre {
margin-bottom: 1.875rem; margin-bottom: 1.875rem;
} }
.job-list-card {
padding: 1.25rem 1.56rem;
flex-direction: column;
}
.job-card-heading { .job-card-heading {
font-weight: 600; font-weight: 600;
color: var(--gray-900); color: var(--gray-900);
@@ -1451,3 +1449,35 @@ li {
.discussions-parent .empty-state { .discussions-parent .empty-state {
background-color: var(--gray-200); 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 %} {% block content %}
<div class="common-page-style"> <div class="common-page-style">
<div class="container"> <div class="container">
{% if allow_posting and jobs | length %} {% if allow_posting and jobs | length %}
<a class="button is-primary pull-right mt-5" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a> <a class="button is-primary pull-right" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
{% endif %} {% endif %}
<div class="course-home-headings mb-2">{{ _("{0}").format(title) }}</div> <div class="course-home-headings mb-2">{{ _("{0}").format(title) }}</div>
<div class="job-subtitle">{{ _("{0}").format(subtitle) }}</div> <div class="job-subtitle">{{ _("{0}").format(subtitle) }}</div>
{% if jobs | length %} {% if jobs | length %}
<div class="common-card-style job-list-card"> <div class="job-cards-parent">
{% for job in jobs %} {% for job in jobs %}
<div class="job-card"> <div class="common-card-style job-card">
<div class="avatar avatar-medium mr-3" title="{{ job.company_name}}"> <span title="{{ job.company_name}}" style="background-image: url( {{ job.company_logo | urlencode }} );"
<span class="avatar-frame company-logo" style="background-image: url( {{ job.company_logo | urlencode }} );"></span> class="company-logo"></span>
</div> <div class="job-card-info">
<div class="job-card-info"> <div class="job-card-heading">{{ _(job.job_title) }}</div>
<div class="job-card-heading">{{ _(job.job_title) }}</div>
<div class="vertically-center course-meta"> <div class="job-company course-meta">
<div class="mr-5">{{ job.company_name }}</div> <div class="mr-5">{{ job.company_name }}</div>
<div class="vertically-center"> <div class="vertically-center">
<svg class="icon icon-sm"> <svg class="icon icon-sm">
<use class="" href="#icon-location"> <use class="" href="#icon-location">
</svg> </svg>
{{ job.location }} {{ 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>
</div> {% endfor %}
</div> </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>
</div>
{% else %} {% else %}
<div class="empty-state"> <div class="empty-state">
<div> <div>
<img class="icon icon-xl" src="/assets/lms/icons/comment.svg"> <img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
</div> </div>
<div class="empty-state-text"> <div class="empty-state-text">
<div class="empty-state-heading">{{ _("No open jobs") }}</div> <div class="empty-state-heading">{{ _("No open jobs") }}</div>
<div class="course-meta">{{ _("There are no job openings at present.") }}</div> <div class="course-meta">{{ _("There are no job openings at present.") }}</div>
</div> </div>
<div> <div>
{% if allow_posting %} {% if allow_posting %}
<a class="button is-secondary dark-links m-auto" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a> <a class="button is-secondary dark-links m-auto" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
{% endif %} {% endif %}
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}