feat: eisenhower matrix view

2026-03-01 22:22:19 +00:00
parent d792f89fe6
commit 8499c99721
5 changed files with 358 additions and 0 deletions
--- a/static/style.css
+++ b/static/style.css
@@ -1437,3 +1437,150 @@ a:hover { color: var(--accent-hover); }
    .cal-event-time { display: none; }
    .cal-month-label { font-size: 1rem; min-width: 140px; }
 }
+
+/* ---- Eisenhower Matrix ---- */
+.eisenhower-grid {
+    display: grid;
+    grid-template-columns: 32px 1fr 1fr;
+    grid-template-rows: 1fr 1fr auto;
+    gap: 12px;
+    min-height: 60vh;
+}
+
+.eisenhower-y-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    writing-mode: vertical-lr;
+    transform: rotate(180deg);
+    font-size: 0.78rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+}
+
+.eisenhower-x-spacer {
+    /* empty cell under the y-labels */
+}
+
+.eisenhower-x-label {
+    text-align: center;
+    font-size: 0.78rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    padding: 4px 0;
+}
+
+.eisenhower-quadrant {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.eisenhower-q1 { border-top: 3px solid var(--red); }
+.eisenhower-q2 { border-top: 3px solid var(--accent); }
+.eisenhower-q3 { border-top: 3px solid var(--amber); }
+.eisenhower-q4 { border-top: 3px solid var(--muted); }
+
+.eisenhower-quadrant-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+}
+
+.eisenhower-quadrant-header h3 {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 700;
+}
+
+.eisenhower-quadrant-subtitle {
+    font-size: 0.72rem;
+    color: var(--muted);
+}
+
+.eisenhower-task-list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.eisenhower-task {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    border-radius: var(--radius);
+    text-decoration: none;
+    color: var(--text);
+    font-size: 0.82rem;
+    transition: background var(--transition);
+}
+
+.eisenhower-task:hover {
+    background: var(--surface2);
+    color: var(--text);
+}
+
+.eisenhower-task-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.eisenhower-task-due {
+    font-size: 0.72rem;
+    color: var(--muted);
+    white-space: nowrap;
+}
+
+.eisenhower-task-due.overdue {
+    color: var(--red);
+    font-weight: 600;
+}
+
+.eisenhower-task-project {
+    font-size: 0.68rem;
+    color: var(--muted);
+    background: var(--surface2);
+    padding: 1px 6px;
+    border-radius: var(--radius-sm);
+    white-space: nowrap;
+}
+
+.eisenhower-empty {
+    color: var(--muted);
+    font-size: 0.82rem;
+    padding: 12px;
+    text-align: center;
+}
+
+.badge-red { background: var(--red); color: #fff; }
+.badge-amber { background: var(--amber); color: #fff; }
+.badge-accent { background: var(--accent); color: #fff; }
+.badge-muted { background: var(--muted); color: #fff; }
+
+@media (max-width: 768px) {
+    .eisenhower-grid {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+        min-height: auto;
+    }
+    .eisenhower-y-label,
+    .eisenhower-x-label,
+    .eisenhower-x-spacer { display: none; }
+    .eisenhower-quadrant { min-height: 120px; }
+}