Отображение вкладок в структуре вуза
This commit is contained in:
@@ -1624,7 +1624,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.academic-calendar-tabs {
|
||||
.academic-calendar-tabs,
|
||||
.university-structure-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
@@ -1632,7 +1633,8 @@
|
||||
border-bottom: 1px solid var(--bg-card-border);
|
||||
}
|
||||
|
||||
.academic-calendar-tab {
|
||||
.academic-calendar-tab,
|
||||
.university-structure-tab {
|
||||
min-height: 40px;
|
||||
padding: 0.55rem 0.9rem;
|
||||
border: 1px solid transparent;
|
||||
@@ -1647,24 +1649,29 @@
|
||||
}
|
||||
|
||||
.academic-calendar-tab:hover,
|
||||
.academic-calendar-tab:focus-visible {
|
||||
.academic-calendar-tab:focus-visible,
|
||||
.university-structure-tab:hover,
|
||||
.university-structure-tab:focus-visible {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-hover);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.academic-calendar-tab.active {
|
||||
.academic-calendar-tab.active,
|
||||
.university-structure-tab.active {
|
||||
color: var(--accent-hover);
|
||||
background: var(--bg-card);
|
||||
border-color: var(--bg-card-border);
|
||||
}
|
||||
|
||||
.academic-calendar-tab-panel {
|
||||
.academic-calendar-tab-panel,
|
||||
.university-structure-tab-panel {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.academic-calendar-tab-panel[hidden] {
|
||||
.academic-calendar-tab-panel[hidden],
|
||||
.university-structure-tab-panel[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -2360,7 +2367,8 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.academic-calendar-tab {
|
||||
.academic-calendar-tab,
|
||||
.university-structure-tab {
|
||||
flex: 1 1 100%;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--bg-card-border);
|
||||
|
||||
@@ -53,41 +53,26 @@ export async function initUniversityStructure() {
|
||||
let allProfiles = [];
|
||||
|
||||
// --- Логика переключения табов ---
|
||||
function deactivateTabs() {
|
||||
[tabDepartments, tabSpecialties, tabProfiles].forEach(tab => {
|
||||
if (tab) {
|
||||
tab.classList.remove('active');
|
||||
tab.style.borderBottomColor = 'transparent';
|
||||
tab.style.color = 'var(--text-secondary)';
|
||||
const structureTabs = [
|
||||
{ button: tabDepartments, panel: contentDepartments },
|
||||
{ button: tabSpecialties, panel: contentSpecialties },
|
||||
{ button: tabProfiles, panel: contentProfiles },
|
||||
];
|
||||
|
||||
function activateStructureTab(activeButton) {
|
||||
structureTabs.forEach(({ button, panel }) => {
|
||||
const active = button === activeButton;
|
||||
button?.classList.toggle('active', active);
|
||||
button?.setAttribute('aria-selected', active ? 'true' : 'false');
|
||||
if (panel) {
|
||||
panel.classList.toggle('active', active);
|
||||
panel.hidden = !active;
|
||||
}
|
||||
});
|
||||
[contentDepartments, contentSpecialties, contentProfiles].forEach(content => {
|
||||
if (content) content.style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
tabDepartments.addEventListener('click', () => {
|
||||
deactivateTabs();
|
||||
tabDepartments.classList.add('active');
|
||||
tabDepartments.style.borderBottomColor = 'var(--primary)';
|
||||
tabDepartments.style.color = 'var(--text-main)';
|
||||
contentDepartments.style.display = 'block';
|
||||
});
|
||||
|
||||
tabSpecialties.addEventListener('click', () => {
|
||||
deactivateTabs();
|
||||
tabSpecialties.classList.add('active');
|
||||
tabSpecialties.style.borderBottomColor = 'var(--primary)';
|
||||
tabSpecialties.style.color = 'var(--text-main)';
|
||||
contentSpecialties.style.display = 'block';
|
||||
});
|
||||
|
||||
tabProfiles.addEventListener('click', () => {
|
||||
deactivateTabs();
|
||||
tabProfiles.classList.add('active');
|
||||
tabProfiles.style.borderBottomColor = 'var(--primary)';
|
||||
tabProfiles.style.color = 'var(--text-main)';
|
||||
contentProfiles.style.display = 'block';
|
||||
structureTabs.forEach(({ button }) => {
|
||||
button?.addEventListener('click', () => activateStructureTab(button));
|
||||
});
|
||||
|
||||
// --- Загрузка данных ---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<!-- ===== University Structure Tab (Departments, Specialties & Profiles) ===== -->
|
||||
<div class="tab-container">
|
||||
<div class="tabs-header-buttons" style="display: flex; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">
|
||||
<button class="btn-tab active" id="btn-tab-departments" style="background: none; border: none; border-bottom: 2px solid var(--primary); color: var(--text-main); font-weight: 600; padding: 0.5rem 1rem; cursor: pointer;">Кафедры</button>
|
||||
<button class="btn-tab" id="btn-tab-specialties" style="background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-weight: 500; padding: 0.5rem 1rem; cursor: pointer;">Специальности</button>
|
||||
<button class="btn-tab" id="btn-tab-profiles" style="background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-weight: 500; padding: 0.5rem 1rem; cursor: pointer;">Профили</button>
|
||||
<div class="university-structure-tabs" role="tablist" aria-label="Разделы структуры вуза">
|
||||
<button type="button" class="university-structure-tab active" id="btn-tab-departments" role="tab" aria-selected="true" aria-controls="tab-content-departments">Кафедры</button>
|
||||
<button type="button" class="university-structure-tab" id="btn-tab-specialties" role="tab" aria-selected="false" aria-controls="tab-content-specialties">Специальности</button>
|
||||
<button type="button" class="university-structure-tab" id="btn-tab-profiles" role="tab" aria-selected="false" aria-controls="tab-content-profiles">Профили</button>
|
||||
</div>
|
||||
|
||||
<!-- Раздел Кафедр -->
|
||||
<div id="tab-content-departments" class="tab-content-section">
|
||||
<div id="tab-content-departments" class="university-structure-tab-panel active" role="tabpanel" aria-labelledby="btn-tab-departments">
|
||||
<div class="card create-card">
|
||||
<h2>Создание кафедры</h2>
|
||||
<form id="create-department-form">
|
||||
@@ -51,7 +51,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Раздел Специальностей -->
|
||||
<div id="tab-content-specialties" class="tab-content-section" style="display: none;">
|
||||
<div id="tab-content-specialties" class="university-structure-tab-panel" role="tabpanel" aria-labelledby="btn-tab-specialties" hidden>
|
||||
<div class="card create-card">
|
||||
<h2>Создание специальности</h2>
|
||||
<form id="create-specialty-form">
|
||||
@@ -95,7 +95,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Раздел Профилей -->
|
||||
<div id="tab-content-profiles" class="tab-content-section" style="display: none;">
|
||||
<div id="tab-content-profiles" class="university-structure-tab-panel" role="tabpanel" aria-labelledby="btn-tab-profiles" hidden>
|
||||
<div class="card create-card">
|
||||
<h2 id="main-profile-form-title">Создание профиля</h2>
|
||||
<form id="create-profile-tab-form">
|
||||
|
||||
Reference in New Issue
Block a user