From 52fc99ca99e611478e335d445f2e92cc1408859a Mon Sep 17 00:00:00 2001 From: Zan1456 <62830223+Zan1456@users.noreply.github.com> Date: Sun, 8 Jun 2025 22:24:13 +0200 Subject: [PATCH] navbar fixes --- absences/absences.css | 90 +-------------------- absences/absences.js | 20 +---- dashboard/dashboard.css | 1 + dashboard/dashboard.js | 6 +- global/navigation.css | 172 ++++++++++++++++++++++++++++++++++++---- global/navigation.js | 31 ++++++++ grades/grades.css | 47 +---------- grades/grades.js | 2 + homework/homework.css | 105 +++++------------------- homework/homework.js | 14 ++-- profile/profile.css | 56 +------------ profile/profile.js | 2 + timetable/timetable.css | 117 +-------------------------- timetable/timetable.js | 31 ++------ tools/createTemplate.js | 7 +- 15 files changed, 246 insertions(+), 455 deletions(-) diff --git a/absences/absences.css b/absences/absences.css index d31f76e..2afc8c7 100644 --- a/absences/absences.css +++ b/absences/absences.css @@ -42,10 +42,10 @@ body { @media (max-width: 768px) { .kreta-header { - grid-template-columns: 1fr auto; + grid-template-columns: 1fr auto auto; grid-template-areas: - "school user" - "nav nav"; + "school toggle user" + "nav nav nav"; padding: 1rem; gap: 0.5rem; } @@ -110,77 +110,6 @@ body { } } - -.kreta-nav { - padding: 0 clamp(0.5rem, 3vw, 1.5rem); - position: sticky; - top: 0; - z-index: 100; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - -ms-overflow-style: none; - display: flex; - justify-content: center; -} - -@media (max-width: 768px) { - .kreta-nav { - grid-area: nav; - padding: 0; - margin-top: 0.5rem; - } -} - -.nav-links { - display: flex; - gap: clamp(0.5rem, 2vw, 1rem); - padding: 0.25rem; - justify-content: center; -} - -@media (max-width: 768px) { - .nav-links { - justify-content: flex-start; - width: 100%; - gap: 0.25rem; - } -} - -.nav-links a { - color: var(--text-secondary); - text-decoration: none; - padding: clamp(0.5rem, 1.5vw, 1rem) 0.5rem; - font-weight: 500; - white-space: nowrap; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 0.5rem; - border-radius: 8px; -} - -@media (max-width: 768px) { - .nav-links a { - padding: 0.5rem; - font-size: 13px; - } - - .nav-links a .material-icons-round { - font-size: 20px; - } -} - -.nav-links a:hover { - color: var(--text-primary); - background-color: var(--card-card); -} - -.nav-links a.active { - color: var(--accent-accent); -} - - .user-profile { position: relative; justify-self: flex-end; @@ -212,19 +141,6 @@ body { text-align: right; } -.user-name { - display: block; - color: var(--text-primary); - font-size: 16px; - font-weight: 500; -} - -.user-time { - display: block; - color: var(--text-secondary); - font-size: 14px; -} - .user-dropdown { position: absolute; top: 100%; diff --git a/absences/absences.js b/absences/absences.js index 3a0fbf5..e0b7e9a 100644 --- a/absences/absences.js +++ b/absences/absences.js @@ -130,6 +130,8 @@ async function transformAbsencesPage() { `; createTemplate.importFonts(); + setupUserDropdown(); + setupMobileNavigation(); setupEventListeners(); setupFilters(); @@ -206,16 +208,6 @@ function setupFilters() { let showGroup = true; - - // if (selectedDate && dateFilterValue) { - // // Compare year, month, and day to ignore time - // showGroup = groupDate.getFullYear() === selectedDate.getFullYear() && - // groupDate.getMonth() === selectedDate.getMonth() && - // groupDate.getDate() === selectedDate.getDate(); - // - // console.log(`Comparing dates: ${groupDate.toDateString()} vs ${selectedDate.toDateString()}, match: ${showGroup}`); - // } - const absenceItems = group.querySelectorAll('.absence-item'); let visibleItems = 0; @@ -242,15 +234,9 @@ function setupFilters() { }; - // if (!filters.dateFilter.value) { - // const today = new Date(); - // filters.dateFilter.value = today.toISOString().split('T')[0]; // Set date to today by default - // } - - Object.values(filters).forEach(filter => { try { - if (filter && filter !== filters.dateFilter) { // Don't add event listener to dateFilter + if (filter && filter !== filters.dateFilter) { filter.addEventListener('change', filterAbsences); } } catch (err) { diff --git a/dashboard/dashboard.css b/dashboard/dashboard.css index 312f480..6a46c4b 100644 --- a/dashboard/dashboard.css +++ b/dashboard/dashboard.css @@ -120,6 +120,7 @@ body { .grade-3 {color: var(--grades-3); background-color: var(--grades-background-3);} .grade-4 {color: var(--grades-4); background-color: var(--grades-background-4);} .grade-5 {color: var(--grades-5); background-color: var(--grades-background-5);} +.grade-Sz {color: var(--grades-3); background-color: var(--grades-background-3);} @keyframes fadeIn { from { diff --git a/dashboard/dashboard.js b/dashboard/dashboard.js index 1d235d7..015708b 100644 --- a/dashboard/dashboard.js +++ b/dashboard/dashboard.js @@ -1,6 +1,10 @@ const utils = { formatGradeValue(value) { - return value?.trim() || ''; + const trimmedValue = value?.trim() || ''; + if (trimmedValue.toLowerCase() === 'szöveges') { + return 'Sz'; + } + return trimmedValue; }, parseDate(dateStr) { diff --git a/global/navigation.css b/global/navigation.css index 1dca466..e3058c7 100644 --- a/global/navigation.css +++ b/global/navigation.css @@ -191,16 +191,42 @@ } } +/* Hamburger menu styles */ +.nav-toggle { + display: none; + background: none; + border: none; + cursor: pointer; + padding: 0.5rem; + border-radius: 8px; + transition: background-color 0.2s; +} + +.nav-toggle:hover { + background: var(--hover); +} + +.nav-toggle svg { + width: 24px; + height: 24px; + fill: var(--text-primary); +} + @media (max-width: 768px) { .kreta-header { - grid-template-columns: 1fr auto; + grid-template-columns: 1fr auto auto; grid-template-areas: - "school user" - "nav nav"; + "school toggle user" + "nav nav nav"; padding: 1rem; gap: 0.5rem; } + .nav-toggle { + display: block; + grid-area: toggle; + } + .school-info { grid-area: school; max-width: none; @@ -211,21 +237,24 @@ .logo-text { margin: 0; - font-size: 20px; + font-size: 18px; } .school-details { - font-size: 12px; + font-size: 11px; + max-width: 200px; } .kreta-nav { grid-area: nav; padding: 0; margin-top: 0.5rem; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - -ms-overflow-style: none; + display: none; + } + + .kreta-nav.show { + display: flex; + animation: slideDown 0.3s ease; } .kreta-nav::-webkit-scrollbar { @@ -233,25 +262,140 @@ } .nav-links { - justify-content: flex-start; + flex-direction: column; width: 100%; - gap: 0.25rem; + gap: 0.5rem; + background: var(--card-card); + border-radius: 12px; + padding: 1rem; + box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow); } .nav-item { - padding: 0.5rem; - font-size: 13px; + width: 100%; + justify-content: flex-start; + padding: 0.75rem; + font-size: 14px; } .user-profile { grid-area: user; } + .user-info { + text-align: right; + max-width: 120px; + } + .user-name { - font-size: 14px; + font-size: 13px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .nav-logout-timer { + font-size: 11px; + } +} + +@media (max-width: 480px) { + .kreta-header { + grid-template-columns: 1fr auto auto; + grid-template-areas: + "school toggle user" + "nav nav nav"; + padding: 0.75rem; + gap: 0.25rem; + } + + .school-info { + min-width: 0; + flex: 1; + } + + .logo-text { + font-size: 16px; + } + + .school-details { + font-size: 10px; + max-width: 150px; + } + + .kreta-nav { + display: none; + } + + .kreta-nav.show { + display: flex; + animation: slideDown 0.3s ease; + } + + .nav-links { + flex-direction: column; + width: 100%; + gap: 0.5rem; + background: var(--card-card); + border-radius: 12px; + padding: 1rem; + box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow); + } + + .nav-item { + width: 100%; + justify-content: flex-start; + padding: 0.75rem; + font-size: 14px; + } + + .user-info { + max-width: 100px; + } + + .user-name { font-size: 12px; } + + .nav-logout-timer { + font-size: 10px; + } +} + +@media (max-width: 360px) { + .kreta-header { + padding: 0.5rem; + } + + .logo-text { + font-size: 14px; + } + + .school-details { + font-size: 9px; + max-width: 120px; + } + + .user-info { + max-width: 80px; + } + + .user-name { + font-size: 11px; + } + + .nav-logout-timer { + font-size: 9px; + } +} + +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } } \ No newline at end of file diff --git a/global/navigation.js b/global/navigation.js index c1bccf2..932195c 100644 --- a/global/navigation.js +++ b/global/navigation.js @@ -84,8 +84,39 @@ function setupSettingsButton() { }); } +function setupMobileNavigation() { + setTimeout(() => { + const navToggle = document.querySelector('.nav-toggle'); + const nav = document.querySelector('.kreta-nav'); + + if (!navToggle || !nav) { + return; + } + + navToggle.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + nav.classList.toggle('show'); + }); + + document.addEventListener('click', (e) => { + if (!nav.contains(e.target) && !navToggle.contains(e.target)) { + nav.classList.remove('show'); + } + }); + + const navItems = document.querySelectorAll('.nav-item'); + navItems.forEach(item => { + item.addEventListener('click', () => { + nav.classList.remove('show'); + }); + }); + }, 100); +} + document.addEventListener('DOMContentLoaded', () => { updateHeaderInfo(); setupUserDropdown(); setupSettingsButton(); + setupMobileNavigation(); }); diff --git a/grades/grades.css b/grades/grades.css index e8153a2..945eb85 100644 --- a/grades/grades.css +++ b/grades/grades.css @@ -302,17 +302,7 @@ body { .user-info { text-align: right; } -.user-name { - display: block; - color: var(--text-primary); - font-size: 16px; - font-weight: 500; -} -.user-time { - display: block; - color: var(--text-secondary); - font-size: 14px; -} + .user-dropdown { position: absolute; top: 100%; @@ -342,32 +332,6 @@ body { background: var(--button-secondaryFill); } -.nav-links { - display: flex; - gap: clamp(0.5rem, 2vw, 1rem); - padding: 0.25rem; - justify-content: center; -} -.nav-links a { - color: var(--text-secondary); - text-decoration: none; - padding: clamp(0.5rem, 1.5vw, 1rem) 0.5rem; - font-weight: 500; - white-space: nowrap; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 0.5rem; - border-radius: 8px; -} -.nav-links a:hover { - color: var(--text-primary); - background-color: var(--card-card); -} -.nav-links a.active { - color: var(--accent-accent); -} - .kreta-main { flex: 1; padding: clamp(1rem, 3vw, 2rem); @@ -396,15 +360,6 @@ body { align-items: center; gap: 1rem; } -.nav-links { - justify-content: flex-start; - width: 100%; - gap: 0.25rem; - } -.nav-links a { - padding: 0.5rem; - font-size: 13px; - } } .material-icons-round { diff --git a/grades/grades.js b/grades/grades.js index e42b048..b4d02b9 100644 --- a/grades/grades.js +++ b/grades/grades.js @@ -11,6 +11,8 @@ document.body.innerHTML = generatePageHTML(gradesData, studentAverage, classAverage); createTemplate.importFonts(); + setupUserDropdown(); + setupMobileNavigation(); const script = document.createElement('script'); script.src = chrome.runtime.getURL('grades/chart.js'); diff --git a/homework/homework.css b/homework/homework.css index cbce5e3..1e92b34 100644 --- a/homework/homework.css +++ b/homework/homework.css @@ -67,10 +67,10 @@ body { @media (max-width: 768px) { .kreta-header { - grid-template-columns: 1fr auto; + grid-template-columns: 1fr auto auto; grid-template-areas: - "school user" - "nav nav"; + "school toggle user" + "nav nav nav"; padding: 1rem; gap: 0.5rem; } @@ -135,77 +135,6 @@ body { } } - -.kreta-nav { - padding: 0 clamp(0.5rem, 3vw, 1.5rem); - position: sticky; - top: 0; - z-index: 100; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - -ms-overflow-style: none; - display: flex; - justify-content: center; -} - -@media (max-width: 768px) { - .kreta-nav { - grid-area: nav; - padding: 0; - margin-top: 0.5rem; - } -} - -.nav-links { - display: flex; - gap: clamp(0.5rem, 2vw, 1rem); - padding: 0.25rem; - justify-content: center; -} - -@media (max-width: 768px) { - .nav-links { - justify-content: flex-start; - width: 100%; - gap: 0.25rem; - } -} - -.nav-links a { - color: var(--text-secondary); - text-decoration: none; - padding: clamp(0.5rem, 1.5vw, 1rem) 0.5rem; - font-weight: 500; - white-space: nowrap; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 0.5rem; - border-radius: 8px; -} - -@media (max-width: 768px) { - .nav-links a { - padding: 0.5rem; - font-size: 13px; - } - - .nav-links a .material-icons-round { - font-size: 20px; - } -} - -.nav-links a:hover { - color: var(--text-primary); - background-color: var(--card-card); -} - -.nav-links a.active { - color: var(--accent-accent); -} - - .user-profile { position: relative; justify-self: flex-end; @@ -235,31 +164,22 @@ body { gap: 0.25rem; } -.user-name { - font-weight: 600; - font-size: 14px; -} - -.nav-logout-timer { - font-size: 12px; - color: var(--text-secondary); -} - .user-dropdown { position: absolute; top: 100%; right: 0; + margin-top: 0.5rem; background: var(--card-card); border-radius: 12px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - min-width: 200px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + width: 200px; display: none; z-index: 1000; - overflow: hidden; } .user-dropdown.show { display: block; + animation: dropdownShow 0.2s ease; } .dropdown-item { @@ -524,4 +444,15 @@ body { flex-direction: column; gap: 0.25rem; } +} + +@keyframes dropdownShow { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } } \ No newline at end of file diff --git a/homework/homework.js b/homework/homework.js index 54e581b..012c902 100644 --- a/homework/homework.js +++ b/homework/homework.js @@ -50,7 +50,7 @@ function isTomorrow(dateStr) { if (parts.length < 3) return false; const year = parseInt(parts[0].trim()); - const month = parseInt(parts[1].trim()) - 1; // JS months are 0-indexed + const month = parseInt(parts[1].trim()) - 1; const day = parseInt(parts[2].trim()); const homeworkDate = new Date(year, month, day); @@ -69,13 +69,8 @@ function isTomorrow(dateStr) { } async function transformHomeworkPage() { - //loadingScreen.show(); const { basicData, homeworkItems, groupedHomework } = await collectHomeworkData(); - - const schoolNameFull = `${basicData.schoolInfo.id} - ${basicData.schoolInfo.name}`; - const shortenedSchoolName = helper.shortenSchoolName(schoolNameFull); - document.body.innerHTML = `
${createTemplate.header()} @@ -136,6 +131,7 @@ async function transformHomeworkPage() { setupFilters(homeworkItems, groupedHomework); setupUserDropdown(); + setupMobileNavigation(); loadingScreen.hide(); } @@ -304,11 +300,11 @@ function setupFilters(homeworkItems, groupedHomework) { const startOfWeek = new Date(today); - const dayOfWeek = today.getDay() || 7; // Convert Sunday from 0 to 7 - startOfWeek.setDate(today.getDate() - dayOfWeek + 1); // Monday + const dayOfWeek = today.getDay() || 7; + startOfWeek.setDate(today.getDate() - dayOfWeek + 1); const endOfWeek = new Date(startOfWeek); - endOfWeek.setDate(startOfWeek.getDate() + 6); // Sunday + endOfWeek.setDate(startOfWeek.getDate() + 6); const startOfNextWeek = new Date(endOfWeek); diff --git a/profile/profile.css b/profile/profile.css index ef4ea38..7ac6dc3 100644 --- a/profile/profile.css +++ b/profile/profile.css @@ -59,37 +59,6 @@ body { max-width: 300px; } - -.nav-links { - display: flex; - gap: clamp(0.5rem, 2vw, 1rem); - padding: 0.25rem; - justify-content: center; -} - -.nav-links a { - color: var(--text-secondary); - text-decoration: none; - padding: clamp(0.5rem, 1.5vw, 1rem) 0.5rem; - font-weight: 500; - white-space: nowrap; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 0.5rem; - border-radius: 8px; -} - -.nav-links a:hover { - color: var(--text-primary); - background-color: var(--card-card); -} - -.nav-links a.active { - color: var(--accent-accent); -} - - .user-profile { position: relative; justify-self: flex-end; @@ -115,19 +84,6 @@ body { text-align: right; } -.user-name { - display: block; - color: var(--text-primary); - font-size: 16px; - font-weight: 500; -} - -.user-time { - display: block; - color: var(--text-secondary); - font-size: 14px; -} - .user-dropdown { position: absolute; top: 100%; @@ -426,10 +382,10 @@ body { @media (max-width: 768px) { .kreta-header { - grid-template-columns: 1fr auto; + grid-template-columns: 1fr auto auto; grid-template-areas: - "school user" - "nav nav"; + "school toggle user" + "nav nav nav"; padding: 1rem; gap: 0.5rem; } @@ -438,12 +394,6 @@ body { grid-area: school; } - .nav-links { - grid-area: nav; - margin-top: 0.5rem; - justify-content: flex-start; - } - .user-profile { grid-area: user; } diff --git a/profile/profile.js b/profile/profile.js index 9802f5b..a5de3f6 100644 --- a/profile/profile.js +++ b/profile/profile.js @@ -385,6 +385,8 @@ createTemplate.importFonts(); document.body.innerHTML = createProfileHTML(); + setupUserDropdown(); + setupMobileNavigation(); setupEventListeners(); setupContactForm(); } diff --git a/timetable/timetable.css b/timetable/timetable.css index 372e198..9b6b0a3 100644 --- a/timetable/timetable.css +++ b/timetable/timetable.css @@ -72,10 +72,10 @@ body { @media (max-width: 768px) { .kreta-header { - grid-template-columns: 1fr auto; + grid-template-columns: 1fr auto auto; grid-template-areas: - "school user" - "nav nav"; + "school toggle user" + "nav nav nav"; padding: 1rem; gap: 0.5rem; } @@ -140,81 +140,6 @@ body { } } -/* Updated navigation styles */ -.kreta-nav { - padding: 0 clamp(0.5rem, 3vw, 1.5rem); - position: sticky; - top: 0; - z-index: 100; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - -ms-overflow-style: none; - display: flex; - justify-content: center; -} - -@media (max-width: 768px) { - .kreta-nav { - grid-area: nav; - padding: 0; - margin-top: 0.5rem; - } -} - -.kreta-nav::-webkit-scrollbar { - display: none; -} - -.nav-links { - display: flex; - gap: clamp(0.5rem, 2vw, 1rem); - padding: 0.25rem; - justify-content: center; -} - -@media (max-width: 768px) { - .nav-links { - justify-content: flex-start; - width: 100%; - gap: 0.25rem; - } -} - -.nav-links a { - color: var(--text-secondary); - text-decoration: none; - padding: clamp(0.5rem, 1.5vw, 1rem) 0.5rem; - font-weight: 500; - white-space: nowrap; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 0.5rem; - border-radius: 8px; -} - -@media (max-width: 768px) { - .nav-links a { - padding: 0.5rem; - font-size: 13px; - } - - .nav-links a .material-icons-round { - font-size: 20px; - } -} - -.nav-links a:hover { - color: var(--text-primary); - text-decoration: none; - background-color: var(--card-card); -} - -.nav-links a.active { - color: var(--accent-accent); -} - /* User profile styles */ .user-profile { position: relative; @@ -247,19 +172,6 @@ body { text-align: right; } -.user-name { - display: block; - color: var(--text-primary); - font-size: 16px; - font-weight: 500; -} - -.user-time { - display: block; - color: var(--text-secondary); - font-size: 14px; -} - .user-dropdown { position: absolute; top: 100%; @@ -292,7 +204,6 @@ body { background: var(--button-secondaryFill); } -/* Main content styles */ .kreta-main { flex: 1; padding: clamp(1rem, 3vw, 2rem); @@ -301,12 +212,10 @@ body { width: 100%; } -/* Disable Kréta styles */ .k-overlay, .k-widget.k-window { display: none !important; } -/* Card styles */ .card { border-radius: 24px; overflow: hidden; @@ -314,7 +223,6 @@ body { margin-bottom: 1rem; } -/* Timetable specific styles */ .timetable-grid { display: grid; grid-template-columns: 80px repeat(5, 1fr); @@ -489,7 +397,6 @@ body { font-size: 14px; } -/* Week selector styling */ .week-controls { display: flex; gap: 16px; @@ -530,7 +437,6 @@ body { color: var(--accent-accent); } -/* Responsive adjustments */ @media (max-width: 1024px) { .timetable-grid { grid-template-columns: 60px repeat(5, minmax(200px, 1fr)); @@ -561,7 +467,6 @@ body { } } -/* Modal styles */ .lesson-modal { display: none; position: fixed; @@ -741,27 +646,11 @@ body { text-align: center; } - .nav-links { - justify-content: start; - overflow-x: auto; - padding-bottom: 0.5rem; - } - - .nav-links::-webkit-scrollbar { - display: none; - } - .lesson-cell { min-width: 200px; } } -/* Material Icons */ -.material-icons-round { - font-size: 20px; - vertical-align: middle; -} - /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; diff --git a/timetable/timetable.js b/timetable/timetable.js index f012e09..b2374c7 100644 --- a/timetable/timetable.js +++ b/timetable/timetable.js @@ -1,27 +1,20 @@ (() => { - // Órarendi adatok gyűjtése async function collectTimetableData() { await helper.waitForElement('#Calendar'); await helper.waitForElement('.modalBckgroundMain:not(.isOverlayActiv)'); - const calendar = document.querySelector('#Calendar'); const dates = Array.from(document.querySelectorAll('.fc-day-header')).map(header => { const fullText = header.textContent.trim(); - // Remove the day name from the beginning and clean up the format const dateText = fullText.replace(/^(hétfő|kedd|szerda|csütörtök|péntek)/, '').trim(); return { date: fullText, formattedDate: dateText }; }); - // Fix the Thursday issue by ensuring we have all 5 days if (dates.length === 4) { - // Get Wednesday's date parts const wedDate = dates[2].formattedDate; const [month, day] = wedDate.split(' '); const dayNum = parseInt(day.replace('.', '')); - - // Create Thursday's date const thursdayDate = `${month} ${dayNum + 1}.`; dates.splice(3, 0, { @@ -29,9 +22,8 @@ formattedDate: thursdayDate }); } - // Set week selector based on the current date const weekOptions = Array.from(document.querySelectorAll('#Calendar_tanevHetek_listbox li')); - const currentDate = dates[0]?.formattedDate; // Using Monday's date + const currentDate = dates[0]?.formattedDate; const matchingWeek = weekOptions.find(opt => opt.textContent.includes(currentDate)); if (matchingWeek) { @@ -60,11 +52,10 @@ selected: li.classList.contains('k-state-selected') })) }, - weekDates: dates, // Add the dates to the data object + weekDates: dates, lessons: [] }; - - // Órák adatainak gyűjtése + for (const event of document.querySelectorAll('.fc-event')) { const timeEl = event.querySelector('.fc-time'); const titleEl = event.querySelector('.fc-title'); @@ -101,7 +92,6 @@ return timetableData; } - // Grid generálása function generateTimeGrid(lessons, weekDates) { const times = [...new Set(lessons.map(l => l.startTime))].sort((a, b) => { const timeA = helper.convertTimeToMinutes(a); @@ -157,7 +147,6 @@ `).join('')} `; } - // Óra részletek modal function showLessonModal(lesson) { const modal = document.createElement('div'); modal.className = 'lesson-modal'; @@ -229,7 +218,6 @@ document.body.appendChild(modal); - // Modal bezárás const closeModal = () => { modal.classList.remove('show'); setTimeout(() => modal.remove(), 300); @@ -240,7 +228,6 @@ if (e.target === modal) closeModal(); }); - // ESC gomb kezelése const handleEscape = (e) => { if (e.key === 'Escape') { closeModal(); @@ -249,15 +236,12 @@ }; document.addEventListener('keydown', handleEscape); - // Animáció requestAnimationFrame(() => { modal.classList.add('show'); }); } - // Eseménykezelők beállítása function setupEventListeners(data) { - // Órakártyák document.querySelectorAll('.lesson-card').forEach(card => { card.addEventListener('click', () => { const lessonData = JSON.parse(card.dataset.lesson); @@ -265,7 +249,6 @@ }); }); - // Felhasználói menü const userBtn = document.querySelector('.user-dropdown-btn'); const userDropdown = document.querySelector('.user-dropdown'); @@ -278,7 +261,6 @@ userDropdown?.classList.remove('show'); }); - // Hét navigáció const prevBtn = document.querySelector('.prev-week'); const nextBtn = document.querySelector('.next-week'); const weekSelect = document.querySelector('.week-select'); @@ -313,8 +295,6 @@ } }); } - - // Oldal transzformáció async function transformTimetablePage() { try { const data = await collectTimetableData(); @@ -323,9 +303,6 @@ return; } - const schoolNameFull = `${data.schoolInfo.id} - ${data.schoolInfo.name}`; - const shortenedSchoolName = helper.shortenSchoolName(schoolNameFull); - document.body.innerHTML = `
${createTemplate.header()} @@ -357,6 +334,8 @@ `; createTemplate.importFonts(); + setupUserDropdown(); + setupMobileNavigation(); setupEventListeners(data); loadingScreen.hide(); diff --git a/tools/createTemplate.js b/tools/createTemplate.js index 47e91ad..5c8e9c5 100644 --- a/tools/createTemplate.js +++ b/tools/createTemplate.js @@ -28,6 +28,12 @@ const createTemplate = {
+ +