julien/andon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(dashboard): tighten dot spacing and align date labels

Browse Source 
Cluster each section's dots closer (narrower horizontal step) and shift
the date label right so it starts under the dot rather than off to its
left.
This commit is contained in:
Julien Calixte
2026-05-28 00:45:04 +02:00
parent 743ddfa899
commit 268769c26e
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/DotMap.vue
View File

@@ -47,8 +47,8 @@ function formatDate(value: string | Date): string {
// Cosmetic scatter: a stable 5-wide grid inside the box (ADR T7). // Cosmetic scatter: a stable 5-wide grid inside the box (ADR T7).
function dotStyle(index: number) { function dotStyle(index: number) {
return { return {
left: `${12 + (index % 5) * 17}%`, left: `${12 + (index % 5) * 11}%`,
top: `${20 + Math.floor(index / 5) * 22}%`, top: `${24 + Math.floor(index / 5) * 20}%`,
} }
} }
</script> </script>
@@ -86,9 +86,9 @@ function dotStyle(index: number) {
.dot__date { .dot__date {
position: absolute; position: absolute;
/* Anchored at the dot's bottom-right corner, splaying diagonally down-right. */ /* Anchored just under the dot, splaying diagonally down-right. */
top: 0.5rem; top: 0.5rem;
left: 0.5rem; left: 0.85rem;
font-size: 0.6rem; font-size: 0.6rem;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;