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

style: job card redesign

Browse Source
This commit is contained in:
Jannat Patel
2022-02-14 13:46:02 +05:30
parent 942837b4d9
commit 6cd7861b2c
10 changed files with 179 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
school/job/doctype/job_settings/job_settings.json
View File

@@ -1,12 +1,14 @@
{
"actions": [],
"allow_rename": 1,
"creation": "2022-01-10 17:16:46.598673",
"creation": "2022-02-07 12:01:41.422955",
"doctype": "DocType",
"editable_grid": 1,
"engine": "InnoDB",
"field_order": [
"allow_posting"
"allow_posting",
"title",
"subtitle"
],
"fields": [
{
@@ -14,12 +16,22 @@
"fieldname": "allow_posting",
"fieldtype": "Check",
"label": "Allow Job Posting From Website"
},
{
"fieldname": "title",
"fieldtype": "Data",
"label": "Job Board Title"
},
{
"fieldname": "subtitle",
"fieldtype": "Data",
"label": "Job Board Subtitle"
}
],
"index_web_pages_for_search": 1,
"issingle": 1,
"links": [],
"modified": "2022-01-10 18:45:26.646438",
"modified": "2022-02-11 15:56:38.958317",
"modified_by": "Administrator",
"module": "Job",
"name": "Job Settings",

2
school/lms/widgets/CourseCard.html
View File

@@ -22,7 +22,7 @@
</span>
{% endif %}
</div>
<div class="card-heading course-card-title">{{ course.title }}</div>
<div class="course-card-title">{{ course.title }}</div>
{% if membership and not read_only %}
<div class="progress">

4
school/overrides/user.py
View File

@@ -225,8 +225,8 @@ def set_country_from_ip(login_manager=None, user=None):
user = login_manager.user
user_country = frappe.db.get_value("User", user, "country")
if user_country:
return
#if user_country:
# return
frappe.db.set_value("User", user, "country", get_country_code())
return

146
school/public/css/style.css
View File

@@ -1,5 +1,4 @@
:root {
--text-color-dark: #192734;
--text-xs: 11px;
--text-sm: 12px;
--text-md: 13px;
@@ -8,9 +7,9 @@
--text-xl: 18px;
--text-2xl: 20px;
--text-3xl: 22px;
--text-3-5xl: 24px;
--text-4xl: 44px;
--navbar-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
--gray-750: #505A62;
}
input[type=checkbox] {
@@ -58,7 +57,7 @@ input[type=checkbox] {
background: #ffffff;
margin-left: 0;
margin-right: 1rem;
border-radius: 6px;
border-radius: var(--border-radius);
padding: 3.5px 8px;
font-size: 11px;
text-align: center;
@@ -87,10 +86,10 @@ input[type=checkbox] {
.common-card-style {
display: flex;
background: #FFFFFF;
border-radius: 8px;
border-radius: var(--border-radius-md);
position: relative;
border: 1px solid #EEF0F2;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-base);
}
.course-card {
@@ -106,12 +105,12 @@ input[type=checkbox] {
.course-card-meta {
margin: 0.75rem 0 0.5rem;
font-size: 14px;
font-size: var(--text-base);
color: var(--gray-600);
}
.course-card-meta-2 {
color: var(--gray-750);
color: var(--gray-700);
}
.course-card-content {
@@ -127,15 +126,10 @@ input[type=checkbox] {
}
}
.card-heading {
font-weight: 600;
font-size: var(--text-3xl);
color: var(--text-color-dark);
}
.course-card-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 1.25rem;
}
@@ -146,7 +140,7 @@ input[type=checkbox] {
}
.card-divider {
border-top: 1px solid #EEF0F2;
border-top: 1px solid var(--gray-300);
margin-bottom: 1rem;
}
@@ -158,7 +152,7 @@ input[type=checkbox] {
.course-instructor {
margin-left: 0.625rem;
font-size: 0.875rem;
color: var(--gray-750);
color: var(--gray-700);
}
.course-student-count {
@@ -178,7 +172,7 @@ input[type=checkbox] {
.view-course-link {
height: 32px;
border-radius: 4px;
border-radius: var(--border-radius-sm);
font-size: 12px;
padding: 8px 0px 8px;
text-align: center;
@@ -316,7 +310,7 @@ input[type=checkbox] {
height: 1.5rem;
width: 1.5rem;
border: 1px solid black;
border-radius: 8px;
border-radius: var(--border-radius-md);
}
.custom-checkbox>label>input:checked+.empty-checkbox {
@@ -339,7 +333,7 @@ input[type=checkbox] {
flex-direction: row;
padding: 24px;
background: #E2E6E9;
border-radius: 8px;
border-radius: var(--border-radius-md);
margin-top: 16px;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.02), 0px 0px 8px rgba(0, 0, 0, 0.04);
}
@@ -365,7 +359,7 @@ input[type=checkbox] {
background-position: center;
background-repeat: no-repeat;
margin-right: 32px;
border-radius: 8px;
border-radius: var(--border-radius-md);
flex: 1;
align-self: center;
}
@@ -418,7 +412,7 @@ input[type=checkbox] {
font-weight: 600;
font-size: 40px;
line-height: 120%;
color: var(--text-color-dark);
color: var(--gray-800);
margin-bottom: 8px;
}
@@ -446,18 +440,15 @@ input[type=checkbox] {
}
.button {
box-shadow: var(--btn-shadow);
border-radius: 4px;
border-radius: var(--border-radius);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 8px 12px 8px;
font-size: 12px;
line-height: 135%;
letter-spacing: -0.011em;
border: none;
padding: 0.25rem 1.25rem;
font-size: var(--text-md);
line-height: 20px;
}
.button:disabled {
@@ -488,8 +479,8 @@ input[type=checkbox] {
}
.is-default {
background: #F4F5F6;
color: var(--text-color-dark);
background: var(--gray-100);
color: var(--gray-700);
}
@media (max-width: 600px) {
@@ -623,7 +614,7 @@ input[type=checkbox] {
text-decoration: none;
background: #F4F5F6;
color: inherit;
border-radius: .25rem;
border-radius: var(--border-radius-sm);
}
.course-content-parent .lesson-links {
@@ -733,9 +724,9 @@ input[type=checkbox] {
.course-home-headings {
font-weight: 600;
font-size: var(--text-3xl);
font-size: var(--text-3-5xl);
letter-spacing: -0.0175em;
color: var(--text-color-dark);
color: var(--gray-800);
margin-bottom: 1rem;
}
@@ -747,9 +738,9 @@ input[type=checkbox] {
margin: 0;
}
.avatar-medium-schedule {
width: 70px;
height: 70px;
.avatar-medium {
width: 42px;
height: 42px;
}
.avatar-large {
@@ -917,7 +908,7 @@ input[type=checkbox] {
align-items: center;
font-size: 12px;
line-height: 135%;
color: var(--text-color-dark);
color: var(--gray-800);
}
.course-details-outline {
@@ -972,7 +963,7 @@ input[type=checkbox] {
.active-lesson {
background-color: #EBF5FF;
border-radius: 0.25rem;
border-radius: var(--border-radius-sm);
}
.lesson-progress {
@@ -981,7 +972,7 @@ input[type=checkbox] {
font-size: 10px;
line-height: 120%;
margin: 0px 10px 20px;
border-radius: 8px;
border-radius: var(--border-radius-md);
font-weight: bold;
}
@@ -1037,7 +1028,7 @@ input[type=checkbox] {
}
.profile-name {
color: var(--text-color-dark);
color: var(--gray-800);
font-weight: 600;
font-size: 22px;
line-height: 156%;
@@ -1094,7 +1085,7 @@ input[type=checkbox] {
text-transform: uppercase;
height: fit-content;
box-shadow: 0px 1px 1px rgb(0 0 0 / 16%);
border-radius: 4px;
border-radius: var(--border-radius-sm);
margin-left: 0.5rem;
}
@@ -1112,7 +1103,7 @@ input[type=checkbox] {
}
.profile-item {
color: var(--text-color-dark);
color: var(--gray-800);
font-weight: 500;
}
@@ -1149,7 +1140,7 @@ input[type=checkbox] {
.bold-title {
font-weight: bold;
color: var(--text-color-dark);
color: var(--gray-800);
}
.profile-courses {
@@ -1270,7 +1261,7 @@ pre {
.certificate-heading {
font-size: 3rem;
font-weight: 500;
color: var(--text-color-dark);
color: var(--gray-800);
}
.certificate-para {
@@ -1321,7 +1312,7 @@ pre {
background: #EBEEF0;
border: 1px dashed #C8CFD5;
box-sizing: border-box;
border-radius: 8px;
border-radius: var(--border-radius-md);
padding: 2.5rem;
}
@@ -1350,7 +1341,7 @@ pre {
background-image: url(/assets/frappe/icons/timeless/search.svg);
border: 1px solid #C8CFD5;
box-sizing: border-box;
border-radius: 6px;
border-radius: var(--border-radius);
font-size: 0.75rem;
padding: 0.625rem 0.75rem;
height: 36px;
@@ -1377,11 +1368,11 @@ pre {
font-weight: 500;
font-size: 18px;
line-height: 150%;
color: var(--text-color-dark);
color: var(--gray-800);
}
.testimonial-review {
color: var(--text-color-dark);
color: var(--gray-800);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -1468,14 +1459,14 @@ pre {
.lesson-pagination .custom-checkbox .empty-checkbox {
width: 1rem;
height: 1rem;
border-radius: 4px;
border-radius: var(--border-radius-sm);
}
}
@media (max-width: 767px) {
.lesson-pagination .custom-checkbox .empty-checkbox {
margin-bottom: 1rem;
border-radius: 4px;
border-radius: var(--border-radius-sm);
}
.lesson-pagination .custom-checkbox span {
@@ -1500,16 +1491,12 @@ pre {
.job-card {
display: flex;
padding: 1rem;
}
.job-card-info {
flex: 1;
position: relative;
}
.company-logo {
background-position: center;
background-size: 37px;
background-size: 42px;
}
.job-card-parent {
@@ -1525,5 +1512,54 @@ pre {
}
.job-detail-card {
padding: 1.5rem;
flex-direction: column;
}
.job-subtitle {
font-size: var(--text-base);
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);
}
.company-name {
font-size: var(--text-base);
}
.job-meta {
display: flex;
align-items: center;
color: var(--gray-700);
font-size: var(--text-base);
}
.job-type {
background-color: var(--dark-green-100);
color: var(--dark-green-500);
border-radius: var(--border-radius-md);
padding: 0.25rem 0.5rem;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 0.5rem;
width: fit-content;
}
.job-description {
margin-top: 3.75rem;
}
.job-detail-card span::before {
content: "\00B7";
margin: 0 8px;
}

4
school/public/icons/location.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4675 3.45802C13.4246 5.41507 13.4246 8.54635 11.4936 10.4773L7.97091 14L4.44822 10.4773C2.51726 8.54635 2.51726 5.41507 4.44822 3.48411L4.47431 3.45802C6.40527 1.52706 9.51046 1.50097 11.4675 3.45802ZM11.4675 3.45802C11.4414 3.43193 11.4414 3.43193 11.4675 3.45802Z" stroke="#687178" stroke-miterlimit="10"/>
<path d="M7.97072 8.25894C8.69128 8.25894 9.27542 7.6748 9.27542 6.95424C9.27542 6.23367 8.69128 5.64954 7.97072 5.64954C7.25015 5.64954 6.66602 6.23367 6.66602 6.95424C6.66602 7.6748 7.25015 8.25894 7.97072 8.25894Z" stroke="#687178" stroke-miterlimit="10"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 693 B

21
school/templates/job_card.html
View File

@@ -1,21 +0,0 @@
<div class="job-card">
<div class="job-card-info">
<div class="d-flex mb-3">
<div class="course-card-pills">{{ _(job.type) }}</div>
<div class="course-card-pills">{{ job.location }}</div>
</div>
<div class="card-heading">{{ _(job.job_title) }}</div>
<div class="mt-1">
<a class="dark-links" href="{{ job.company_website }}">{{ job.company_name }}</a>
</div>
{% if show_edit_link and job.owner == frappe.session.user %}
<a href="/job-opportunity?name={{ job.name }}">Edit</a>
{% endif %}
</div>
<div class="job-card-logo-section">
<div class="small">Posted on: {{ frappe.utils.format_date(job.creation, "medium") }}</div>
<div class="avatar avatar-medium" title="{{ job.company_name}}">
<span class="avatar-frame company-logo" style="background-image: url( {{ job.company_logo | urlencode }} );"></span>
</div>
</div>
</div>

44
school/www/jobs/index.html
View File

@@ -2,25 +2,43 @@
{% block title %}{{ _('Job Openings') }}{% endblock %}
{% block content %}
{% set allow_posting = frappe.db.get_single_value("Job Settings", "allow_posting") %}
<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 %}
{% 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">{{ _("Job Openings") }}</div>
{% if jobs | length %}
<div class="job-card-parent">
{% for job in jobs %}
<div class="common-card-style course-card">
{% set show_edit_link = False %}
{% include "school/templates/job_card.html" %}
<a class="stretched-link" href="/jobs/{{ job.name }}"></a>
{% if jobs | length %}
<div class="common-card-style job-list-card">
{% for job in jobs %}
<div class="job-card">
<div class="avatar avatar-medium" title="{{ job.company_name}}">
<span class="avatar-frame company-logo" style="background-image: url( {{ job.company_logo | urlencode }} );"></span>
</div>
{% endfor %}
<div class="job-card-info col-8">
<div class="job-card-heading">{{ _(job.job_title) }}</div>
<a class="dark-links company-name mt-1" href="{{ job.company_website }}">{{ job.company_name }}</a>
</div>
<div class="job-meta col">
<img class="mr-2" src="/assets/school/icons/location.svg">
<div>{{ job.location }}</div>
</div>
<div class="job-card-logo-section">
<div class="job-type"> {{ job.type }} </div>
<div class="job-meta">{{ frappe.utils.pretty_date(job.creation) }}</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 text-center">
<img class="icon icon-xl" src="/assets/frappe/icons/timeless/message.svg">

4
school/www/jobs/index.py
View File

@@ -11,4 +11,6 @@ def get_context(context):
"company_logo", "name", "creation"
],
order_by="creation desc")
context.title = frappe.db.get_single_value("Job Settings", "title")
context.subtitle = frappe.db.get_single_value("Job Settings", "subtitle")
context.allow_posting = frappe.db.get_single_value("Job Settings", "allow_posting")

39
school/www/jobs/job.html
View File

@@ -7,20 +7,37 @@
<div class="container">
{{ BreadCrumb(job) }}
<div class="common-card-style job-detail-card">
{% set show_edit_link = True %}
{% include "school/templates/job_card.html" %}
<div class="p-4">
<div>{{ _(job.description) }}</div>
<div class="d-flex justify-content-between mt-5">
{% if frappe.session.user != "Guest" %}
<a class="button is-primary" href="{{ job.application_link }}">{{ _("Apply Now") }}</a>
<div class="button is-secondary" id="report">{{ _("Report this post") }}</div>
{% else %}
<a class="button is-secondary dark-links" href="/login?redirect-to=/jobs/{{ job.name }}">Login to apply for this job.</a>
<div class="d-flex justify-content-between">
<div>
<div class="avatar avatar-medium mb-6" title="{{ job.company_name}}">
<div class="avatar-frame company-logo" style="background-image: url( {{ job.company_logo | urlencode }} );"></div>
</div>
<div class="course-home-headings mb-2">{{ _(job.job_title) }}</div>
<div class="d-flex align-items-center mb-2">
<a class="dark-links company-name" href="{{ job.company_website }}">{{ job.company_name }}</a>
<span></span>
<div class="job-meta">
<img class="mr-2" src="/assets/school/icons/location.svg">
<div>{{ job.location }}</div>
</div>
</div>
<div class="job-type"> {{ job.type }} </div>
</div>
{% 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">
<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>
<div class="job-description job-meta">{{ _(job.description) }}</div>
</div>
</div>

4
school/www/jobs/job.js
View File

@@ -10,6 +10,10 @@ frappe.ready(() => {
const open_report_dialog = (e) => {
e.preventDefault();
if (frappe.session.user == "Guest") {
window.location.href = `/login?redirect-to=/jobs/${$(e.currentTarget).data("job")}`;
return;
}
$("#report-modal").modal("show");
};