248 lines
10 KiB
HTML
248 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Job Postings - University ATS{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
/* UI Variables for the KAAT-S Theme */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-border: #eaeff3;
|
|
--kaauh-primary-text: #343a40;
|
|
}
|
|
|
|
/* Enhanced Card Styling */
|
|
.card {
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Main Action Button Style (Teal Theme) */
|
|
.btn-main-action {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
color: white;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-main-action:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal-dark);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* Secondary Button Style (using theme border) */
|
|
.btn-outline-secondary {
|
|
color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal);
|
|
}
|
|
.btn-outline-secondary:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
color: white;
|
|
border-color: var(--kaauh-teal-dark);
|
|
}
|
|
|
|
/* Job Card Specifics */
|
|
.job-card .card-title {
|
|
color: var(--kaauh-teal-dark);
|
|
font-weight: 600;
|
|
font-size: 1.15rem;
|
|
}
|
|
.job-card .card-text i {
|
|
color: var(--kaauh-teal);
|
|
width: 1.25rem; /* Align icons vertically */
|
|
}
|
|
|
|
/* Status Badges */
|
|
.status-badge {
|
|
font-size: 0.8rem;
|
|
padding: 0.4em 0.8em;
|
|
border-radius: 0.4rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.7px;
|
|
}
|
|
/* Mapped color classes to theme */
|
|
.bg-draft { background-color: #6c757d !important; } /* secondary */
|
|
.bg-active { background-color: var(--kaauh-teal) !important; } /* primary teal */
|
|
.bg-closed { background-color: #dc3545 !important; } /* danger */
|
|
.bg-archived { background-color: #343a40 !important; } /* dark */
|
|
|
|
.bg-info { background-color: #17a2b8 !important; } /* LinkedIn badge */
|
|
|
|
/* Pagination Link Styling */
|
|
.pagination .page-item .page-link {
|
|
color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-border);
|
|
}
|
|
.pagination .page-item.active .page-link {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
color: white;
|
|
}
|
|
.pagination .page-item:hover .page-link:not(.active) {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
/* Filter & Search Layout Adjustments */
|
|
.filter-buttons {
|
|
display: flex;
|
|
gap: 0.5rem; /* Space between filter and clear buttons */
|
|
}
|
|
.form-control-search {
|
|
/* Optional: Add slight shadow/focus effect to search bar */
|
|
box-shadow: none;
|
|
border-color: var(--kaauh-border);
|
|
}
|
|
.form-control-search:focus {
|
|
border-color: var(--kaauh-teal);
|
|
box-shadow: 0 0 0 0.1rem rgba(0, 99, 110, 0.25);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
|
<i class="fas fa-briefcase me-2"></i> Job Postings
|
|
</h1>
|
|
<a href="{% url 'job_create' %}" class="btn btn-main-action">
|
|
<i class="fas fa-plus me-1"></i> Create New Job
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card mb-4 shadow-sm no-hover">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<label for="search" class="form-label small text-muted">Search by Title or Department</label>
|
|
<div class="input-group input-group-lg mb-3">
|
|
<form method="get" action="" class="w-100">
|
|
{% include 'includes/search_form.html' %}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
{% url 'job_list' as job_list_url %}
|
|
|
|
<form method="GET" class="row g-3 align-items-end" >
|
|
|
|
<div class="col-md-3">
|
|
<label for="status" class="form-label small text-muted">Filter by Status</label>
|
|
<select name="status" id="status" class="form-select form-select-sm">
|
|
<option value="">All Statuses</option>
|
|
<option value="DRAFT" {% if status_filter == 'DRAFT' %}selected{% endif %}>Draft</option>
|
|
<option value="PUBLISHED" {% if status_filter == 'PUBLISHED' %}selected{% endif %}>Published</option>
|
|
<option value="CLOSED" {% if status_filter == 'CLOSED' %}selected{% endif %}>Closed</option>
|
|
<option value="ARCHIVED" {% if status_filter == 'ARCHIVED' %}selected{% endif %}>Archived</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-5">
|
|
<div class="filter-buttons">
|
|
<button type="submit" class="btn btn-main-action btn-lg">
|
|
<i class="fas fa-filter me-1"></i> Apply Filters
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{% if page_obj %}
|
|
<div class="row">
|
|
{% for job in page_obj %}
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card job-card h-100">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<h5 class="card-title flex-grow-1 me-3">{{ job.title }}</h5>
|
|
<span class="badge bg-{{ job.status|lower|striptags|yesno:'active,draft,closed,archived' }} status-badge">
|
|
{{ job.get_status_display }}
|
|
</span>
|
|
</div>
|
|
|
|
<p class="card-text text-muted small">
|
|
<i class="fas fa-building"></i> {{ job.department|default:"No Department" }}<br>
|
|
<i class="fas fa-map-marker-alt"></i> {{ job.get_location_display }}<br>
|
|
<i class="fas fa-clock"></i> {{ job.get_job_type_display }}<br>
|
|
<i class="fas fa-briefcase"></i> {{ job.get_source }}
|
|
</p>
|
|
|
|
<div class="mt-auto pt-2 border-top">
|
|
{% if job.posted_to_linkedin %}
|
|
<span class="badge bg-info mb-2">
|
|
<i class="fab fa-linkedin me-1"></i> Posted to LinkedIn
|
|
</span>
|
|
{% endif %}
|
|
|
|
<div class="d-flex gap-2">
|
|
<a href="{% url 'job_detail' job.slug %}" class="btn btn-sm btn-main-action">
|
|
<i class="fas fa-eye"></i> View
|
|
</a>
|
|
<a href="{% url 'job_update' job.slug %}" class="btn btn-sm btn-outline-secondary">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if page_obj.has_other_pages %}
|
|
<nav aria-label="Job pagination" class="mt-4">
|
|
<ul class="pagination justify-content-center">
|
|
{% if page_obj.has_previous %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page=1{% if status_filter %}&status={{ status_filter }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">First</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">Previous</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<li class="page-item active">
|
|
<span class="page-link">{{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
|
|
</li>
|
|
|
|
{% if page_obj.has_next %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ page_obj.next_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">Next</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">Last</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="text-center py-5 card shadow-sm">
|
|
<div class="card-body">
|
|
<i class="fas fa-briefcase fa-3x mb-3" style="color: var(--kaauh-teal-dark);"></i>
|
|
<h3>No job postings found</h3>
|
|
<p class="text-muted">Create your first job posting to get started or adjust your filters.</p>
|
|
<a href="{% url 'job_create' %}" class="btn btn-main-action mt-3">
|
|
<i class="fas fa-plus me-1"></i> Create Job
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %} |