Contribution heatmap improvements

web_src/css/features/heatmap.css

@@ -4,23 +4,40 @@
   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 */
+@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);
+    }
+  }
 }
-.user.profile #user-heatmap.is-loading {
-  aspect-ratio: 5.645; /* the size is about 953 x 169 */
+
+/* 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 +51,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/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-type: inline-size;
 }
 
 @media (max-width: 767.98px) {

web_src/css/modules/grid.css

@@ -135,6 +135,10 @@
   }
 }
 
+.ui.grid .column {
+  container-type: inline-size;
+}
+
 .ui.grid > .column:only-child,
 .ui.grid > .row > .column:only-child {
   width: 100%;

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>