zan1456/firka-extension
1
0
Fork 0
mirror of https://github.com/QwIT-Development/firka-extension.git synced 2026-06-12 03:41:39 +02:00
Code Issues Actions Releases 1 Activity

Added new icons, fixed day notice on timetables

Browse Source
This commit is contained in:
Zan
2025-09-01 15:21:15 +02:00
parent a39295ae68
commit fa7c773393
10 changed files with 83 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
absences/absences.js
View File

@@ -89,14 +89,14 @@ async function transformAbsencesPage() {
<div class="filter-content">
<div class="filter-group">
<label>
<span class="material-icons-round">date_range</span>
<img src="${chrome.runtime.getURL("icons/Calendar.svg")}" alt="Dátum" style="width: 24px; height: 24px;">
${LanguageManager.t("absences.date")}
</label>
<input type="date" id="dateFilter" class="filter-input">
</div>
<div class="filter-group">
<label>
<span class="material-icons-round">school</span>
<img src="${chrome.runtime.getURL("icons/Subject.svg")}" alt="Tantárgy" style="width: 24px; height: 24px;">
${LanguageManager.t("absences.subject")}
</label>
<select id="subjectFilter" class="filter-input">
@@ -112,7 +112,7 @@ async function transformAbsencesPage() {
</div>
<div class="filter-group">
<label>
<span class="material-icons-round">check_circle</span>
<img src="${chrome.runtime.getURL("icons/BadgeCheck.svg")}" alt="Igazolás" style="width: 24px; height: 24px;">
${LanguageManager.t("absences.justification")}
</label>
<select id="justificationFilter" class="filter-input">
@@ -218,7 +218,7 @@ function generateAbsencesHTML(absences) {
<span class="status-badge ${absence.justificationStatus}">
${
absence.justificationStatus === "justified"
? `<span class="material-icons-round">check_circle</span> ${LanguageManager.t("absences.justified")}`
? `<img src="${chrome.runtime.getURL("icons/BadgeCheck.svg")}" alt="Igazolt" style="width: 16px; height: 16px;"> ${LanguageManager.t("absences.justified")}`
: absence.justificationStatus === "unjustified"
? `<span class="material-icons-round">cancel</span> ${LanguageManager.t("absences.unjustified")}`
: `<span class="material-icons-round">pending</span> ${LanguageManager.t("absences.pending")}`

1
icons/ArrowsExpandFull.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><path fill="none" stroke="#A7DC22" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19h4m0 0v-4m0 4l-4-4M9 5H5m0 0v4m0-4l4 4m6-4h4m0 0v4m0-4l-4 4M9 19H5m0 0v-4m0 4l4-4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 283 B

1
icons/BadgeCheck.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><g fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.054 2.344a3 3 0 0 1 3.892 0l1.271 1.084a1 1 0 0 0 .57.236l1.665.133a3 3 0 0 1 2.751 2.751l.133 1.666a1 1 0 0 0 .236.569l1.084 1.271a3 3 0 0 1 0 3.892l-1.084 1.271a1 1 0 0 0-.236.57l-.133 1.665a3 3 0 0 1-2.751 2.751l-1.666.133a1 1 0 0 0-.569.236l-1.271 1.084a3 3 0 0 1-3.892 0l-1.271-1.084a1 1 0 0 0-.57-.236l-1.665-.133a3 3 0 0 1-2.751-2.751l-.133-1.666a1 1 0 0 0-.236-.569l-1.084-1.271a3 3 0 0 1 0-3.892l1.084-1.271a1 1 0 0 0 .236-.57l.133-1.665a3 3 0 0 1 2.751-2.751l1.666-.133a1 1 0 0 0 .569-.236l1.271-1.084zm5.653 8.363a1 1 0 0 0-1.414-1.414L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z" fill="#A7DC22"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 799 B

1
icons/Calendar.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><g fill="none"><path fill="#A7DC22" d="M4 7v2h16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2"/><path stroke="#A7DC22" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 5h2a2 2 0 0 1 2 2v2H4V7a2 2 0 0 1 2-2h2m8 0V3m0 2H8m0-2v2M4 9.5V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.5"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 376 B

1
icons/ChevronLeftCircle.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><path fill="#A7DC22" fill-rule="evenodd" d="M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18m1.707-11.293a1 1 0 0 0-1.414-1.414l-3 3a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L11.414 12z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 289 B

1
icons/ChevronRightCircle.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><path fill="#A7DC22" fill-rule="evenodd" d="M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18M10.293 9.707a1 1 0 1 1 1.414-1.414l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L12.586 12z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 289 B

1
icons/CloseCircle.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><g fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12zm8.207-3.207a1 1 0 0 0-1.414 1.414L10.586 12l-1.793 1.793a1 1 0 1 0 1.414 1.414L12 13.414l1.793 1.793a1 1 0 0 0 1.414-1.414L13.414 12l1.793-1.793a1 1 0 0 0-1.414-1.414L12 10.586l-1.793-1.793z" fill="#A7DC22"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 440 B

1
icons/Subject.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><g fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.514 3.126a1 1 0 0 1 .972 0l9 5A1 1 0 0 1 22 9v7a1 1 0 1 1-2 0v-5.3l-1 .555v.004l-6.067 3.016a2 2 0 0 1-1.848-.035L2.357 9.479a1 1 0 0 0-.284-.103a1 1 0 0 1 .441-1.25l9-5zM5 13.199V17a1 1 0 0 0 .553.894l6 3a1 1 0 0 0 .894 0l6-3A1 1 0 0 0 19 17v-3.256l-6.083 2.844a2 2 0 0 1-1.805-.056L5 13.2z" fill="#A7DC22"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 472 B

31
timetable/timetable.css
View File

@@ -195,6 +195,31 @@ body {
font-weight:500;
line-height:130%;
}
.notice-header {
min-width:80px;
}
.notice-slot {
padding:4px 8px;
min-height:auto;
}
.special-day-notice {
background:#F99F50;
color:white;
padding:8px 12px;
border-radius:8px;
text-align:center;
box-shadow:0 1px 3px rgba(0,0,0,0.1);
font-size:0.85rem;
}
.special-day-notice .special-day-title {
font-weight:600;
margin-bottom:2px;
}
.special-day-notice .special-day-subtitle {
font-size:0.75rem;
opacity:0.9;
font-weight:400;
}
.time-slot {
padding:12px;
text-align:center;
@@ -660,6 +685,12 @@ body {
.grid-header.active {
display:flex !important;
}
.notice-slot {
display:none;
}
.notice-slot.active {
display:block;
}
.lesson-slot {
display:none;
}

61
timetable/timetable.js
View File

@@ -172,6 +172,9 @@
LanguageManager.t("timetable.friday"),
];
// Check if there are any special days to show notice row
const hasSpecialDays = specialDayLessons.length > 0;
return `
<div class="grid-header"></div>
${days
@@ -184,6 +187,27 @@
`;
})
.join("")}
${hasSpecialDays ? `
<div class="notice-header"></div>
${Array(5)
.fill()
.map((_, dayIndex) => {
const specialDay = specialDayLessons.find(
(l) => l.day === dayIndex,
);
return `
<div class="notice-slot">
${specialDay ? `
<div class="special-day-notice" style="background-color: ${specialDay.color || "#F99F50"}" data-lesson='${JSON.stringify(specialDay)}'>
<div class="special-day-title">${specialDay.subject}</div>
${specialDay.testInfo ? `<div class="special-day-subtitle">${specialDay.testInfo}</div>` : ""}
</div>
` : ""}
</div>
`;
})
.join("")}
` : ""}
${times
.map(
(time, timeIndex) => `
@@ -194,21 +218,10 @@
const dayLessons = regularLessons.filter(
(l) => l.startTime === time && l.day === dayIndex,
);
const specialDay = specialDayLessons.find(
(l) => l.day === dayIndex,
);
return `
<div class="lesson-slot ${specialDay ? "special-day-slot" : ""}">
${
specialDay && timeIndex === 0
? `
<div class="special-day-card" style="background-color: ${specialDay.color || "#F99F50"}" data-lesson='${JSON.stringify(specialDay)}'>
<div class="special-day-title">${specialDay.subject}</div>
${specialDay.testInfo ? `<div class="special-day-subtitle">${specialDay.testInfo}</div>` : ""}
</div>
`
: dayLessons
<div class="lesson-slot">
${dayLessons
.map(
(lesson) => `
<div class="lesson-card ${lesson.isSubstituted ? "substituted" : ""}
@@ -269,7 +282,7 @@
<div class="modal-header">
<h3 class="modal-title">${lesson.subject}</h3>
<button class="modal-close">
<span class="material-icons-round">close</span>
<img src="${chrome.runtime.getURL("icons/CloseCircle.svg")}" alt="Bezárás" style="width: 24px; height: 24px;">
</button>
</div>
<div class="modal-body">
@@ -570,6 +583,7 @@
const gridHeaders = document.querySelectorAll(
".grid-header:not(:first-child)",
);
const noticeSlots = document.querySelectorAll(".notice-slot");
const lessonSlots = document.querySelectorAll(".lesson-slot");
gridHeaders.forEach((header, index) => {
@@ -579,6 +593,13 @@
);
});
noticeSlots.forEach((slot, index) => {
slot.classList.toggle(
"active",
index === dayNavigationState.currentDayIndex,
);
});
const timeSlots = document.querySelectorAll(".time-slot");
timeSlots.forEach((timeSlot, timeIndex) => {
const startIndex = timeIndex * 5;
@@ -891,15 +912,15 @@
<div class="week-selector-container">
<div class="week-selector" id="week-selector">
<button class="week-nav-btn" id="prevWeekBtn" title="Előző hét">
<span class="material-icons-round">chevron_left</span>
<img src="${chrome.runtime.getURL("icons/ChevronLeftCircle.svg")}" alt="Előző" style="width: 24px; height: 24px;">
</button>
<div class="week-display" id="week-display">
</div>
<button class="week-nav-btn" id="nextWeekBtn" title="Következő hét">
<span class="material-icons-round">chevron_right</span>
<img src="${chrome.runtime.getURL("icons/ChevronRightCircle.svg")}" alt="Következő" style="width: 24px; height: 24px;">
</button>
<button class="expand-week-view-btn" id="expandWeekView" title="Teljes nézet">
<span class="material-icons-round">open_in_full</span>
<img src="${chrome.runtime.getURL("icons/ArrowsExpandFull.svg")}" alt="Teljes nézet" style="width: 18px; height: 18px;">
</button>
</div>
<div class="week-tooltip" id="week-tooltip"></div>
@@ -912,7 +933,7 @@
<div class="week-modal-header">
<h3></h3>
<button class="week-modal-close" id="closeWeekModal">
<span class="material-icons-round">close</span>
<img src="${chrome.runtime.getURL("icons/CloseCircle.svg")}" alt="Bezárás" style="width: 24px; height: 24px;">
</button>
</div>
<div class="week-modal-grid" id="weekModalGrid">
@@ -922,12 +943,12 @@
<div class="day-navigation">
<button class="day-nav-btn" id="prevDay">
<span class="material-icons-round">chevron_left</span>
<img src="${chrome.runtime.getURL("icons/ChevronLeftCircle.svg")}" alt="Előző" style="width: 24px; height: 24px;">
Előző
</button>
<button class="day-nav-btn" id="nextDay">
Következő
<span class="material-icons-round">chevron_right</span>
<img src="${chrome.runtime.getURL("icons/ChevronRightCircle.svg")}" alt="Következő" style="width: 24px; height: 24px;">
</button>
</div>