Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-08-03 13:02:26 +00:00
Code Issues Projects Releases Wiki Activity

feat(metric): improve responsiveness

Browse source
This commit is contained in:
Johannes Millan 2025-10-21 13:52:47 +02:00
parent d9b4ba5cbf
commit ebb628fc58
2 changed files with 72 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/app/features/metric/activity-heatmap/activity-heatmap.component.html
View file

@ -3,14 +3,9 @@
@if (heatmapData(); as data) {
<div class="heatmap-container">
<div class="heatmap-months">
@for (month of data.monthLabels; track $index) {
<div class="month-label">{{ month }}</div>
}
</div>
<div class="heatmap-grid">
<div class="day-labels">
<div class="month-spacer"></div>
<div class="day-label">Sun</div>
<div class="day-label">Mon</div>
<div class="day-label">Tue</div>
@ -20,17 +15,25 @@
<div class="day-label">Sat</div>
</div>
<div class="weeks">
@for (week of data.weeks; track $index) {
<div class="week">
@for (day of week.days; track $index) {
<div
[class]="getDayClass(day)"
[title]="getDayTitle(day)"
></div>
}
</div>
}
<div class="scrollable-content">
<div class="heatmap-months">
@for (month of data.monthLabels; track $index) {
<div class="month-label">{{ month }}</div>
}
</div>
<div class="weeks">
@for (week of data.weeks; track $index) {
<div class="week">
@for (day of week.days; track $index) {
<div
[class]="getDayClass(day)"
[title]="getDayTitle(day)"
></div>
}
</div>
}
</div>
</div>
</div>

85
src/app/features/metric/activity-heatmap/activity-heatmap.component.scss
View file

@ -15,46 +15,18 @@
border-radius: 4px;
}
.heatmap-months {
display: flex;
gap: 2px;
padding-left: 48px;
font-size: 12px;
color: rgba(0, 0, 0, 0.6);
.month-label {
flex: 0 0 auto;
width: calc(4 * 12px + 4 * 2px); // 4 weeks * (cell width + gap)
}
}
.heatmap-grid {
display: flex;
gap: 8px;
align-items: flex-start;
}
.day-labels {
.scrollable-content {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 10px;
color: rgba(0, 0, 0, 0.6);
padding-right: 4px;
width: 40px;
text-align: right;
.day-label {
height: 12px;
line-height: 12px;
}
}
.weeks {
display: flex;
gap: 2px;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
padding-bottom: 8px;
overflow-y: hidden;
// Smooth scrolling
scroll-behavior: smooth;
@ -79,10 +51,56 @@
}
}
.heatmap-months {
display: flex;
gap: 2px;
font-size: 12px;
line-height: 12px;
height: 12px;
color: rgba(0, 0, 0, 0.6);
flex-shrink: 0;
.month-label {
flex: 0 0 auto;
width: calc(4 * 12px + 4 * 2px); // 4 weeks * (cell width + gap)
}
}
.day-labels {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 10px;
color: rgba(0, 0, 0, 0.6);
padding-right: 4px;
width: 40px;
text-align: right;
flex-shrink: 0;
.month-spacer {
height: 17px; // 12px (heatmap-months height) + 8px (gap in scrollable-content)
flex-shrink: 0;
}
.day-label {
height: 12px;
line-height: 12px;
flex-shrink: 0;
}
}
.weeks {
display: flex;
gap: 2px;
flex-wrap: nowrap;
flex-shrink: 0;
}
.week {
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
}
.day {
@ -91,6 +109,7 @@
border-radius: 2px;
cursor: pointer;
transition: all 0.1s ease;
flex-shrink: 0;
&.empty {
background: transparent;
@ -176,7 +195,7 @@
color: rgba(255, 255, 255, 0.6);
}
.weeks {
.scrollable-content {
&::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}