Recruitment Web UI Changes
This commit is contained in:
parent
0b93dd1a87
commit
672551cd0a
|
|
@ -1,232 +1,483 @@
|
|||
@import url('colors.css');
|
||||
/* ===== Modern Color Palette ===== */
|
||||
:root {
|
||||
/* Light Theme */
|
||||
--primary-color: #4361ee;
|
||||
--primary-light: #f0f4ff;
|
||||
--primary-dark: #3a56d5;
|
||||
--secondary-color: #6c757d;
|
||||
--accent-color: #7209b7;
|
||||
--bg-color: #f8fafc;
|
||||
--surface-color: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--error-color: #ef4444;
|
||||
}
|
||||
|
||||
/* ===== ATS Custom Layout Reset ===== */
|
||||
[data-theme="dark"] {
|
||||
/* Dark Theme */
|
||||
--primary-color: #5a7cff;
|
||||
--primary-light: #1e293b;
|
||||
--primary-dark: #4361ee;
|
||||
--secondary-color: #94a3b8;
|
||||
--accent-color: #9d4edd;
|
||||
--bg-color: #0f172a;
|
||||
--surface-color: #1e293b;
|
||||
--text-primary: #f8fafc;
|
||||
--text-secondary: #cbd5e1;
|
||||
--border-color: #334155;
|
||||
}
|
||||
|
||||
/* Add smooth transitions for theme switching */
|
||||
body.ats-app {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* ===== Theme Toggle Styles ===== */
|
||||
.theme-toggle-container {
|
||||
padding: 1rem;
|
||||
margin-top: auto; /* Push to bottom */
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background-color: var(--primary-light);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.light-icon {
|
||||
display: none;
|
||||
color: #fbbf24; /* Amber color for sun */
|
||||
}
|
||||
|
||||
.dark-icon {
|
||||
color: #cbd5e1; /* Light gray for moon */
|
||||
}
|
||||
|
||||
[data-theme="dark"] .light-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .dark-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-text {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Collapsed state styles */
|
||||
.sidebar.collapsed .theme-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .theme-toggle {
|
||||
justify-content: center;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .theme-toggle i {
|
||||
margin-right: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* ===== Global Reset & Typography ===== */
|
||||
body.ats-app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
background-color: var(--body-bg);
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-primary);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ===== Header ===== */
|
||||
/* ===== Main Layout ===== */
|
||||
.ats-app .layout-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===== Header (Modern Design) ===== */
|
||||
.ats-app .main-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
padding: 1rem;
|
||||
position: relative; /* For absolute positioning of toggle button */
|
||||
padding: 0.75rem 2rem;
|
||||
background-color: var(--surface-color);
|
||||
box-shadow: var(--shadow-sm);
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Logo and title alignment */
|
||||
.ats-app .main-header img {
|
||||
height: 40px;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ats-app .main-header span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px; /* Match logo height */
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
/* ===== Layout Container ===== */
|
||||
.ats-app .layout-container {
|
||||
display: flex;
|
||||
height: 100%; /* Adjust for header height */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===== Sidebar ===== */
|
||||
/* ===== Sidebar (Modern Redesign) ===== */
|
||||
.ats-app .sidebar {
|
||||
background-color: var(--sidebar-bg);
|
||||
color: var(--sidebar-text);
|
||||
padding: 1rem 1rem 2rem;
|
||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.4s ease-in-out;
|
||||
position: relative;
|
||||
background-color: var(--surface-color);
|
||||
color: var(--text-secondary);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem 0;
|
||||
position: relative;
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Expanded Sidebar */
|
||||
/* Sidebar States */
|
||||
.ats-app .sidebar.expanded {
|
||||
width: 240px; /* Use fixed width for better consistency */
|
||||
min-width: 240px;
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
/* Collapsed Sidebar */
|
||||
.ats-app .sidebar.collapsed {
|
||||
width: 60px;
|
||||
min-width: 60px;
|
||||
padding: 1rem 0.4rem 2rem;
|
||||
width: 88px;
|
||||
min-width: 88px;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Hide content in collapsed state */
|
||||
.ats-app .sidebar.collapsed .menu-list,
|
||||
.ats-app .sidebar.collapsed .menu-item-text,
|
||||
.ats-app .sidebar.collapsed .list-title,
|
||||
.ats-app .sidebar.collapsed .main-header span {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* ===== Sidebar Menu ===== */
|
||||
/* ===== Navigation Menu (Improved UX) ===== */
|
||||
.ats-app .menu-list {
|
||||
list-style: none;
|
||||
padding-top: 1rem;
|
||||
margin: 2rem 0;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.ats-app .list-title {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.ats-app .menu-list li {
|
||||
margin-bottom: 1.2rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05rem;
|
||||
margin: 1.5rem 1.5rem 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.ats-app .menu-list a {
|
||||
display: block;
|
||||
color: var(--sidebar-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.95rem;
|
||||
margin: 0 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ats-app .menu-list a i {
|
||||
font-size: 1.25rem;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Hover and Active State */
|
||||
.ats-app .menu-list a:hover {
|
||||
background-color: #DBEDFE;
|
||||
color: #0061FF;
|
||||
transform: translateX(6px);
|
||||
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
background-color: var(--primary-light);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* ===== Toggle Button ===== */
|
||||
.ats-app .menu-list a.active {
|
||||
background-color: var(--primary-light);
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ats-app .menu-list a.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
|
||||
}
|
||||
|
||||
/* Toggle Button (Improved) */
|
||||
.ats-app .toggle-btn {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: -12px;
|
||||
background-color: var(--sidebar-bg);
|
||||
color: var(--text-primary);
|
||||
background-color: var(--surface-color);
|
||||
color: var(--primary-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
box-shadow: var(--shadow-sm);
|
||||
z-index: 20;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.ats-app .toggle-btn:hover {
|
||||
background-color: #e1e5eb;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
/* ===== Main Content Area ===== */
|
||||
.ats-app .sidebar.collapsed .toggle-btn {
|
||||
right: -12px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.ats-app .sidebar.collapsed .toggle-btn:hover {
|
||||
transform: rotate(180deg) translateX(2px);
|
||||
}
|
||||
|
||||
/* ===== Main Content Area (Improved) ===== */
|
||||
.ats-app .content-area {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
background-color: var(--content-bg);
|
||||
padding: 3px;
|
||||
background-color: var(--bg-color);
|
||||
overflow-y: auto;
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02);
|
||||
border-left: 1px solid #dcdde1;
|
||||
min-width: 0;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* ===== Responsive Design ===== */
|
||||
/* Content header */
|
||||
.ats-app .content-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.ats-app .content-header h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
/* ===== Responsive Design (Enhanced) ===== */
|
||||
@media (max-width: 1024px) {
|
||||
.ats-app .layout-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ats-app .sidebar,
|
||||
.ats-app .sidebar.expanded,
|
||||
.ats-app .sidebar.collapsed {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ats-app .sidebar {
|
||||
overflow: hidden;
|
||||
max-height: 15%; /* expanded */
|
||||
transition: all 0.4s ease-in-out;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.ats-app .sidebar.expanded {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ats-app .sidebar.collapsed {
|
||||
max-height: 1%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ats-app .sidebar.collapsed .menu-list,
|
||||
.ats-app .sidebar.collapsed .main-header h1 {
|
||||
display: none;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ats-app .menu-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.menu-list i {
|
||||
margin-right: 8px;
|
||||
font-size: 1.1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ats-app .menu-list li {
|
||||
margin-bottom: 0;
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.ats-app .menu-list a {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
flex-direction: column;
|
||||
padding: 0.75rem;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ats-app .menu-list a i {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.ats-app .menu-list a.active::before {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
||||
}
|
||||
|
||||
.ats-app .list-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ats-app .toggle-btn {
|
||||
position: relative;
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
top: auto;
|
||||
right: auto;
|
||||
transform: none;
|
||||
margin: 1rem auto 0 auto;
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
left: auto;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-lg);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.ats-app .content-area {
|
||||
padding: 8px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar.collapsed {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
/* Animation for smoother transitions */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(5px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.menu-list a.active {
|
||||
background-color: #DBEDFE;
|
||||
color: #0061FF;
|
||||
transform: translateX(6px);
|
||||
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
display: block;
|
||||
|
||||
.ats-app .content-area > * {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Menu list styles */
|
||||
.menu-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-list li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: var(--primary-light);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background-color: var(--primary-light);
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 1.25rem;
|
||||
min-width: 24px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.menu-item-text {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Collapsed state styles */
|
||||
.sidebar.collapsed .menu-item {
|
||||
justify-content: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-icon {
|
||||
margin-right: 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-item-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Active state indicator for collapsed */
|
||||
.sidebar.collapsed .menu-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
/* Mobile responsive styles */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar.collapsed .menu-list {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-item {
|
||||
flex-direction: column;
|
||||
padding: 8px 4px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-icon {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-item.active::after {
|
||||
left: 50%;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,87 +1,174 @@
|
|||
/** @odoo-module */
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
console.log("ATS JS Loaded");
|
||||
const contentArea = document.getElementById("main-content");
|
||||
const jobDetailArea = document.getElementById("job-detail");
|
||||
// Initialize application
|
||||
initTheme();
|
||||
initSidebar();
|
||||
initNavigation();
|
||||
|
||||
// Load default page based on URL hash or default to jobs
|
||||
loadPage(window.location.hash || "#jobs");
|
||||
});
|
||||
|
||||
// const toggleBtn = document.getElementById("sidebar-toggle-btn");
|
||||
// const sidebar = document.getElementById("sidebar");
|
||||
//
|
||||
// // ✅ Sidebar Toggle
|
||||
// if (toggleBtn && sidebar) {
|
||||
// toggleBtn.addEventListener("click", function () {
|
||||
// sidebar.classList.toggle("collapsed");
|
||||
// sidebar.classList.toggle("expanded");
|
||||
// });
|
||||
// }
|
||||
document.getElementById('sidebar-toggle-btn').addEventListener('click', function () {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const icon = this.querySelector('i');
|
||||
|
||||
sidebar.classList.toggle('collapsed');
|
||||
|
||||
if (sidebar.classList.contains('collapsed')) {
|
||||
icon.classList.remove('fas fa-angle-left');
|
||||
icon.classList.add('fas fa-angle-right');
|
||||
} else {
|
||||
icon.classList.remove('fas fa-angle-right');
|
||||
icon.classList.add('fas fa-angle-left');
|
||||
/**
|
||||
* Initialize theme functionality
|
||||
*/
|
||||
function initTheme() {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const htmlElement = document.documentElement;
|
||||
|
||||
// Get saved theme or use system preference
|
||||
const getPreferredTheme = () => {
|
||||
const storedTheme = localStorage.getItem('theme');
|
||||
if (storedTheme) return storedTheme;
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
};
|
||||
|
||||
// Apply theme
|
||||
const applyTheme = (theme) => {
|
||||
htmlElement.setAttribute('data-theme', theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
updateThemeButton(theme);
|
||||
};
|
||||
|
||||
// Update toggle button state
|
||||
const updateThemeButton = (theme) => {
|
||||
const themeText = theme === 'dark' ? 'Light Mode' : 'Dark Mode';
|
||||
if (document.querySelector('.theme-text')) {
|
||||
document.querySelector('.theme-text').textContent = themeText;
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize with preferred theme
|
||||
applyTheme(getPreferredTheme());
|
||||
|
||||
// Toggle theme on button click
|
||||
if (themeToggle) {
|
||||
themeToggle.addEventListener('click', () => {
|
||||
const currentTheme = htmlElement.getAttribute('data-theme');
|
||||
applyTheme(currentTheme === 'dark' ? 'light' : 'dark');
|
||||
});
|
||||
}
|
||||
|
||||
// Watch for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
if (!localStorage.getItem('theme')) {
|
||||
applyTheme(e.matches ? 'dark' : 'light');
|
||||
}
|
||||
});
|
||||
const links = document.querySelectorAll('.menu-list a');
|
||||
}
|
||||
|
||||
function highlightCurrentMenu() {
|
||||
const hash = window.location.hash;
|
||||
/**
|
||||
* Initialize sidebar functionality
|
||||
*/
|
||||
function initSidebar() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const toggleBtn = document.getElementById('sidebar-toggle-btn');
|
||||
|
||||
if (!sidebar || !toggleBtn) return;
|
||||
|
||||
// Toggle sidebar state
|
||||
const toggleSidebar = () => {
|
||||
sidebar.classList.toggle('collapsed');
|
||||
sidebar.classList.toggle('expanded');
|
||||
|
||||
// Update toggle button icon
|
||||
const icon = toggleBtn.querySelector('i');
|
||||
icon.textContent = sidebar.classList.contains('collapsed') ? '>>' : '<<';
|
||||
|
||||
// Store preference
|
||||
localStorage.setItem('sidebarCollapsed', sidebar.classList.contains('collapsed'));
|
||||
};
|
||||
|
||||
// Initialize sidebar state
|
||||
const sidebarCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
|
||||
if (sidebarCollapsed) {
|
||||
sidebar.classList.add('collapsed');
|
||||
sidebar.classList.remove('expanded');
|
||||
toggleBtn.querySelector('i').textContent = '>>';
|
||||
}
|
||||
|
||||
// Add click event
|
||||
toggleBtn.addEventListener('click', toggleSidebar);
|
||||
}
|
||||
|
||||
links.forEach(link => {
|
||||
if (link.getAttribute('href') === hash) {
|
||||
link.classList.add('active');
|
||||
} else {
|
||||
link.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Run on page load
|
||||
highlightCurrentMenu();
|
||||
|
||||
// Optional: update on hash change (if user navigates)
|
||||
window.addEventListener('hashchange', highlightCurrentMenu);
|
||||
|
||||
// Optional: highlight on click if you're using JS navigation
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
links.forEach(l => l.classList.remove('active'));
|
||||
link.classList.add('active');
|
||||
});
|
||||
});
|
||||
/**
|
||||
* Initialize page navigation
|
||||
*/
|
||||
function initNavigation() {
|
||||
// Highlight current menu item based on hash
|
||||
const highlightActiveMenu = () => {
|
||||
const hash = window.location.hash;
|
||||
document.querySelectorAll('.menu-list a').forEach(link => {
|
||||
link.classList.toggle('active', link.getAttribute('href') === hash);
|
||||
});
|
||||
};
|
||||
|
||||
// Handle page loading
|
||||
const loadPage = async (hash) => {
|
||||
if (!hash) return;
|
||||
|
||||
try {
|
||||
const contentArea = document.getElementById('main-content');
|
||||
const jobDetailArea = document.getElementById('job-detail');
|
||||
const page = hash.substring(1); // Remove #
|
||||
|
||||
// Highlight active menu
|
||||
highlightActiveMenu();
|
||||
|
||||
// Load page content
|
||||
const res = await fetch(`/myATS/page/${page}`, {
|
||||
headers: { "X-Requested-With": "XMLHttpRequest" }
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
|
||||
|
||||
const html = await res.text();
|
||||
contentArea.innerHTML = html;
|
||||
if (jobDetailArea) jobDetailArea.innerHTML = "";
|
||||
|
||||
// Initialize page-specific JS
|
||||
initPageScripts(page);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading page:', error);
|
||||
document.getElementById('main-content').innerHTML = `
|
||||
<div class="alert alert-danger">
|
||||
Error loading page: ${error.message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize page-specific scripts
|
||||
const initPageScripts = (page) => {
|
||||
switch (page) {
|
||||
case 'jobs':
|
||||
case 'job_requests':
|
||||
if (typeof initJobListPage === 'function') initJobListPage();
|
||||
break;
|
||||
case 'applicants':
|
||||
if (typeof initApplicantsPage === 'function') initApplicantsPage();
|
||||
break;
|
||||
case 'candidates':
|
||||
if (typeof initCandidatesPage === 'function') initCandidatesPage();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Set up navigation events
|
||||
document.querySelectorAll('.menu-list a[data-page]').forEach(link => {
|
||||
link.addEventListener('click', async function (e) {
|
||||
debugger;
|
||||
link.addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
const page = this.dataset.page;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/myATS/page/${page}`, {
|
||||
headers: { "X-Requested-With": "XMLHttpRequest" }
|
||||
});
|
||||
const html = await res.text();
|
||||
contentArea.innerHTML = html;
|
||||
if (jobDetailArea) jobDetailArea.innerHTML = "";
|
||||
|
||||
// 🔽 Dynamically import JS module for the page
|
||||
if (page === "job_requests") {
|
||||
initJobListPage();
|
||||
} else if (page === "applicants") {
|
||||
initApplicantsPage();
|
||||
} else if (page === "candidates") {
|
||||
initCandidatesPage();
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
contentArea.innerHTML = `<p style="color:red;">Error loading page: ${err}</p>`;
|
||||
}
|
||||
const hash = link.getAttribute('href');
|
||||
window.location.hash = hash;
|
||||
await loadPage(hash);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Handle hash changes
|
||||
window.addEventListener('hashchange', () => {
|
||||
loadPage(window.location.hash);
|
||||
});
|
||||
|
||||
// Initial highlight
|
||||
highlightActiveMenu();
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="ats-list-left expanded" id="applicants-list-panel">
|
||||
<t t-call="hr_recruitment_web_app.applicants_list"/>
|
||||
<!-- Toggle Button -->
|
||||
<button id="applicants-list-sidebar-toggle-btn" class="ats-list-toggle-btn">☰</button>
|
||||
<i id="applicants-list-sidebar-toggle-btn" class="ats-list-toggle-btn"><<</i>
|
||||
</div>
|
||||
<!-- Job Detail Panel -->
|
||||
<div id="applicants-detail" class="ats-detail">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<title>ATS</title>
|
||||
<link rel="stylesheet" href="/hr_recruitment_web_app/static/src/css/colors.css"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.8"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="/hr_recruitment_web_app/static/src/js/sortable.min.js"></script>-->
|
||||
<script type="text/javascript" src="/web/static/lib/jquery/jquery.js"></script>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<!-- <link ref="stylesheet" href="/hr_recruitment_web_app/static/src/css/ats_candidate.css"/>-->
|
||||
<script type="text/javascript" src="/hr_recruitment_web_app/static/src/js/ats.js"></script>
|
||||
<!-- <script type="text/javascript" src="/hr_recruitment_web_app/static/src/js/candidates.js"></script>-->
|
||||
<script type="text/javascript" src="/hr_recruitment_web_app/static/src/js/job_requests.js?v=19"></script>
|
||||
<script type="text/javascript" src="/hr_recruitment_web_app/static/src/js/job_requests.js?v=20"></script>
|
||||
<script type="text/javascript" src="/hr_recruitment_web_app/static/src/js/applicants.js?v=8"></script>
|
||||
<script type="text/javascript" src="/hr_recruitment_web_app/static/src/js/candidates.js?v=6"></script>
|
||||
<script type="text/javascript"
|
||||
|
|
@ -38,23 +38,47 @@
|
|||
</head>
|
||||
<body class="ats-app">
|
||||
<div class="layout-container">
|
||||
<aside id="sidebar" class="sidebar expanded">
|
||||
<aside id="sidebar" class="sidebar expanded">
|
||||
<div class="main-header">
|
||||
<img src="/hr_recruitment_web_app/static/src/img/logo.jpeg"
|
||||
alt="ATS Logo"
|
||||
style="height: 40px; width: auto;" />
|
||||
<span style="font-size: 24px; font-weight: bold;">Opsentra ATS</span>
|
||||
</div>
|
||||
<ul class="menu-list list-unstyled">
|
||||
<!-- <span class="list-title">RECRUITING</span>-->
|
||||
<li><a href="#jobs" data-page="job_requests"><i class="bi bi-file-earmark-text"></i> JD</a></li>
|
||||
<li><a href="#applicants" data-page="applicants"><i class="bi bi-people"></i> Applicants</a></li>
|
||||
<li><a href="#candidates" data-page="candidates"><i class="bi bi-person-check"></i> Candidates</a></li>
|
||||
</ul>
|
||||
<button id="sidebar-toggle-btn" class="btn btn-outline-secondary position-absolute top-0 start-100 translate-middle-y mt-3">
|
||||
<i class="fas fa-angle-left"></i>
|
||||
</button>
|
||||
</aside>
|
||||
<ul class="menu-list list-unstyled">
|
||||
<!-- <span class="list-title">RECRUITING</span> -->
|
||||
<li>
|
||||
<a href="#jobs" data-page="job_requests" class="menu-item">
|
||||
<i class="bi bi-file-earmark-text menu-icon"></i>
|
||||
<span class="menu-item-text">JD</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#applicants" data-page="applicants" class="menu-item">
|
||||
<i class="bi bi-people menu-icon"></i>
|
||||
<span class="menu-item-text">Applicants</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#candidates" data-page="candidates" class="menu-item">
|
||||
<i class="bi bi-person-check menu-icon"></i>
|
||||
<span class="menu-item-text">Candidates</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="theme-toggle-container">
|
||||
<button id="themeToggle" class="theme-toggle">
|
||||
<i class="bi bi-moon-fill dark-icon"></i>
|
||||
<i class="bi bi-sun-fill light-icon"></i>
|
||||
<span class="theme-text">Dark Mode</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button id="sidebar-toggle-btn" class="btn btn-outline-secondary position-absolute top-0 start-100 translate-middle-y mt-3">
|
||||
<i><<</i>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="content-area">
|
||||
<div id="main-content"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue