Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-11-07 10:01:08 +01:00
Code Issues Activity

Contribution heatmap improvements (#35876) (#35880)

Browse Source 
Backport #35876 by @silverwind

1. Set a fixed height on the element, preventing the content after the
element from shifting on page load. This uses CSS [container query
length
units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries#container_query_length_units)
as I saw no other way because of the non-linear scaling of the element.
2. Move the "total-contributions" text into the existing vue slot,
eliminating the need for absolute positioning.

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Giteabot 2025-11-06 16:51:49 +08:00 committed by GitHub
parent 289bd9694b
commit 5842cd23a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/user/heatmap.tmpl
View File

@ -1,4 +1,5 @@
{{if .HeatmapData}}
<div class="activity-heatmap-container">
<div id="user-heatmap" class="is-loading"
data-heatmap-data="{{JsonUtils.EncodeToString .HeatmapData}}"
data-locale-total-contributions="{{ctx.Locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" (ctx.Locale.PrettyNumber .HeatmapTotalContributions)}}"
@ -6,5 +7,6 @@
data-locale-more="{{ctx.Locale.Tr "heatmap.more"}}"
data-locale-less="{{ctx.Locale.Tr "heatmap.less"}}"
></div>
<div class="divider"></div>
</div>
<div class="divider"></div>
{{end}}

57
web_src/css/features/heatmap.css
View File

@ -4,23 +4,44 @@
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 */
.activity-heatmap-container {
container-type: inline-size;
}
.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 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 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 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 */
}
.user.profile #user-heatmap.is-loading {
aspect-ratio: 5.6290608387; /* the size is about 953 x 169.3 */
}
}
#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 +55,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;
}
}

7
web_src/js/components/ActivityHeatmap.vue
View File

@ -53,9 +53,6 @@ function handleDayClick(e: Event & {date: Date}) {
}
</script>
<template>
<div class="total-contributions">
{{ locale.textTotalContributions }}
</div>
<calendar-heatmap
:locale="locale.heatMapLocale"
:no-data-text="locale.noDataText"
@ -65,5 +62,7 @@ function handleDayClick(e: Event & {date: Date}) {
:range-color="colorRange"
@day-click="handleDayClick($event)"
:tippy-props="{theme: 'tooltip'}"
/>
>
<template #vch__legend-left>{{ locale.textTotalContributions }}</template>
</calendar-heatmap>
</template>