Initial commit
Dieser Commit ist enthalten in:
Claude Project Manager
353
frontend/css/responsive.css
Normale Datei
353
frontend/css/responsive.css
Normale Datei
@ -0,0 +1,353 @@
|
||||
/**
|
||||
* TASKMATE - Responsive Styles
|
||||
* ============================
|
||||
* Mobile und Tablet Anpassungen
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
TABLET (max 1024px)
|
||||
======================================== */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
:root {
|
||||
--column-width: 280px;
|
||||
--column-min-width: 260px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.dashboard-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.shortcuts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
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);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.header-center {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding-top: var(--spacing-sm);
|
||||
border-top: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.project-selector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view-tabs {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.view-board {
|
||||
padding: var(--spacing-md);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.column {
|
||||
width: calc(100vw - 32px);
|
||||
min-width: calc(100vw - 32px);
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.btn-add-column {
|
||||
width: calc(100vw - 32px);
|
||||
min-width: calc(100vw - 32px);
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: calc(100% - 16px);
|
||||
max-height: calc(100vh - 32px);
|
||||
}
|
||||
|
||||
.modal-large {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.add-link-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.attachments-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.task-table th,
|
||||
.task-table td {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.col-labels {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bulk-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.calendar-task {
|
||||
font-size: 10px;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE (max 480px)
|
||||
======================================== */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header-right {
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.connection-status .status-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
right: -50px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.stat-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.view-calendar {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.calendar-header h2 {
|
||||
flex: 1;
|
||||
min-width: auto;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.calendar-weekday {
|
||||
padding: var(--spacing-xs);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
padding: var(--spacing-xs);
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.calendar-day-number {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.calendar-day-tasks {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.calendar-day.has-tasks::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
margin: var(--spacing-xs) auto 0;
|
||||
}
|
||||
|
||||
.calendar-day.has-overdue::after {
|
||||
background: var(--error);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.modal-footer-left,
|
||||
.modal-footer-right {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.time-estimate-inputs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.attachments-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.toast-container {
|
||||
left: var(--spacing-md);
|
||||
right: var(--spacing-md);
|
||||
bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.toast {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
REDUCED MOTION
|
||||
======================================== */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
PRINT STYLES
|
||||
======================================== */
|
||||
|
||||
@media print {
|
||||
.header,
|
||||
.filter-bar,
|
||||
.btn-add-column,
|
||||
.column-actions,
|
||||
.btn-add-task,
|
||||
.modal,
|
||||
.modal-overlay,
|
||||
.toast-container,
|
||||
.onboarding-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.board {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: none;
|
||||
page-break-inside: avoid;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
page-break-inside: avoid;
|
||||
border: 1px solid #ddd;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
HIGH CONTRAST
|
||||
======================================== */
|
||||
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--border-default: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
--border-default: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.task-card,
|
||||
.column,
|
||||
.modal,
|
||||
.dropdown-menu {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren