From 9b6d064e240183b7a78bdabb1d31ac85dba94918 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 6 Nov 2025 05:15:09 +0100 Subject: [PATCH 01/14] Contribution heatmap improvements --- web_src/css/features/heatmap.css | 43 +++++++---------------- web_src/css/modules/flexcontainer.css | 1 + web_src/css/modules/grid.css | 4 +++ web_src/js/components/ActivityHeatmap.vue | 7 ++-- 4 files changed, 21 insertions(+), 34 deletions(-) diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index c064590c4669b..a6045890ad90c 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -4,23 +4,28 @@ position: relative; } -/* before the Vue component is mounted, show a loading indicator with dummy size */ -/* the ratio is guesswork, see https://github.com/razorness/vue3-calendar-heatmap/issues/26 */ -#user-heatmap.is-loading { - aspect-ratio: 5.415; /* the size is about 790 x 145 */ -} -.user.profile #user-heatmap.is-loading { - aspect-ratio: 5.645; /* the size is about 953 x 169 */ +@container (width > 0) { + #user-heatmap { + /* Set element to fixed size so that it does not resize after load. The calculation is complex + because the element does not scale with a fixed aspect ratio. */ + height: calc((100cqw / 5) - (100cqw / 25) + 20px); + } } #user-heatmap text { fill: currentcolor !important; } +/* root legend */ +#user-heatmap .vch__container > .vch__legend { + display: flex; + font-size: 11px; + justify-content: space-between; +} + /* for the "Less" and "More" legend */ #user-heatmap .vch__legend .vch__legend { display: flex; - font-size: 11px; align-items: center; justify-content: right; } @@ -34,25 +39,3 @@ #user-heatmap .vch__day__square:hover { outline: 1.5px solid var(--color-text); } - -/* move the "? contributions in the last ? months" text from top to bottom */ -#user-heatmap .total-contributions { - font-size: 11px; - position: absolute; - bottom: 0; - left: 25px; -} - -@media (max-width: 1200px) { - #user-heatmap .total-contributions { - left: 21px; - } -} - -@media (max-width: 1000px) { - #user-heatmap .total-contributions { - font-size: 10px; - left: 17px; - bottom: -4px; - } -} diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css index 5d4e12cc129b1..2812031fc8c3e 100644 --- a/web_src/css/modules/flexcontainer.css +++ b/web_src/css/modules/flexcontainer.css @@ -19,6 +19,7 @@ .flex-container-main { flex: 1; min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */ + container: main / inline-size; } @media (max-width: 767.98px) { diff --git a/web_src/css/modules/grid.css b/web_src/css/modules/grid.css index b4f4e16105b4b..10ae282caea85 100644 --- a/web_src/css/modules/grid.css +++ b/web_src/css/modules/grid.css @@ -135,6 +135,10 @@ } } +.ui.grid .column { + container: column / inline-size; +} + .ui.grid > .column:only-child, .ui.grid > .row > .column:only-child { width: 100%; diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue index 296cb61cff516..d805817630ca4 100644 --- a/web_src/js/components/ActivityHeatmap.vue +++ b/web_src/js/components/ActivityHeatmap.vue @@ -53,9 +53,6 @@ function handleDayClick(e: Event & {date: Date}) { } From 4f181b84c64050fed86bc2c271b0b60581edcabd Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 6 Nov 2025 05:23:24 +0100 Subject: [PATCH 02/14] update comment --- web_src/css/features/heatmap.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index a6045890ad90c..ea5d7e3467a12 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -6,7 +6,7 @@ @container (width > 0) { #user-heatmap { - /* Set element to fixed size so that it does not resize after load. The calculation is complex + /* Set element to fixed height so that it does not resize after load. The calculation is complex because the element does not scale with a fixed aspect ratio. */ height: calc((100cqw / 5) - (100cqw / 25) + 20px); } From 1341d5a3028890f79a7f4bd55750a64162b2cb1d Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 6 Nov 2025 06:26:43 +0100 Subject: [PATCH 03/14] use min-height to support unsupporting browsers --- web_src/css/features/heatmap.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index ea5d7e3467a12..9d002c4ee97f7 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -8,7 +8,7 @@ #user-heatmap { /* Set element to fixed height so that it does not resize after load. The calculation is complex because the element does not scale with a fixed aspect ratio. */ - height: calc((100cqw / 5) - (100cqw / 25) + 20px); + min-height: calc((100cqw / 5) - (100cqw / 25) + 20px); } } From b0c0681f8d7adf14b0c6521f6b5c094234ee383c Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 6 Nov 2025 06:29:30 +0100 Subject: [PATCH 04/14] use better names --- web_src/css/modules/flexcontainer.css | 2 +- web_src/css/modules/grid.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css index 2812031fc8c3e..b0b1cd6818573 100644 --- a/web_src/css/modules/flexcontainer.css +++ b/web_src/css/modules/flexcontainer.css @@ -19,7 +19,7 @@ .flex-container-main { flex: 1; min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */ - container: main / inline-size; + container: container-flex-container-main / inline-size; } @media (max-width: 767.98px) { diff --git a/web_src/css/modules/grid.css b/web_src/css/modules/grid.css index 10ae282caea85..85f54675dde32 100644 --- a/web_src/css/modules/grid.css +++ b/web_src/css/modules/grid.css @@ -136,7 +136,7 @@ } .ui.grid .column { - container: column / inline-size; + container: container-grid-column / inline-size; } .ui.grid > .column:only-child, From d77d485097869e147bf541a246e5af82297a6949 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 6 Nov 2025 06:31:16 +0100 Subject: [PATCH 05/14] use unnamed containers --- web_src/css/modules/flexcontainer.css | 2 +- web_src/css/modules/grid.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css index b0b1cd6818573..2b1b2052a81f7 100644 --- a/web_src/css/modules/flexcontainer.css +++ b/web_src/css/modules/flexcontainer.css @@ -19,7 +19,7 @@ .flex-container-main { flex: 1; min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */ - container: container-flex-container-main / inline-size; + container-type: inline-size; } @media (max-width: 767.98px) { diff --git a/web_src/css/modules/grid.css b/web_src/css/modules/grid.css index 85f54675dde32..7ac0dc57d3d9f 100644 --- a/web_src/css/modules/grid.css +++ b/web_src/css/modules/grid.css @@ -136,7 +136,7 @@ } .ui.grid .column { - container: container-grid-column / inline-size; + container-type: inline-size; } .ui.grid > .column:only-child, From c81cda033cb9bac0cb2b1b4c619acb57c81f7cb4 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 6 Nov 2025 06:34:57 +0100 Subject: [PATCH 06/14] Revert "use min-height to support unsupporting browsers" This reverts commit 1341d5a3028890f79a7f4bd55750a64162b2cb1d. --- web_src/css/features/heatmap.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index 9d002c4ee97f7..ea5d7e3467a12 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -8,7 +8,7 @@ #user-heatmap { /* Set element to fixed height so that it does not resize after load. The calculation is complex because the element does not scale with a fixed aspect ratio. */ - min-height: calc((100cqw / 5) - (100cqw / 25) + 20px); + height: calc((100cqw / 5) - (100cqw / 25) + 20px); } } From b54548aee0ea37de6fd38b2e914436113a3181e3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 6 Nov 2025 06:49:21 +0100 Subject: [PATCH 07/14] add fallback for unsupporting browsers --- web_src/css/features/heatmap.css | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index ea5d7e3467a12..14b90c649d65f 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -4,11 +4,23 @@ position: relative; } -@container (width > 0) { - #user-heatmap { - /* Set element to fixed height so that it does not resize after load. The calculation is complex - because the element does not scale with a fixed aspect ratio. */ - height: calc((100cqw / 5) - (100cqw / 25) + 20px); +@supports (container-type: inline-size) { + @container (width > 0) { + #user-heatmap { + /* Set element to fixed height so that it does not resize after load. The calculation is complex + because the element does not scale with a fixed aspect ratio. */ + height: calc((100cqw / 5) - (100cqw / 25) + 20px); + } + } +} + +/* Fallback for browsers that don't support container queries */ +@supports not (container-type: inline-size) { + #user-heatmap.is-loading { + aspect-ratio: 5.415; + } + .user.profile #user-heatmap.is-loading { + aspect-ratio: 5.645; } } From aa83a3fb742d9fb79a98fc9ae094bf07df654dbb Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 6 Nov 2025 06:54:46 +0100 Subject: [PATCH 08/14] update comment --- web_src/css/features/heatmap.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index 14b90c649d65f..6f1a015912c69 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -14,7 +14,7 @@ } } -/* Fallback for browsers that don't support container queries */ +/* Fallback height adjustment above for browsers that don't support container queries */ @supports not (container-type: inline-size) { #user-heatmap.is-loading { aspect-ratio: 5.415; From 0c9d46b28af105918f5d7134a7cd01dadd40630e Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 6 Nov 2025 07:24:38 +0100 Subject: [PATCH 09/14] use special class --- templates/user/dashboard/dashboard.tmpl | 2 +- templates/user/profile.tmpl | 2 +- web_src/css/features/heatmap.css | 6 +++++- web_src/css/modules/flexcontainer.css | 1 - web_src/css/modules/grid.css | 4 ---- 5 files changed, 7 insertions(+), 8 deletions(-) diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl index 666dd78073b03..107300450d9e5 100644 --- a/templates/user/dashboard/dashboard.tmpl +++ b/templates/user/dashboard/dashboard.tmpl @@ -2,7 +2,7 @@
{{template "user/dashboard/navbar" .}}
-
+
{{template "base/alert" .}} {{template "user/heatmap" .}} {{if .Page.Paginater.TotalPages}} diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl index 74a53b937d1de..2c118b30ed7dc 100644 --- a/templates/user/profile.tmpl +++ b/templates/user/profile.tmpl @@ -5,7 +5,7 @@
{{template "shared/user/profile_big_avatar" .}}
-
+
{{template "user/overview/header" .}} {{if eq .TabName "activity"}} {{if .ContextUser.KeepActivityPrivate}} diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index 6f1a015912c69..e3a66421e3f36 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -4,8 +4,12 @@ position: relative; } +.activity-heatmap-container { + container: activity-heatmap-container / inline-size; +} + @supports (container-type: inline-size) { - @container (width > 0) { + @container activity-heatmap-container (width > 0) { #user-heatmap { /* Set element to fixed height so that it does not resize after load. The calculation is complex because the element does not scale with a fixed aspect ratio. */ diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css index 2b1b2052a81f7..5d4e12cc129b1 100644 --- a/web_src/css/modules/flexcontainer.css +++ b/web_src/css/modules/flexcontainer.css @@ -19,7 +19,6 @@ .flex-container-main { flex: 1; min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */ - container-type: inline-size; } @media (max-width: 767.98px) { diff --git a/web_src/css/modules/grid.css b/web_src/css/modules/grid.css index 7ac0dc57d3d9f..b4f4e16105b4b 100644 --- a/web_src/css/modules/grid.css +++ b/web_src/css/modules/grid.css @@ -135,10 +135,6 @@ } } -.ui.grid .column { - container-type: inline-size; -} - .ui.grid > .column:only-child, .ui.grid > .row > .column:only-child { width: 100%; From 417c2ba59919358efaf7c57319b756162554c70e Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 6 Nov 2025 07:25:18 +0100 Subject: [PATCH 10/14] move class into supports --- web_src/css/features/heatmap.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index e3a66421e3f36..5351d874eb917 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -4,11 +4,10 @@ position: relative; } -.activity-heatmap-container { - container: activity-heatmap-container / inline-size; -} - @supports (container-type: inline-size) { + .activity-heatmap-container { + container: activity-heatmap-container / inline-size; + } @container activity-heatmap-container (width > 0) { #user-heatmap { /* Set element to fixed height so that it does not resize after load. The calculation is complex From 2c13c8c2df9560b78c2d0e8b8fef8cc9d8bc88db Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 6 Nov 2025 07:33:22 +0100 Subject: [PATCH 11/14] use dedicated container --- templates/user/dashboard/dashboard.tmpl | 2 +- templates/user/heatmap.tmpl | 18 ++++++++++-------- templates/user/profile.tmpl | 2 +- web_src/css/features/heatmap.css | 19 +++++++++---------- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl index 107300450d9e5..666dd78073b03 100644 --- a/templates/user/dashboard/dashboard.tmpl +++ b/templates/user/dashboard/dashboard.tmpl @@ -2,7 +2,7 @@
{{template "user/dashboard/navbar" .}}
-
+
{{template "base/alert" .}} {{template "user/heatmap" .}} {{if .Page.Paginater.TotalPages}} diff --git a/templates/user/heatmap.tmpl b/templates/user/heatmap.tmpl index b604b929a3bd2..25fc217e18994 100644 --- a/templates/user/heatmap.tmpl +++ b/templates/user/heatmap.tmpl @@ -1,10 +1,12 @@ {{if .HeatmapData}} -
-
+
+
+
+
{{end}} diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl index 2c118b30ed7dc..74a53b937d1de 100644 --- a/templates/user/profile.tmpl +++ b/templates/user/profile.tmpl @@ -5,7 +5,7 @@
{{template "shared/user/profile_big_avatar" .}}
-
+
{{template "user/overview/header" .}} {{if eq .TabName "activity"}} {{if .ContextUser.KeepActivityPrivate}} diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index 5351d874eb917..bae4246b6f2cb 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -4,16 +4,15 @@ position: relative; } -@supports (container-type: inline-size) { - .activity-heatmap-container { - container: activity-heatmap-container / inline-size; - } - @container activity-heatmap-container (width > 0) { - #user-heatmap { - /* Set element to fixed height so that it does not resize after load. The calculation is complex - because the element does not scale with a fixed aspect ratio. */ - height: calc((100cqw / 5) - (100cqw / 25) + 20px); - } +.activity-heatmap-container { + container-type: inline-size; +} + +@container (width > 0) { + #user-heatmap { + /* Set element to fixed height so that it does not resize after load. The calculation is complex + because the element does not scale with a fixed aspect ratio. */ + height: calc((100cqw / 5) - (100cqw / 25) + 20px); } } From 65e25ac527f47ad0e3271dbb92651f648876469e Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 6 Nov 2025 14:43:58 +0800 Subject: [PATCH 12/14] divider doesn't belong to heatmap --- templates/user/heatmap.tmpl | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/templates/user/heatmap.tmpl b/templates/user/heatmap.tmpl index 25fc217e18994..6186edd4dd519 100644 --- a/templates/user/heatmap.tmpl +++ b/templates/user/heatmap.tmpl @@ -1,12 +1,12 @@ {{if .HeatmapData}} -
-
-
-
+
+
+
+
{{end}} From 566e13e1cd366f416a8e358b9709bd3fb3f45cff Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 6 Nov 2025 14:47:02 +0800 Subject: [PATCH 13/14] revert legacy comment and fine tune legacy aspect ratio --- web_src/css/features/heatmap.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index bae4246b6f2cb..749ad6173294e 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -18,11 +18,14 @@ /* Fallback height adjustment above for browsers that don't support container queries */ @supports not (container-type: inline-size) { + /* before the Vue component is mounted, show a loading indicator with dummy size */ + /* the ratio is guesswork, see https://github.com/razorness/vue3-calendar-heatmap/issues/26 */ + #user-heatmap.is-loading { - aspect-ratio: 5.415; + aspect-ratio: 5.4823972051; /* the size is about 816 x 148.84 */ } .user.profile #user-heatmap.is-loading { - aspect-ratio: 5.645; + aspect-ratio: 5.6290608387; /* the size is about 953 x 169.3 */ } } From cc1ba8f2c714dc9f8e900963f71b7653bfae762a Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 6 Nov 2025 14:53:33 +0800 Subject: [PATCH 14/14] update comment --- web_src/css/features/heatmap.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index 749ad6173294e..e40adf1fe48fc 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -18,9 +18,8 @@ /* Fallback height adjustment above for browsers that don't support container queries */ @supports not (container-type: inline-size) { - /* before the Vue component is mounted, show a loading indicator with dummy size */ - /* the ratio is guesswork, see https://github.com/razorness/vue3-calendar-heatmap/issues/26 */ - + /* Before the Vue component is mounted, show a loading indicator with dummy size */ + /* The ratio is guesswork for legacy browsers, new browsers use the "@container" approach above */ #user-heatmap.is-loading { aspect-ratio: 5.4823972051; /* the size is about 816 x 148.84 */ }