9bb4101ffe
Phase 2 of task management consolidation: - Added _data/tasks.js - fetches tasks from Gitea API at build time - Added tasks-index.njk - mobile-friendly task list page - Added node-fetch dependency for API calls - Added .gitignore for node_modules and _site Features: - Shows only open/blocked tasks (filters out complete) - Priority filtering (P1/P2/P3/P4) - Color-coded priority badges (Fire/Gold/Frost/Arcane) - Links to Gitea for full task details - Mobile-optimized touch targets Access at: firefrostgaming.com/tasks-index.html Chronicler #69
264 lines
7.6 KiB
Plaintext
264 lines
7.6 KiB
Plaintext
---
|
|
layout: false
|
|
permalink: /tasks-index.html
|
|
---
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tasks - Firefrost Gaming</title>
|
|
<style>
|
|
:root {
|
|
--fire: #FF6B35;
|
|
--frost: #4ECDC4;
|
|
--arcane: #A855F7;
|
|
--gold: #FFD700;
|
|
--dark: #0F0F1E;
|
|
--dark-lighter: #1a1a2e;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--dark);
|
|
color: #fff;
|
|
min-height: 100vh;
|
|
padding: 16px;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
background: linear-gradient(135deg, var(--fire), var(--frost));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
margin-top: 8px;
|
|
font-size: 0.875rem;
|
|
color: #888;
|
|
}
|
|
|
|
.stats span {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
background: var(--dark-lighter);
|
|
}
|
|
|
|
.filters {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: var(--dark-lighter);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.filter-btn:hover {
|
|
background: #2a2a3e;
|
|
}
|
|
|
|
.filter-btn.active {
|
|
background: linear-gradient(135deg, var(--fire), var(--frost));
|
|
}
|
|
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.task-card {
|
|
background: var(--dark-lighter);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
border-left: 4px solid var(--frost);
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.task-card:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.task-card.P1 { border-left-color: var(--fire); }
|
|
.task-card.P2 { border-left-color: var(--gold); }
|
|
.task-card.P3 { border-left-color: var(--frost); }
|
|
.task-card.P4 { border-left-color: var(--arcane); }
|
|
|
|
.task-card.blocked {
|
|
opacity: 0.7;
|
|
border-left-style: dashed;
|
|
}
|
|
|
|
.task-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.task-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
flex: 1;
|
|
}
|
|
|
|
.task-title a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.task-title a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.priority-badge {
|
|
font-size: 0.75rem;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.priority-badge.P1 { background: var(--fire); }
|
|
.priority-badge.P2 { background: var(--gold); color: #000; }
|
|
.priority-badge.P3 { background: var(--frost); color: #000; }
|
|
.priority-badge.P4 { background: var(--arcane); }
|
|
|
|
.task-meta {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 8px;
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
}
|
|
|
|
.owner {
|
|
color: var(--frost);
|
|
}
|
|
|
|
.status-blocked {
|
|
color: var(--fire);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 48px 16px;
|
|
color: #666;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
margin-top: 32px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid #333;
|
|
font-size: 0.75rem;
|
|
color: #666;
|
|
}
|
|
|
|
footer a {
|
|
color: var(--frost);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>🔥 Firefrost Tasks ❄️</h1>
|
|
<div class="stats" id="stats">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</header>
|
|
|
|
<div class="filters">
|
|
<button class="filter-btn active" data-filter="all">All Open</button>
|
|
<button class="filter-btn" data-filter="P1">🔴 P1</button>
|
|
<button class="filter-btn" data-filter="P2">🟡 P2</button>
|
|
<button class="filter-btn" data-filter="P3">🔵 P3</button>
|
|
<button class="filter-btn" data-filter="P4">🟣 P4</button>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
{% for task in tasks %}
|
|
{% if task.status == "open" or task.status == "blocked" %}
|
|
<div class="task-card {{ task.priority }} {{ task.status }}" data-priority="{{ task.priority }}" data-status="{{ task.status }}">
|
|
<div class="task-header">
|
|
<div class="task-title">
|
|
<a href="{{ task.giteaUrl }}" target="_blank" rel="noopener">
|
|
{{ task.title }}
|
|
</a>
|
|
</div>
|
|
<span class="priority-badge {{ task.priority }}">{{ task.priority }}</span>
|
|
</div>
|
|
<div class="task-meta">
|
|
<span class="owner">{{ task.owner }}</span>
|
|
<span>{{ task.created }}</span>
|
|
{% if task.status == "blocked" %}
|
|
<span class="status-blocked">⚠️ BLOCKED</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<footer>
|
|
<p><a href="https://git.firefrostgaming.com/firefrost-gaming/firefrost-operations-manual/src/branch/master/docs/tasks">View in Gitea</a></p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Calculate stats
|
|
const cards = document.querySelectorAll('.task-card');
|
|
let openCount = 0;
|
|
let blockedCount = 0;
|
|
cards.forEach(card => {
|
|
if (card.dataset.status === 'open') openCount++;
|
|
if (card.dataset.status === 'blocked') blockedCount++;
|
|
});
|
|
document.getElementById('stats').innerHTML =
|
|
'<span>' + openCount + ' Open</span><span>' + blockedCount + ' Blocked</span>';
|
|
|
|
// Filtering
|
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
|
|
const filter = btn.dataset.filter;
|
|
|
|
document.querySelectorAll('.task-card').forEach(card => {
|
|
if (filter === 'all') {
|
|
card.style.display = 'block';
|
|
} else {
|
|
card.style.display = card.dataset.priority === filter ? 'block' : 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|