diff --git a/absences/absences.css b/absences/absences.css
index c851aa1..1b0b47a 100644
--- a/absences/absences.css
+++ b/absences/absences.css
@@ -603,163 +603,7 @@ body {
.day-group:nth-child(4) { animation-delay: 0.2s; }
.day-group:nth-child(5) { animation-delay: 0.25s; }
-.kreta-header {
- padding: clamp(1rem, 3vw, 2rem);
- display: grid;
- grid-template-columns: minmax(300px, 400px) 1fr minmax(200px, 300px);
- align-items: center;
- gap: 1rem;
-}
-@media (max-width: 1200px) {
- .kreta-header {
- grid-template-columns: minmax(250px, 350px) 1fr minmax(180px, 250px);
- }
-}
-
-@media (max-width: 768px) {
- .kreta-header {
- grid-template-columns: 1fr auto auto;
- grid-template-areas:
- "school toggle user"
- "nav nav nav";
- padding: 1rem;
- gap: 0.5rem;
- }
-}
-
-.school-info {
- margin: 0;
-}
-
-@media (max-width: 768px) {
- .school-info {
- grid-area: school;
- max-width: none;
- display: flex;
- align-items: center;
- gap: 0.5rem;
- }
-}
-
-.logo-text {
- color: var(--text-primary);
- font-size: 24px;
- font-weight: 600;
- margin: 0 0 0.5rem;
- display: flex;
- align-items: center;
-}
-
-@media (max-width: 768px) {
- .logo-text {
- margin: 0;
- font-size: 20px;
- }
-}
-
-.logo {
- width: 24px;
- border-radius: 8px;
- margin-right: 0.5rem;
-}
-
-.school-details {
- color: var(--text-secondary);
- font-size: 14px;
-}
-
-.school-details span {
- display: block;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 300px;
-}
-
-@media (max-width: 768px) {
- .school-details span {
- max-width: 200px;
- }
- .school-details {
- font-size: 12px;
- }
-}
-
-.user-profile {
- position: relative;
- justify-self: flex-end;
-}
-
-@media (max-width: 768px) {
- .user-profile {
- grid-area: user;
- }
-}
-
-.user-dropdown-btn {
- display: flex;
- align-items: center;
- gap: 1rem;
- background: none;
- border: none;
- cursor: pointer;
- padding: 0.5rem;
- border-radius: 8px;
- transition: background-color 0.2s;
-}
-
-.user-dropdown-btn:hover {
- background: var(--card-card);
-}
-
-.user-info {
- text-align: right;
-}
-
-.user-dropdown {
- position: absolute;
- top: 100%;
- right: 0;
- margin-top: 0.5rem;
- background: var(--card-card);
- border-radius: 12px;
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
- width: 200px;
- display: none;
- z-index: 1000;
-}
-
-.user-dropdown.show {
- display: block;
- animation: dropdownShow 0.2s ease;
-}
-
-.dropdown-item {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- padding: 0.75rem 1rem;
- color: var(--text-primary);
- text-decoration: none;
- transition: background-color 0.2s;
-}
-
-.dropdown-item:hover {
- background: var(--button-secondaryFill);
- text-decoration: none;
-}
-
-@keyframes dropdownShow {
- from {
- opacity: 0;
- transform: translateY(-10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
.loading-overlay {
position: fixed;
diff --git a/absences/absences.js b/absences/absences.js
index bc611d3..5bf0443 100644
--- a/absences/absences.js
+++ b/absences/absences.js
@@ -434,7 +434,6 @@ async function transformAbsencesPage() {
document.body.appendChild(container);
setupUserDropdown();
- setupMobileNavigation();
setupFilters(groupedAbsences);
loadingScreen.hide();
diff --git a/dashboard/dashboard.css b/dashboard/dashboard.css
index ed105e7..8906752 100644
--- a/dashboard/dashboard.css
+++ b/dashboard/dashboard.css
@@ -354,13 +354,15 @@ h2 {
}
.user-dropdown-btn {
- background: none;
+ background: var(--button-secondaryFill);
border: none;
cursor: pointer;
- padding: 8px;
+ padding: 8px 12px;
display: flex;
align-items: center;
color: var(--text-primary);
+ border-radius: 12px;
+ box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow);
}
.user-dropdown {
diff --git a/dashboard/dashboard.js b/dashboard/dashboard.js
index fdedd2f..ebdda5e 100644
--- a/dashboard/dashboard.js
+++ b/dashboard/dashboard.js
@@ -505,7 +505,6 @@ class DashboardRenderer {
document.body.appendChild(kretaContainer);
setupUserDropdown();
- setupMobileNavigation();
}
}
diff --git a/global/navigation.css b/global/navigation.css
index 9c94731..83ab823 100644
--- a/global/navigation.css
+++ b/global/navigation.css
@@ -1,335 +1,491 @@
.kreta-header {
- padding:clamp(1rem,3vw,2rem);
- display:grid;
- grid-template-columns:minmax(300px,400px) 1fr minmax(200px,300px);
- align-items:center;
- gap:1rem;
- background-color:var(--background);
+ padding: 1rem 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: var(--background);
+ gap: 1.5rem;
}
+
.school-info {
- margin:0;
- display:flex;
- flex-direction:column;
+ display: flex;
+ flex-direction: column;
+ min-width: 200px;
+ flex-shrink: 0;
}
+
.logo-text {
- color:var(--text-primary);
- font-size:24px;
- font-weight:600;
- margin:0 0 0.5rem;
- display:flex;
- align-items:center;
+ color: var(--text-primary);
+ font-size: 22px;
+ font-weight: 600;
+ margin: 0;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
}
+
.logo {
- width:24px;
- height:24px;
- border-radius:8px;
- margin-right:0.5rem;
+ width: 24px;
+ height: 24px;
+ border-radius: 8px;
}
+
.school-details {
- color:var(--text-secondary);
- font-size:14px;
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
+ color: var(--text-secondary);
+ font-size: 13px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 300px;
+ margin-top: 0.25rem;
}
+
.kreta-nav {
- padding:0 clamp(0.5rem,3vw,1.5rem);
- position:sticky;
- top:0;
- z-index:100;
- display:flex;
- justify-content:center;
+ display: flex;
+ justify-content: center;
+ flex: 1;
}
+
.nav-links {
- display:flex;
- gap:clamp(0.5rem,2vw,1rem);
- padding:0.25rem;
- align-items:center;
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
}
+
.nav-item {
- display:flex;
- align-items:center;
- padding:8px 14px 8px 12px;
- color:var(--text-secondary);
- text-decoration:none;
- font-weight:500;
- white-space:nowrap;
- border-radius:20px;
- transition:all 0.2s ease;
- gap:0.5rem;
- text-decoration:none;
- background:var(--button-secondaryFill);
- box-shadow:0px 1px var(--shadow-blur,2px) 0px var(--accent-shadow);
-}
-.nav-item.active {
- display:flex;
- padding:8px 14px 8px 12px;
- align-items:center;
- gap:8px;
- border-radius:20px;
- background:var(--button-secondaryFill);
- box-shadow:0px 1px var(--shadow-blur,2px) 0px var(--accent-shadow);
+ display: flex;
+ align-items: center;
+ padding: 10px 16px;
+ color: var(--text-secondary);
+ text-decoration: none;
+ font-weight: 500;
+ font-size: 14px;
+ white-space: nowrap;
+ border-radius: 12px;
+ transition: all 0.2s ease;
+ gap: 0.5rem;
+ background: var(--button-secondaryFill);
+ box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow);
}
+
.nav-item:hover {
- color:var(--text-primary);
- background-color:var(--accent-15);
- border-radius:8px;
- text-decoration:none;
+ color: var(--text-primary);
+ background-color: var(--accent-15);
+ text-decoration: none;
}
-.nav-item.active:hover {
- color:var(--accent-accent);
- background-color:var(--accent-15);
- text-decoration:none;
+
+.nav-item.active {
+ color: var(--accent-accent);
+ background: var(--accent-15);
}
-.nav-item img,.nav-item svg {
- width:24px;
- height:24px;
+
+.nav-item img,
+.nav-item svg {
+ width: 20px;
+ height: 20px;
+}
+
+.nav-item.active img {
+ filter: var(--icon-filter) !important;
+}
+
+.user-profile {
+ position: relative;
+ flex-shrink: 0;
+}
+
+.user-dropdown-btn {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ background: var(--button-secondaryFill);
+ border: none;
+ cursor: pointer;
+ padding: 8px 12px;
+ border-radius: 12px;
+ transition: all 0.2s ease;
+ box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow);
+}
+
+.user-dropdown-btn:hover {
+ background: var(--accent-15);
+}
+
+.user-info {
+ text-align: right;
+}
+
+.user-name {
+ display: block;
+ color: var(--text-primary);
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.nav-logout-timer {
+ display: block;
+ color: var(--text-secondary);
+ font-size: 12px;
+}
+
+.user-avatar-icon {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: var(--accent-15);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.user-avatar-icon svg {
+ width: 18px;
+ height: 18px;
+ fill: var(--accent-accent);
+}
+
+.dropdown-arrow {
+ width: 16px;
+ height: 16px;
+ fill: var(--text-secondary);
+ transition: transform 0.2s ease;
+}
+
+.user-dropdown-btn.open .dropdown-arrow {
+ transform: rotate(180deg);
+}
+
+.user-dropdown {
+ position: absolute;
+ top: calc(100% + 8px);
+ right: 0;
+ background: var(--card-card);
+ border-radius: 12px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+ min-width: 180px;
+ display: none;
+ z-index: 1000;
+ overflow: hidden;
+}
+
+.user-dropdown.show {
+ display: block;
+ animation: dropdownShow 0.2s ease;
+}
+
+.dropdown-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 12px 16px;
+ color: var(--text-primary);
+ text-decoration: none;
+ transition: background-color 0.2s;
+ font-size: 14px;
+}
+
+.dropdown-item:hover {
+ background: var(--hover);
+ color: var(--accent-accent);
+ text-decoration: none;
+}
+
+.dropdown-item img {
+ width: 18px;
+ height: 18px;
filter: var(--icon-filter);
}
-.nav-item.active svg path {
- fill:var(--accent-accent);
-}
-.user-profile {
- position:relative;
- justify-self:flex-end;
-}
-.user-dropdown-btn {
- display:flex;
- align-items:center;
- gap:1rem;
- background:none;
- border:none;
- cursor:pointer;
- padding:0.5rem;
- border-radius:8px;
- transition:background-color 0.2s;
-}
-.user-dropdown-btn:hover {
- background:var(--hover);
-}
-.user-info {
- text-align:right;
-}
-.user-name {
- display:block;
- color:var(--text-primary);
- font-size:16px;
-}
-.nav-logout-timer {
- display:block;
- color:var(--text-secondary);
- font-size:14px;
-}
-.user-dropdown {
- position:absolute;
- top:100%;
- right:0;
- margin-top:0.5rem;
- background:var(--card-card);
- border-radius:12px;
- box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);
- width:200px;
- display:none;
- z-index:1000;
-}
-.user-dropdown.show {
- display:block;
- animation:dropdownShow 0.2s ease;
-}
-.dropdown-item {
- display:flex;
- align-items:center;
- gap:0.75rem;
- padding:0.75rem 1rem;
- color:var(--text-primary);
- text-decoration:none;
- transition:background-color 0.2s;
-}
-.dropdown-item:hover {
- background:var(--hover);
- color:var(--accent-accent);
- border-radius:8px;
- text-decoration:none;
+
+.dropdown-item:hover img {
+ filter: none;
}
+
@keyframes dropdownShow {
from {
- opacity:0;
- transform:translateY(-10px);
-}
-to {
- opacity:1;
- transform:translateY(0);
-}
-}@media (max-width:1200px) {
- .kreta-header {
- grid-template-columns:minmax(250px,350px) 1fr minmax(180px,250px);
-}
-}/* 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 auto;
- grid-template-areas:"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;
- display:flex;
- align-items:center;
- gap:0.5rem;
-}
-.logo-text {
- margin:0;
- font-size:18px;
-}
-.school-details {
- font-size:11px;
- max-width:200px;
-}
-.kreta-nav {
- grid-area:nav;
- padding:0;
- margin-top:0.5rem;
- display:none;
-}
-.kreta-nav.show {
- display:flex;
- animation:slideDown 0.3s ease;
-}
-.kreta-nav::-webkit-scrollbar {
- display:none;
-}
-.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-profile {
- grid-area:user;
-}
-.user-info {
- text-align:right;
- max-width:120px;
-}
-.user-name {
- 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;
+ opacity: 0;
+ transform: translateY(-8px);
}
- .logo-text {
- font-size:14px;
+ to {
+ opacity: 1;
+ transform: translateY(0);
}
- .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 {
+
+@keyframes dropdownShowUp {
from {
- opacity:0;
- transform:translateY(-10px);
+ opacity: 0;
+ transform: translateY(8px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
-to {
- opacity:1;
- transform:translateY(0);
+
+.mobile-header,
+.mobile-bottom-nav,
+.mobile-user-dropdown {
+ display: none;
}
+
+@media (max-width: 900px) {
+ .kreta-header {
+ display: none;
+ }
+
+ .mobile-header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 1rem;
+ background-color: var(--background);
+ gap: 1rem;
+ }
+
+ .mobile-header .school-info {
+ align-items: center;
+ text-align: center;
+ min-width: auto;
+ }
+
+ .mobile-header .logo-text {
+ font-size: 20px;
+ justify-content: center;
+ }
+
+ .mobile-header .school-details {
+ max-width: 280px;
+ text-align: center;
+ }
+
+ .mobile-bottom-nav {
+ display: flex;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: var(--background);
+ padding: 8px 16px;
+ padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
+ z-index: 1000;
+ box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+ border-radius: 20px 20px 0 0;
+ }
+
+ .mobile-nav-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ padding: 8px 4px;
+ color: var(--text-secondary);
+ text-decoration: none;
+ font-size: 10px;
+ font-weight: 500;
+ border-radius: 12px;
+ transition: all 0.2s ease;
+ gap: 4px;
+ background: var(--card-card);
+ box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow);
+ }
+
+ .mobile-nav-item:hover {
+ color: var(--text-primary);
+ background: var(--accent-15);
+ text-decoration: none;
+ }
+
+ .mobile-nav-item.active {
+ color: var(--accent-accent);
+ background: var(--accent-15);
+ }
+
+ .mobile-nav-item img {
+ width: 22px;
+ height: 22px;
+ transition: filter 0.2s ease;
+ }
+
+ .mobile-nav-item.active img {
+ filter: var(--icon-filter) !important;
+ }
+
+ .mobile-nav-item.active {
+ color: var(--accent-accent) !important;
+ background: var(--accent-15);
+ }
+
+ .mobile-user-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ padding: 8px 4px;
+ color: var(--text-secondary);
+ background: var(--card-card);
+ box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow);
+ border: none;
+ font-size: 10px;
+ font-weight: 500;
+ border-radius: 12px;
+ transition: all 0.2s ease;
+ gap: 4px;
+ cursor: pointer;
+ }
+
+ .mobile-user-btn:hover {
+ color: var(--text-primary);
+ background: var(--accent-15);
+ }
+
+ .mobile-user-btn.active {
+ color: var(--accent-accent);
+ background: var(--accent-15);
+ }
+
+ .mobile-user-btn .user-avatar-icon {
+ width: 22px;
+ height: 22px;
+ }
+
+ .mobile-user-btn .user-avatar-icon svg {
+ width: 14px;
+ height: 14px;
+ }
+
+ .mobile-user-dropdown {
+ position: fixed;
+ bottom: calc(70px + env(safe-area-inset-bottom, 0px));
+ right: 12px;
+ background: var(--card-card);
+ border-radius: 12px;
+ box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
+ min-width: 200px;
+ display: none;
+ z-index: 1001;
+ overflow: hidden;
+ }
+
+ .mobile-user-dropdown.show {
+ display: block;
+ animation: dropdownShowUp 0.2s ease;
+ }
+
+ .mobile-dropdown-header {
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--hover);
+ text-align: center;
+ }
+
+ .mobile-dropdown-header .user-name {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+
+ .mobile-dropdown-header .nav-logout-timer {
+ font-size: 12px;
+ color: var(--text-secondary);
+ margin-top: 2px;
+ }
+
+ .mobile-dropdown-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 12px 16px;
+ color: var(--text-primary);
+ text-decoration: none;
+ transition: background-color 0.2s;
+ font-size: 14px;
+ }
+
+ .mobile-dropdown-item:hover {
+ background: var(--hover);
+ color: var(--accent-accent);
+ text-decoration: none;
+ }
+
+ .mobile-dropdown-item img {
+ width: 18px;
+ height: 18px;
+ filter: var(--icon-filter);
+ }
+
+ .mobile-dropdown-item:hover img {
+ filter: none;
+ }
+
+ body {
+ padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
+ }
+}
+
+@media (max-width: 480px) {
+ .mobile-header {
+ padding: 0.75rem;
+ }
+
+ .mobile-header .logo-text {
+ font-size: 18px;
+ }
+
+ .mobile-header .school-details {
+ font-size: 11px;
+ max-width: 220px;
+ }
+
+ .mobile-nav-item {
+ padding: 6px 4px;
+ font-size: 9px;
+ }
+
+ .mobile-nav-item img {
+ width: 20px;
+ height: 20px;
+ }
+
+ .mobile-user-btn {
+ padding: 6px 4px;
+ font-size: 9px;
+ }
+
+ .mobile-user-btn .user-avatar-icon {
+ width: 20px;
+ height: 20px;
+ }
+}
+
+@media (max-width: 360px) {
+ .mobile-header .logo-text {
+ font-size: 16px;
+ }
+
+ .mobile-header .school-details {
+ font-size: 10px;
+ max-width: 180px;
+ }
+
+ .mobile-nav-item span {
+ display: none;
+ }
+
+ .mobile-user-btn span {
+ display: none;
+ }
+
+ .mobile-nav-item img {
+ width: 24px;
+ height: 24px;
+ }
+
+ .mobile-user-btn .user-avatar-icon {
+ width: 24px;
+ height: 24px;
+ }
}
\ No newline at end of file
diff --git a/global/navigation.js b/global/navigation.js
index e06d7d6..a4ee241 100644
--- a/global/navigation.js
+++ b/global/navigation.js
@@ -42,12 +42,17 @@ async function updateHeaderInfo() {
function startLogoutTimer(timeString) {
const startTime = parseInt(timeString?.match(/\d+/)?.[0] || "45");
let timeLeft = startTime * 60;
- const timerElement = document.querySelector(".nav-logout-timer");
-
+
const updateTimer = () => {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
- timerElement.textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`;
+ const timeText = `${minutes}:${seconds.toString().padStart(2, "0")}`;
+
+ const desktopTimer = document.querySelector("#logoutTimer");
+ const mobileTimer = document.querySelector("#mobileLogoutTimer");
+
+ if (desktopTimer) desktopTimer.textContent = timeText;
+ if (mobileTimer) mobileTimer.textContent = timeText;
if (timeLeft <= 0) {
window.location.href = "/Home/Logout";
@@ -59,10 +64,6 @@ function startLogoutTimer(timeString) {
setInterval(updateTimer, 1000);
}
-document.addEventListener("DOMContentLoaded", async () => {
- await updateHeaderInfo();
-});
-
function setupUserDropdown() {
const userBtn = document.querySelector(".user-dropdown-btn");
const userDropdown = document.querySelector(".user-dropdown");
@@ -70,10 +71,36 @@ function setupUserDropdown() {
userBtn?.addEventListener("click", (e) => {
e.stopPropagation();
userDropdown?.classList.toggle("show");
+ userBtn?.classList.toggle("open");
});
- document.addEventListener("click", () => {
- userDropdown?.classList.remove("show");
+ const mobileUserBtn = document.querySelector("#mobileUserBtn");
+ const mobileUserDropdown = document.querySelector("#mobileUserDropdown");
+
+ mobileUserBtn?.addEventListener("click", (e) => {
+ e.stopPropagation();
+ mobileUserDropdown?.classList.toggle("show");
+ mobileUserBtn?.classList.toggle("active");
+ });
+
+ document.addEventListener("click", (e) => {
+ if (!userBtn?.contains(e.target) && !userDropdown?.contains(e.target)) {
+ userDropdown?.classList.remove("show");
+ userBtn?.classList.remove("open");
+ }
+
+ if (!mobileUserBtn?.contains(e.target) && !mobileUserDropdown?.contains(e.target)) {
+ mobileUserDropdown?.classList.remove("show");
+ mobileUserBtn?.classList.remove("active");
+ }
+ });
+
+ const mobileDropdownItems = document.querySelectorAll(".mobile-dropdown-item");
+ mobileDropdownItems.forEach(item => {
+ item.addEventListener("click", () => {
+ mobileUserDropdown?.classList.remove("show");
+ mobileUserBtn?.classList.remove("active");
+ });
});
}
@@ -84,94 +111,17 @@ function setupSettingsButton() {
const url = chrome.runtime.getURL("settings/index.html");
window.open(url, "_blank", "width=400,height=600");
});
-}
-function setupMobileNavigation() {
- setTimeout(() => {
- const navToggle = document.querySelector(".nav-toggle");
- const nav = document.querySelector(".kreta-nav");
-
- if (!navToggle || !nav) {
- return;
- }
-
- const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-
- if (isFirefox) {
- let isNavOpen = false;
-
- navToggle.addEventListener("click", (e) => {
- e.preventDefault();
- e.stopPropagation();
-
- if (isNavOpen) {
- nav.style.display = "none";
- nav.classList.remove("show");
- isNavOpen = false;
- } else {
- nav.style.display = "flex";
- nav.classList.add("show");
- isNavOpen = true;
- }
- });
-
- navToggle.addEventListener("touchend", (e) => {
- e.preventDefault();
- e.stopPropagation();
-
- if (isNavOpen) {
- nav.style.display = "none";
- nav.classList.remove("show");
- isNavOpen = false;
- } else {
- nav.style.display = "flex";
- nav.classList.add("show");
- isNavOpen = true;
- }
- });
-
- document.addEventListener("click", (e) => {
- if (!nav.contains(e.target) && !navToggle.contains(e.target) && isNavOpen) {
- nav.style.display = "none";
- nav.classList.remove("show");
- isNavOpen = false;
- }
- });
-
- const navItems = document.querySelectorAll(".nav-item");
- navItems.forEach((item) => {
- item.addEventListener("click", () => {
- nav.style.display = "none";
- nav.classList.remove("show");
- isNavOpen = false;
- });
- });
- } else {
- 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.getElementById("mobileSettingsBtn")?.addEventListener("click", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ const url = chrome.runtime.getURL("settings/index.html");
+ window.open(url, "_blank", "width=400,height=600");
+ });
}
document.addEventListener("DOMContentLoaded", async () => {
await updateHeaderInfo();
setupUserDropdown();
setupSettingsButton();
- setupMobileNavigation();
});
diff --git a/grades/grades.css b/grades/grades.css
index 801080c..564d8a6 100644
--- a/grades/grades.css
+++ b/grades/grades.css
@@ -276,16 +276,17 @@ body {
.user-dropdown-btn {
display:flex;
align-items:center;
- gap:1rem;
- background:none;
+ gap:0.75rem;
+ background:var(--button-secondaryFill);
border:none;
cursor:pointer;
- padding:0.5rem;
- border-radius:8px;
- transition:background-color 0.2s;
+ padding:8px 12px;
+ border-radius:12px;
+ transition:all 0.2s ease;
+ box-shadow:0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow);
}
.user-dropdown-btn:hover {
- background:var(--card-card);
+ background:var(--accent-15);
}
.user-info {
text-align:right;
diff --git a/grades/grades.js b/grades/grades.js
index b343020..0f643d7 100644
--- a/grades/grades.js
+++ b/grades/grades.js
@@ -23,7 +23,6 @@
setupUserDropdown();
- setupMobileNavigation();
const script = document.createElement("script");
script.src = chrome.runtime.getURL("grades/chart.js");
diff --git a/manifest.json b/manifest.json
index 6021c00..c7a0fa0 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "Firxa",
- "version": "1.4.0",
+ "version": "1.4.1",
"description": "KRÉTA webes verziójának újraírása",
"icons": {
"128": "images/firka_logo_128.png"
diff --git a/manifest_fox.json b/manifest_fox.json
index 051bb6c..2940498 100644
--- a/manifest_fox.json
+++ b/manifest_fox.json
@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "Firxa",
- "version": "1.4.0",
+ "version": "1.4.1",
"description": "KRÉTA webes verziójának újraírása",
"icons": {
"128": "images/firka_logo_128.png"
diff --git a/messages/messages.js b/messages/messages.js
index 5dcbed8..fce3b8d 100644
--- a/messages/messages.js
+++ b/messages/messages.js
@@ -597,9 +597,6 @@ async function switchView(view) {
if (typeof setupUserDropdown === 'function') {
setupUserDropdown();
}
- if (typeof setupMobileNavigation === 'function') {
- setupMobileNavigation();
- }
await loadMessages(messagesContainer);
diff --git a/timetable/timetable.css b/timetable/timetable.css
index 60aaf81..ca1e015 100644
--- a/timetable/timetable.css
+++ b/timetable/timetable.css
@@ -21,128 +21,6 @@ body {
display:flex;
flex-direction:column;
}
-.kreta-header {
- padding:clamp(1rem,3vw,2rem);
- display:grid;
- grid-template-columns:minmax(300px,400px) 1fr minmax(200px,300px);
- align-items:center;
- gap:1rem;
-}
-@media (max-width:1200px) {
- .kreta-header {
- grid-template-columns:minmax(250px,350px) 1fr minmax(180px,250px);
-}
-}@media (max-width:768px) {
- .kreta-header {
- grid-template-columns:1fr auto auto;
- grid-template-areas:"school toggle user"
- "nav nav nav";
- padding:1rem;
- gap:0.5rem;
-}
-}.school-info {
- margin:0;
-}
-@media (max-width:768px) {
- .school-info {
- grid-area:school;
- max-width:none;
- display:flex;
- align-items:center;
- gap:0.5rem;
-}
-}.logo-text {
- color:var(--text-primary);
- font-size:24px;
- font-weight:600;
- margin:0 0 0.5rem;
- display:flex;
- align-items:center;
-}
-@media (max-width:768px) {
- .logo-text {
- margin:0;
- font-size:20px;
-}
-}.logo {
- width:24px;
- border-radius:8px;
- margin-right:0.5rem;
-}
-.school-details {
- color:var(--text-secondary);
- font-size:14px;
-}
-.school-details span {
- display:block;
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
- max-width:300px;
-}
-@media (max-width:768px) {
- .school-details span {
- max-width:200px;
-}
-.school-details {
- font-size:12px;
-}
-}.user-profile {
- position:relative;
- justify-self:flex-end;
-}
-@media (max-width:768px) {
- .user-profile {
- grid-area:user;
-}
-}.user-dropdown-btn {
- display:flex;
- align-items:center;
- gap:1rem;
- background:none;
- border:none;
- cursor:pointer;
- padding:0.5rem;
- border-radius:8px;
- transition:background-color 0.2s;
-}
-.user-dropdown-btn:hover {
- background:var(--hover);
-}
-.user-info {
- text-align:right;
-}
-.user-dropdown {
- position:absolute;
- top:100%;
- right:0;
- margin-top:0.5rem;
- background:var(--card-card);
- border-radius:12px;
- box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);
- width:200px;
- display:none;
- z-index:1000;
-}
-.user-dropdown.show {
- display:block;
- animation:dropdownShow 0.2s ease;
-}
-.dropdown-item {
- display:flex;
- align-items:center;
- gap:0.75rem;
- padding:0.75rem 1rem;
- color:var(--text-primary);
- text-decoration:none;
- transition:background-color 0.2s;
-}
-.dropdown-item:hover {
- background:var(--hover);
- color:var(--accent-accent);
- border-radius:8px;
- text-decoration:none;
-}
.kreta-main {
flex:1;
padding:clamp(1rem,3vw,2rem);
@@ -633,8 +511,8 @@ body {
gap:4px;
}
.week-cell {
- width:35px;
- height:30px;
+ width:40px;
+ height:40px;
font-size:11px;
}
.week-controls {
@@ -650,7 +528,7 @@ body {
}
.day-nav-btn {
background:var(--card-card);
- border:1px solid var(--accent-15);
+ box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow);
border-radius:12px;
padding:12px 16px;
color:var(--text-secondary);
@@ -659,6 +537,7 @@ body {
display:flex;
align-items:center;
gap:8px;
+ border: #00000000 0px solid;
}
.day-nav-btn:hover {
background:var(--accent-15);
diff --git a/timetable/timetable.js b/timetable/timetable.js
index d67acc2..4137c23 100644
--- a/timetable/timetable.js
+++ b/timetable/timetable.js
@@ -2501,9 +2501,6 @@
if (typeof setupUserDropdown === 'function') {
setupUserDropdown();
}
- if (typeof setupMobileNavigation === 'function') {
- setupMobileNavigation();
- }
setupEventListeners(data);
initializeWeekSelector();
diff --git a/tools/createTemplate.js b/tools/createTemplate.js
index 46af193..3bc2c50 100644
--- a/tools/createTemplate.js
+++ b/tools/createTemplate.js
@@ -17,72 +17,119 @@ const createTemplate = {
const baseUrl = schoolSubdomain ? `https://${schoolSubdomain}.e-kreta.hu` : "";
const schoolNameFull = `${data.schoolInfo.id} - ${data.schoolInfo.name}`;
const shortenedSchoolName = helper.shortenSchoolName(schoolNameFull);
+ const navItems = [
+ { href: `${baseUrl}/Intezmeny/Faliujsag`, page: "dashboard", path: "/Intezmeny/Faliujsag", icon: "dashboard", label: LanguageManager.t("navigation.dashboard") },
+ { href: `${baseUrl}/TanuloErtekeles/Osztalyzatok`, page: "grades", path: "/TanuloErtekeles/Osztalyzatok", icon: "grades", label: LanguageManager.t("navigation.grades") },
+ { href: `${baseUrl}/Orarend/InformaciokOrarend`, page: "timetable", path: "/Orarend/InformaciokOrarend", icon: "timetable", label: LanguageManager.t("navigation.timetable") },
+ { href: `${baseUrl}/Hianyzas/Hianyzasok`, page: "absences", path: "/Hianyzas/Hianyzasok", icon: "absences", label: LanguageManager.t("navigation.absences") },
+ { href: "https://eugyintezes.e-kreta.hu/api/bff/login", page: "messages", path: "/" || "/uzenetek", icon: "messages", label: LanguageManager.t("navigation.messages") }
+ ];
+ const desktopNavItems = navItems.map(item => {
+ const isActive = location.pathname === item.path;
+ return `
+ 
+ ${item.label}
+ `;
+ }).join("");
+ const mobileNavItems = navItems.map(item => {
+ const isActive = location.pathname === item.path;
+ return `
+
+ ${item.label}
+ `;
+ }).join("");
+ const userAvatarSvg = ``;
- const element = `