183 lines
6.9 KiB
HTML
183 lines
6.9 KiB
HTML
{% load static i18n %}
|
|
<style>
|
|
|
|
/* ==================================== */
|
|
/* MULTI-COLORED CANDIDATE STAGE TRACKER */
|
|
/* ==================================== */
|
|
|
|
.progress-stages {
|
|
position: relative;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
.progress-stages a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.stage-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
min-width: 60px;
|
|
transition: all 0.3s ease;
|
|
color: var(--stage-inactive);
|
|
}
|
|
|
|
.stage-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background-color: #e9ecef;
|
|
color: var(--stage-inactive);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.9rem;
|
|
z-index: 10;
|
|
border: 2px solid white;
|
|
box-shadow: 0 0 0 2px #e9ecef;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* ---------------- STAGE SPECIFIC COLORS ---------------- */
|
|
|
|
/* APPLIED STAGE (Teal) */
|
|
.stage-item[data-stage="Applied"].completed .stage-icon,
|
|
.stage-item[data-stage="Applied"].active .stage-icon {
|
|
background-color: var(--stage-applied);
|
|
color: white;
|
|
}
|
|
.stage-item[data-stage="Applied"].active { color: var(--stage-applied); }
|
|
|
|
/* EXAM STAGE (Cyan/Info) */
|
|
.stage-item[data-stage="Exam"].completed .stage-icon,
|
|
.stage-item[data-stage="Exam"].active .stage-icon {
|
|
background-color: var(--stage-exam);
|
|
color: white;
|
|
}
|
|
.stage-item[data-stage="Exam"].active { color: var(--stage-exam); }
|
|
|
|
/* INTERVIEW STAGE (Yellow/Warning) */
|
|
.stage-item[data-stage="Interview"].completed .stage-icon,
|
|
.stage-item[data-stage="Interview"].active .stage-icon {
|
|
background-color: var(--stage-interview);
|
|
color: var(--kaauh-primary-text); /* Dark text for light background */
|
|
}
|
|
.stage-item[data-stage="Interview"].active { color: var(--stage-interview); }
|
|
|
|
/* OFFER STAGE (Green/Success) */
|
|
.stage-item[data-stage="Offer"].completed .stage-icon,
|
|
.stage-item[data-stage="Offer"].active .stage-icon {
|
|
background-color: var(--stage-offer);
|
|
color: white;
|
|
}
|
|
.stage-item[data-stage="Offer"].active { color: var(--stage-offer); }
|
|
|
|
/* ---------------- GENERIC ACTIVE/COMPLETED STYLING ---------------- */
|
|
|
|
/* Active State (Applies glow/scale to current stage) */
|
|
.stage-item.active .stage-icon {
|
|
box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.4);
|
|
transform: scale(1.1);
|
|
}
|
|
.stage-item.active .stage-count {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Completed State (Applies dark text color to completed stages) */
|
|
.stage-item.completed {
|
|
color: var(--kaauh-primary-text);
|
|
}
|
|
|
|
/* Connector Line */
|
|
.stage-connector {
|
|
flex-grow: 1;
|
|
height: 3px;
|
|
background-color: #e9ecef;
|
|
margin: 0 0.5rem;
|
|
position: relative;
|
|
top: -18px;
|
|
z-index: 1;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
/* Line in completed state (Kept the line teal/primary for consistency) */
|
|
.stage-connector.completed {
|
|
background-color: var(--kaauh-teal);
|
|
}
|
|
|
|
/* Labels and counts */
|
|
.stage-label {
|
|
font-size: 0.75rem;
|
|
margin-top: 0.4rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
.stage-count {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
margin-top: 0.1rem;
|
|
color: #6c757d;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div class="progress-stages">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
|
|
{% comment %} STAGE 1: Applied {% endcomment %}
|
|
<a href="{% url 'candidate_screening_view' job.slug %}"
|
|
class="stage-item {% if current_stage == 'Applied' %}active{% endif %} {% if current_stage != 'Applied' and candidate.stage_history_has.Applied %}completed{% endif %}"
|
|
data-stage="Applied">
|
|
<div class="stage-icon ">
|
|
<i class="fas fa-file-signature cd_screening"></i>
|
|
</div>
|
|
<div class="stage-label cd_screening">{% trans "Screened" %}</div>
|
|
<div class="stage-count">{{ applied_count|default:"0" }}</div>
|
|
</a>
|
|
|
|
{% comment %} CONNECTOR 1 -> 2 {% endcomment %}
|
|
<div class="stage-connector {% if current_stage != 'Applied' and candidate.stage_history_has.Exam %}completed{% endif %}"></div>
|
|
|
|
{% comment %} STAGE 2: Exam {% endcomment %}
|
|
<a href="{% url 'candidate_exam_view' job.slug %}"
|
|
class="stage-item {% if current_stage == 'Exam' %}active{% endif %} {% if current_stage != 'Exam' and candidate.stage_history_has.Exam %}completed{% endif %}"
|
|
data-stage="Exam">
|
|
<div class="stage-icon">
|
|
<i class="fas fa-clipboard-check cd_exam"></i>
|
|
</div>
|
|
<div class="stage-label cd_exam">{% trans "Exam" %}</div>
|
|
<div class="stage-count ">{{ exam_count|default:"0" }}</div>
|
|
</a>
|
|
|
|
{% comment %} CONNECTOR 2 -> 3 {% endcomment %}
|
|
<div class="stage-connector {% if current_stage != 'Exam' and candidate.stage_history_has.Interview %}completed{% endif %}"></div>
|
|
|
|
{% comment %} STAGE 3: Interview {% endcomment %}
|
|
<a href="{% url 'candidate_interview_view' job.slug %}"
|
|
class="stage-item {% if current_stage == 'Interview' %}active{% endif %} {% if current_stage != 'Interview' and candidate.stage_history_has.Interview %}completed{% endif %}"
|
|
data-stage="Interview">
|
|
<div class="stage-icon">
|
|
<i class="fas fa-comments cd_interview"></i>
|
|
</div>
|
|
<div class="stage-label cd_interview">{% trans "Interview" %}</div>
|
|
<div class="stage-count">{{ interview_count|default:"0" }}</div>
|
|
</a>
|
|
|
|
{% comment %} CONNECTOR 3 -> 4 {% endcomment %}
|
|
<div class="stage-connector {% if current_stage != 'Interview' and candidate.stage_history_has.Offer %}completed{% endif %}"></div>
|
|
|
|
{% comment %} STAGE 4: Offer {% endcomment %}
|
|
<a href="{% url 'job_candidates_list' job.slug %}?stage=Offer"
|
|
class="stage-item {% if current_stage == 'Offer' %}active{% endif %} {% if current_stage != 'Offer' and candidate.stage_history_has.Offer %}completed{% endif %}"
|
|
data-stage="Offer">
|
|
<div class="stage-icon">
|
|
<i class="fas fa-handshake"></i>
|
|
</div>
|
|
<div class="stage-label">{% trans "Offer" %}</div>
|
|
<div class="stage-count">{{ offer_count|default:"0" }}</div>
|
|
</a>
|
|
</div>
|
|
</div> |