romfast/clawd
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: Stats section collapse header + content (manual fix)

Browse Source
This commit is contained in:
Echo
2026-02-10 21:11:37 +00:00
parent 1829397195
commit b1afd6f72a
1 changed files with 110 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
dashboard/habits.html
View File

@@ -901,6 +901,52 @@
margin-bottom: var(--space-4);
}
.stats-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3);
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
margin-bottom: var(--space-3);
transition: background var(--transition-base);
}
.stats-header:hover {
background: var(--bg-elevated);
}
.stats-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.stats-chevron {
width: 20px;
height: 20px;
color: var(--text-muted);
transition: transform var(--transition-base);
}
.stats-chevron.expanded {
transform: rotate(180deg);
}
.stats-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.stats-content.visible {
max-height: 2000px;
transition: max-height 0.3s ease-in;
}
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -1124,35 +1170,41 @@
<!-- Stats Section -->
<div id="statsSection" class="stats-section" style="display: none;">
<div class="stats-row">
<div class="stat-card">
<div class="stat-label">Total Habits</div>
<div class="stat-value" id="statTotalHabits">0</div>
</div>
<div class="stat-card">
<div class="stat-label">Avg Completion (30d)</div>
<div class="stat-value" id="statAvgCompletion">0%</div>
</div>
<div class="stat-card">
<div class="stat-label">Best Streak 🏆</div>
<div class="stat-value" id="statBestStreak">0</div>
</div>
<div class="stat-card">
<div class="stat-label">Total Lives</div>
<div class="stat-value" id="statTotalLives">0</div>
</div>
<div class="stats-header" onclick="toggleStats()">
<h3 class="stats-title">Stats</h3>
<i data-lucide="chevron-down" class="stats-chevron" id="statsChevron"></i>
</div>
<div class="weekly-summary">
<div class="weekly-summary-header" onclick="toggleWeeklySummary()">
<div class="weekly-summary-title">Weekly Summary</div>
<i data-lucide="chevron-down" class="weekly-summary-chevron" id="weeklySummaryChevron"></i>
<div class="stats-content" id="statsContent">
<div class="stats-row">
<div class="stat-card">
<div class="stat-label">Total Habits</div>
<div class="stat-value" id="statTotalHabits">0</div>
</div>
<div class="stat-card">
<div class="stat-label">Avg Completion (30d)</div>
<div class="stat-value" id="statAvgCompletion">0%</div>
</div>
<div class="stat-card">
<div class="stat-label">Best Streak 🏆</div>
<div class="stat-value" id="statBestStreak">0</div>
</div>
<div class="stat-card">
<div class="stat-label">Total Lives</div>
<div class="stat-value" id="statTotalLives">0</div>
</div>
</div>
<div class="weekly-summary-content" id="weeklySummaryContent">
<div class="weekly-chart" id="weeklyChart"></div>
<div class="weekly-stats" id="weeklyStats">
<span id="weeklyCompletedText">0 completed this week</span>
<span id="weeklySkippedText">0 skipped this week</span>
<div class="weekly-summary">
<div class="weekly-summary-header" onclick="toggleWeeklySummary()">
<div class="weekly-summary-title">Weekly Summary</div>
<i data-lucide="chevron-down" class="weekly-summary-chevron" id="weeklySummaryChevron"></i>
</div>
<div class="weekly-summary-content" id="weeklySummaryContent">
<div class="weekly-chart" id="weeklyChart"></div>
<div class="weekly-stats" id="weeklyStats">
<span id="weeklyCompletedText">0 completed this week</span>
<span id="weeklySkippedText">0 skipped this week</span>
</div>
</div>
</div>
</div>
@@ -1778,6 +1830,36 @@
lucide.createIcons();
}
function toggleStats() {
const content = document.getElementById('statsContent');
const chevron = document.getElementById('statsChevron');
if (content.classList.contains('visible')) {
content.classList.remove('visible');
chevron.classList.remove('expanded');
localStorage.setItem('habits-stats-main-collapsed', 'true');
} else {
content.classList.add('visible');
chevron.classList.add('expanded');
localStorage.setItem('habits-stats-main-collapsed', 'false');
}
}
function restoreStatsState() {
const content = document.getElementById('statsContent');
const chevron = document.getElementById('statsChevron');
const isCollapsed = localStorage.getItem('habits-stats-main-collapsed');
// Default is collapsed
if (isCollapsed === 'false') {
content.classList.add('visible');
chevron.classList.add('expanded');
} else {
content.classList.remove('visible');
chevron.classList.remove('expanded');
}
}
function toggleWeeklySummary() {
const content = document.getElementById('weeklySummaryContent');
const chevron = document.getElementById('weeklySummaryChevron');
@@ -2644,6 +2726,7 @@
});
// Restore collapsed/expanded state from localStorage
restoreStatsState();
restoreWeeklySummaryState();
loadHabits();