260 lines
12 KiB
HTML
260 lines
12 KiB
HTML
{% load static i18n %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% translate "Application Form" %}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
/* ---------------------------------------------------------------------- */
|
|
/* THEME & UTILITY VARIABLES */
|
|
/* ---------------------------------------------------------------------- */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--success: #198754;
|
|
--light-bg: #f8f9fa;
|
|
|
|
/* CALCULATED STICKY HEIGHTS */
|
|
/* Standard Bootstrap Navbar Height (approx 56px) */
|
|
--navbar-height: 56px;
|
|
/* Bootstrap mb-3 spacing (1rem or 16px) */
|
|
--navbar-gap: 16px;
|
|
|
|
/* Combined height of the two navbars when collapsed on desktop (56 + 16 + 56 = 128px) */
|
|
--sticky-navbar-total-height: 128px;
|
|
}
|
|
|
|
.btn-main-action {
|
|
background-color: var(--kaauh-teal);
|
|
color: white;
|
|
border: none;
|
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
|
box-shadow: 0 4px 12px rgba(0, 99, 110, 0.3);
|
|
}
|
|
|
|
.btn-main-action:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
color: white;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.bg-kaauh-teal-dark {
|
|
background-color: var(--kaauh-teal-dark) !important;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------- */
|
|
/* LAYOUT & STICKY POSITIONING FIXES (Desktop/Tablet) */
|
|
/* ---------------------------------------------------------------------- */
|
|
|
|
/* 1. Position the dark navbar below the white navbar + gap */
|
|
#bottomNavbar {
|
|
/* 56px (white nav) + 16px (mb-3) = 72px */
|
|
top: calc(var(--navbar-height) + var(--navbar-gap));
|
|
z-index: 1030;
|
|
}
|
|
|
|
/* 2. Pushes the main content down so it's not hidden under the navbars */
|
|
.main-content-area {
|
|
/* Total Sticky Height (128px) + Extra Margin (12px) = 140px */
|
|
margin-top: calc(var(--sticky-navbar-total-height) + 12px);
|
|
}
|
|
|
|
/* 3. Positions the sticky sidebar correctly */
|
|
.card.sticky-top {
|
|
/* Start scrolling the sidebar just below the two navbars + a small gap */
|
|
top: calc(var(--sticky-navbar-total-height) + 15px);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------- */
|
|
/* MOBILE RESPONSIVE STYLES (Below 992px) */
|
|
/* ---------------------------------------------------------------------- */
|
|
@media (max-width: 991.98px) {
|
|
|
|
/* --- FIX: Spacing for Collapsed Hamburger Menu --- */
|
|
#navbarNav .nav-item {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
#navbarNav .nav-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
#navbarNav .nav-link {
|
|
padding: 8px 15px;
|
|
display: block;
|
|
}
|
|
/* --- END FIX --- */
|
|
|
|
/* On mobile, the top navbar is generally only 56px tall when collapsed.
|
|
The bottom navbar position remains correct (72px down). */
|
|
#bottomNavbar {
|
|
top: calc(var(--navbar-height) + var(--navbar-gap));
|
|
}
|
|
|
|
/* Main content area needs less margin on mobile since the sidebar isn't active
|
|
and the navs are collapsed by default. */
|
|
.main-content-area {
|
|
/* Reduced margin-top for smaller screens */
|
|
margin-top: calc(var(--sticky-navbar-total-height) / 2);
|
|
}
|
|
|
|
/* Mobile Fixed Footer Bar for Application */
|
|
.mobile-fixed-apply-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
padding: 15px;
|
|
background-color: var(--light-bg);
|
|
border-top: 1px solid #ddd;
|
|
z-index: 1000;
|
|
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Add padding to the bottom of the body content to prevent it from hiding under the fixed bar */
|
|
body {
|
|
padding-bottom: 90px;
|
|
}
|
|
|
|
/* Fix job overview grid responsiveness (ensures 1 column) */
|
|
.row-cols-md-2 > .col {
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav id="topNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: white; z-index: 1030;">
|
|
<div class="container-fluid">
|
|
<span class="navbar-brand text-white fw-bold">
|
|
<img src="{% static 'image/kaauh.jpeg' %}" alt="{% translate 'KAAUH IMAGE' %}" style="height: 50px; margin-right: 10px;">
|
|
</span>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link text-secondary" href="/applications/">{% translate "Applications" %}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-secondary" href="/profile/">{% translate "Profile" %}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-secondary" href="https://kaauh.edu.sa/career">{% translate "Careers" %}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav id="bottomNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: var(--kaauh-teal); z-index: 1030;">
|
|
<div class="container-fluid">
|
|
<span class="navbar-text text-white fw-bold">{% translate "Job Overview" %}</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<div class="row mb-5 mt-3 main-content-area">
|
|
|
|
<div class="col-lg-4 order-lg-2 order-1 d-none d-lg-block">
|
|
<div class="card shadow-sm sticky-top" style="top: var(--sticky-navbar-total-height);">
|
|
<div class="card-header bg-kaauh-teal-dark text-white">
|
|
<h5 class="mb-0"><i class="fas fa-file-signature me-2"></i>Ready to Apply?</h5>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<p class="text-muted">Review the job details, then apply below.</p>
|
|
|
|
{% if job.form_template %}
|
|
<a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
|
|
<i class="fas fa-paper-plane me-2"></i> Apply for this Position
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-8 order-lg-1 order-2">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-kaauh-teal-dark text-white d-flex justify-content-between align-items-center">
|
|
<h2 class="h3 mb-0 fw-bold">{{ job.title }}</h2>
|
|
|
|
{% comment %} {% with status_class=job.status|lower %}
|
|
<span class="badge
|
|
{% if status_class == 'open' %}bg-success
|
|
{% elif status_class == 'closed' %}bg-danger
|
|
{% elif status_class == 'draft' %}bg-secondary
|
|
{% else %}bg-primary
|
|
{% endif %}
|
|
status-badge fw-bold p-2">
|
|
{{ job.get_status_display }}
|
|
</span>
|
|
{% endwith %} {% endcomment %}
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
|
|
<h4 class="mb-3" style="color: var(--kaauh-teal-dark);">Job Overview</h4>
|
|
<div class="row row-cols-1 row-cols-md-2 g-3 mb-4">
|
|
{% if job.salary_range %}
|
|
<div class="col">
|
|
<i class="fas fa-money-bill-wave text-success me-2"></i>
|
|
<strong>Salary:</strong>
|
|
<span class="fw-bold text-success">{{ job.salary_range }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="col">
|
|
<i class="fas fa-calendar-alt text-muted me-2"></i>
|
|
<strong>Deadline:</strong>
|
|
{% if job.application_deadline %}
|
|
{{ job.application_deadline|date:"M d, Y" }}
|
|
{% if job.is_expired %}
|
|
<span class="badge bg-danger ms-2">EXPIRED</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="text-muted">Not specified</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col"> <i class="fas fa-briefcase text-muted me-2"></i> <strong>Job Type:</strong> {{ job.get_job_type_display }} </div>
|
|
<div class="col"> <i class="fas fa-map-marker-alt text-muted me-2"></i> <strong>Location:</strong> {{ job.get_location_display }} </div>
|
|
<div class="col"> <i class="fas fa-building text-muted me-2"></i> <strong>Department:</strong> {{ job.department|default:"Not specified" }} </div>
|
|
<div class="col"> <i class="fas fa-hashtag text-muted me-2"></i> <strong>JOB ID:</strong> {{ job.internal_job_id|default:"N/A" }} </div>
|
|
<div class="col"> <i class="fas fa-desktop text-muted me-2"></i> <strong>Workplace:</strong> {{ job.get_workplace_type_display }} </div>
|
|
{% comment %} <div class="col"> <i class="fas fa-user-tie text-muted me-2"></i> <strong>Created By:</strong> {{ job.created_by|default:"N/A" }} </div> {% endcomment %}
|
|
</div>
|
|
|
|
{% if job.description %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-info-circle me-2"></i>Job Description</h5><div class="text-secondary">{{ job.description|safe }}</div></div>{% endif %}
|
|
{% if job.qualifications %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-graduation-cap me-2"></i>Qualifications</h5><div class="text-secondary">{{ job.qualifications|safe }}</div></div>{% endif %}
|
|
{% if job.benefits %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-hand-holding-usd me-2"></i>Benefits</h5><div class="text-secondary">{{ job.benefits|safe }}</div></div>{% endif %}
|
|
{% if job.application_instructions %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-file-alt me-2"></i>Application Instructions</h5><div class="text-secondary">{{ job.application_instructions|safe }}</div></div>{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mobile-fixed-apply-bar d-lg-none">
|
|
{% if job.form_template %}
|
|
<a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
|
|
<i class="fas fa-paper-plane me-2"></i> Apply for this Position
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |