AegisSight/TaskMate
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

UI-Redesign: AegisSight Design, Filter-Popover, Header-Umbau

Quellcode durchsuchen 
- Session-Timeout auf 60 Minuten erhöht (ACCESS_TOKEN_EXPIRY + SESSION_TIMEOUT)
- AegisSight Light Theme: Gold-Akzent (#C8A851) statt Indigo
- Navigation-Tabs in eigene Zeile unter Header verschoben (HTML-Struktur)
- Filter-Bar durch kompaktes Popover mit Checkboxen ersetzt (Mehrfachauswahl)
- Archiv-Funktion repariert (lädt jetzt per API statt leerem Store)
- Filter-Bugs behoben: Reset-Button ID, Default-Werte, Ohne-Datum-Filter
- Mehrspalten-Layout Feature entfernt
- Online-Status vom Header an User-Avatar verschoben (grüner Punkt)
- Lupen-Icon entfernt
- CLAUDE.md: Docker-Deploy und CSS-Tricks Regeln aktualisiert

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Server Deploy
2026-03-19 18:49:38 +01:00
Ursprung 99a6b7437b
Commit 4bd57d653f
36 geänderte Dateien mit 5027 neuen und 2897 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

131
frontend/js/board.js
Datei anzeigen

@@ -26,9 +26,6 @@ class BoardManager {
this.weekStripDate = this.getMonday(new Date());
this.tooltip = null;
// Layout preferences
this.multiColumnLayout = this.loadLayoutPreference();
this.init();
}
@@ -56,20 +53,6 @@ class BoardManager {
this.renderWeekStrip();
});
// Apply initial layout preference
setTimeout(() => {
this.applyLayoutClass();
if (this.multiColumnLayout) {
this.checkAndApplyDynamicLayout();
}
}, 100);
// Re-check layout on window resize
window.addEventListener('resize', debounce(() => {
if (this.multiColumnLayout) {
this.checkAndApplyDynamicLayout();
}
}, 250));
}
// =====================
@@ -163,12 +146,6 @@ class BoardManager {
// Keyboard navigation
document.addEventListener('keydown', (e) => this.handleKeyboard(e));
// Layout toggle button - use delegated event handling
document.addEventListener('click', (e) => {
if (e.target.closest('#btn-toggle-layout')) {
this.toggleLayout();
}
});
}
// =====================
@@ -180,9 +157,6 @@ class BoardManager {
const columns = store.get('columns');
clearElement(this.boardElement);
// Apply layout class
this.applyLayoutClass();
columns.forEach(column => {
const columnElement = this.createColumnElement(column);
@@ -198,9 +172,9 @@ class BoardManager {
'Statuskarte hinzufügen'
]);
this.boardElement.appendChild(addColumnBtn);
// Check dynamic layout after render
setTimeout(() => this.checkAndApplyDynamicLayout(), 100);
// Emit event for mobile column navigation
document.dispatchEvent(new CustomEvent('columns:updated'));
}
createColumnElement(column) {
@@ -506,9 +480,6 @@ class BoardManager {
countElement.textContent = filteredTasks.length.toString();
}
});
// Check if dynamic layout adjustment is needed
setTimeout(() => this.checkAndApplyDynamicLayout(), 100);
}
// =====================
@@ -1496,102 +1467,6 @@ class BoardManager {
return div.innerHTML;
}
// =====================
// LAYOUT PREFERENCES
// =====================
loadLayoutPreference() {
const stored = localStorage.getItem('taskmate:boardLayout');
return stored === 'multiColumn';
}
saveLayoutPreference(multiColumn) {
localStorage.setItem('taskmate:boardLayout', multiColumn ? 'multiColumn' : 'single');
}
toggleLayout() {
this.multiColumnLayout = !this.multiColumnLayout;
this.saveLayoutPreference(this.multiColumnLayout);
this.applyLayoutClass();
this.checkAndApplyDynamicLayout();
this.showSuccess(this.multiColumnLayout
? 'Mehrspalten-Layout aktiviert'
: 'Einspalten-Layout aktiviert'
);
}
applyLayoutClass() {
const toggleBtn = $('#btn-toggle-layout');
if (this.multiColumnLayout) {
this.boardElement?.classList.add('multi-column-layout');
toggleBtn?.classList.add('active');
} else {
this.boardElement?.classList.remove('multi-column-layout');
toggleBtn?.classList.remove('active');
// Remove all dynamic classes when disabled
const columns = this.boardElement?.querySelectorAll('.column');
columns?.forEach(column => {
const columnBody = column.querySelector('.column-body');
columnBody?.classList.remove('dynamic-2-columns', 'dynamic-3-columns');
column.classList.remove('expanded-2x', 'expanded-3x');
});
}
}
checkAndApplyDynamicLayout() {
if (!this.multiColumnLayout || !this.boardElement) return;
// Debug logging
console.log('[Layout Check] Checking dynamic layout...');
// Check each column to see if scrolling is needed
const columns = this.boardElement.querySelectorAll('.column');
columns.forEach(column => {
const columnBody = column.querySelector('.column-body');
if (!columnBody) return;
// Remove dynamic classes first
columnBody.classList.remove('dynamic-2-columns', 'dynamic-3-columns');
column.classList.remove('expanded-2x', 'expanded-3x');
// Force reflow to get accurate measurements
columnBody.offsetHeight;
const scrollHeight = columnBody.scrollHeight;
const clientHeight = columnBody.clientHeight;
const hasOverflow = scrollHeight > clientHeight;
console.log('[Layout Check]', {
column: column.dataset.columnId,
scrollHeight,
clientHeight,
hasOverflow,
ratio: scrollHeight / clientHeight
});
// Check if content overflows
if (hasOverflow && clientHeight > 0) {
// Calculate how many columns we need based on content height
const ratio = scrollHeight / clientHeight;
if (ratio > 2.5 && window.innerWidth >= 1800) {
// Need 3 columns
console.log('[Layout] Applying 3 columns');
columnBody.classList.add('dynamic-3-columns');
column.classList.add('expanded-3x');
} else if (ratio > 1.1 && window.innerWidth >= 1400) {
// Need 2 columns (reduced threshold to 1.1)
console.log('[Layout] Applying 2 columns');
columnBody.classList.add('dynamic-2-columns');
column.classList.add('expanded-2x');
}
}
});
}
}
// Create and export singleton