Contribution heatmap improvements

templates/user/dashboard/dashboard.tmpl

@@ -2,7 +2,7 @@
 <div role="main" aria-label="{{.Title}}" class="page-content dashboard feeds">
 	{{template "user/dashboard/navbar" .}}
 	<div class="ui container flex-container">
-		<div class="flex-container-main">
+		<div class="flex-container-main activity-heatmap-container">
 			{{template "base/alert" .}}
 			{{template "user/heatmap" .}}
 			{{if .Page.Paginater.TotalPages}}

templates/user/profile.tmpl

@@ -5,7 +5,7 @@
 			<div class="ui four wide column">
 				{{template "shared/user/profile_big_avatar" .}}
 			</div>
-			<div class="ui twelve wide column tw-mb-4">
+			<div class="ui twelve wide column tw-mb-4 activity-heatmap-container">
 				{{template "user/overview/header" .}}
 				{{if eq .TabName "activity"}}
 					{{if .ContextUser.KeepActivityPrivate}}

web_src/css/features/heatmap.css

@@ -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: activity-heatmap-container / inline-size;
 }
-.user.profile #user-heatmap.is-loading {
-  aspect-ratio: 5.645; /* the size is about 953 x 169 */
+
+@supports (container-type: 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);
+    }
+  }
+}
+
+/* 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;
+  }
+  .user.profile #user-heatmap.is-loading {
+    aspect-ratio: 5.645;
+  }
 }
 
 #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;
-  }
-}

web_src/js/components/ActivityHeatmap.vue

@@ -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>