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
@@ -71,6 +71,82 @@
|
||||
transform: translateY(-8px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE COLUMN INDICATOR
|
||||
======================================== */
|
||||
|
||||
.mobile-column-indicator {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.column-dots {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.column-dots .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-tertiary);
|
||||
opacity: 0.3;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-dots .dot.active {
|
||||
background: var(--primary);
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.column-name {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Mobile view hint */
|
||||
.mobile-view-hint {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-view-hint.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mobile-view-hint.left {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.mobile-view-hint.right {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE SLIDE-IN MENU
|
||||
======================================== */
|
||||
@@ -436,6 +512,221 @@
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE BOARD OPTIMIERUNG
|
||||
======================================== */
|
||||
|
||||
/* Task Cards - Groesser und besser lesbar */
|
||||
.task-card {
|
||||
padding: var(--spacing-4);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.task-card-meta {
|
||||
font-size: var(--text-sm);
|
||||
gap: var(--spacing-4);
|
||||
margin-top: var(--spacing-4);
|
||||
}
|
||||
|
||||
.task-meta-item {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.task-meta-item .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.task-card-labels {
|
||||
gap: 8px;
|
||||
margin-top: var(--spacing-4);
|
||||
}
|
||||
|
||||
.task-label {
|
||||
padding: 6px 12px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.task-card-footer {
|
||||
margin-top: var(--spacing-4);
|
||||
padding-top: var(--spacing-4);
|
||||
}
|
||||
|
||||
.task-assignee-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.task-counts {
|
||||
font-size: var(--text-sm);
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
/* Priority Stars groesser */
|
||||
.priority-stars {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Column Header */
|
||||
.column-header {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.column-title {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.column-count {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Column Body */
|
||||
.column-body {
|
||||
padding: var(--spacing-3);
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* Add Task Button */
|
||||
.btn-add-task {
|
||||
padding: var(--spacing-4);
|
||||
font-size: var(--text-base);
|
||||
min-height: 52px;
|
||||
}
|
||||
|
||||
/* Filter Bar */
|
||||
.filter-bar {
|
||||
padding: var(--spacing-4);
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
min-height: 44px;
|
||||
font-size: var(--text-base);
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
}
|
||||
|
||||
/* Stats Bar */
|
||||
.board-stats-bar {
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
gap: var(--spacing-4);
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.board-stat {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.board-stat-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.board-stat-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.board-stat-value {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.board-stat-label {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Week Strip */
|
||||
.week-strip {
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
}
|
||||
|
||||
.week-strip-nav {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.week-strip-nav svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.week-strip-day {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
}
|
||||
|
||||
.week-strip-day-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.week-strip-day-number {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.week-strip-today {
|
||||
font-size: var(--text-sm);
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
/* Board Padding */
|
||||
.board {
|
||||
padding: var(--spacing-3);
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* Modal auf Mobile */
|
||||
.modal-body {
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: var(--text-base);
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* Subtasks groesser */
|
||||
.subtask-item {
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.subtask-title {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* Comments groesser */
|
||||
.comment-content {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Attachments */
|
||||
.attachment-name {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.link-item {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.link-title {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -469,4 +760,150 @@
|
||||
.hamburger-btn.active .hamburger-line:nth-child(3) {
|
||||
transform: translateY(-7px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
EXTRA SMALL: NOCH GROESSERE ELEMENTE
|
||||
======================================== */
|
||||
|
||||
/* Task Cards noch groesser */
|
||||
.task-card {
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.task-card-meta {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.task-label {
|
||||
padding: 8px 14px;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* Column */
|
||||
.column-header {
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
}
|
||||
|
||||
.column-title {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.column-body {
|
||||
padding: var(--spacing-4);
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
/* Filter - vertikal auf sehr kleinen Screens */
|
||||
.filter-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
margin-left: 0;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Stats Bar - scrollbar horizontal */
|
||||
.board-stats-bar {
|
||||
justify-content: flex-start;
|
||||
gap: var(--spacing-5);
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.board-stat-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.board-stat-value {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
/* Week Strip kompakter */
|
||||
.week-strip {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
}
|
||||
|
||||
.week-strip-day {
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
|
||||
.week-strip-day-name {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.week-strip-day-number {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* Login Screen */
|
||||
.login-container {
|
||||
padding: var(--spacing-6);
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.login-form .form-group label {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.modal {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
/* Form Groups */
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Add Task Button */
|
||||
.btn-add-task {
|
||||
min-height: 56px;
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
}
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren