UI-Redesign: AegisSight Design, Filter-Popover, Header-Umbau
- 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
@@ -4,6 +4,57 @@
|
||||
* Mobile und Tablet Anpassungen
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
GLOBALE RESPONSIVE ANPASSUNGEN
|
||||
======================================== */
|
||||
|
||||
/* Verhindere horizontales Scrollen */
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* App Container */
|
||||
.app {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Hauptcontainer */
|
||||
.main {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Alle Views */
|
||||
.view {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Verhindere Überlauf bei allen Elementen */
|
||||
* {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Responsive Box-Sizing für alle Elemente */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
TABLET (max 1024px)
|
||||
======================================== */
|
||||
@@ -31,33 +82,91 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MEDIUM SCREENS (max 1200px)
|
||||
======================================== */
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
/* Header-Anpassungen für mittlere Bildschirme */
|
||||
.header {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* Project Selector schmaler */
|
||||
.project-select {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
/* Search Container schmaler */
|
||||
.search-container {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
/* Navigation tabs - kompakter und zentriert bei mittleren Bildschirmen */
|
||||
.view-tabs {
|
||||
gap: var(--spacing-xs);
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-tab {
|
||||
padding: 6px 8px;
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Modals anpassen */
|
||||
.modal {
|
||||
margin: var(--spacing-md);
|
||||
}
|
||||
|
||||
.modal-large {
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
/* Tabellen responsiv */
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
SMALL TABLET (max 768px)
|
||||
======================================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
gap: var(--spacing-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
padding: 0 var(--spacing-sm);
|
||||
gap: var(--spacing-xs);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
order: 1;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.header-center {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding-top: var(--spacing-sm);
|
||||
border-top: 1px solid var(--border-default);
|
||||
.view-tabs-bar {
|
||||
display: none; /* Navigation wird ins Mobile Menu verschoben */
|
||||
}
|
||||
|
||||
.header-right {
|
||||
order: 2;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -72,28 +181,18 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view-tabs {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
/* Mobile Navigation wird über Hamburger Menu gesteuert */
|
||||
.mobile-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Logo kleiner auf Mobile */
|
||||
.logo {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.view-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
justify-content: center;
|
||||
.filter-bar-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view-board {
|
||||
@@ -101,16 +200,119 @@
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Mobile Board - One column at a time */
|
||||
.board-container {
|
||||
overflow-x: hidden !important;
|
||||
scroll-snap-type: none !important;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.column {
|
||||
width: calc(100vw - 32px);
|
||||
min-width: calc(100vw - 32px);
|
||||
max-height: none;
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - 200px);
|
||||
margin: 0;
|
||||
padding: var(--spacing-sm);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.column.mobile-active {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.btn-add-column {
|
||||
width: calc(100vw - 32px);
|
||||
min-width: calc(100vw - 32px);
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
min-height: 100px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Hide scrollbar in mobile board */
|
||||
.board-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Fix for views in mobile */
|
||||
.view.active {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* List view mobile adjustments */
|
||||
.view-list.active {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.list-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.list-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.list-view-toggle {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.list-sort {
|
||||
margin-left: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Table responsive */
|
||||
.list-table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.list-table {
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
/* Calendar view mobile adjustments */
|
||||
.view-calendar {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.calendar-nav {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.calendar-actions {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.calendar-day-header {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
min-height: 60px;
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.calendar-task {
|
||||
font-size: 9px;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@@ -264,6 +466,7 @@
|
||||
left: var(--spacing-md);
|
||||
right: var(--spacing-md);
|
||||
bottom: var(--spacing-md);
|
||||
bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.toast {
|
||||
@@ -291,7 +494,7 @@
|
||||
|
||||
@media print {
|
||||
.header,
|
||||
.filter-bar,
|
||||
.view-tabs-bar,
|
||||
.btn-add-column,
|
||||
.column-actions,
|
||||
.btn-add-task,
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren