Remove fetch request from heatmap (#13623)

* Remove fetch request from heatmap

Render heatmap data directly to HTML, eliminating one HTTP request on
frontpage and user profile. Also added min-height to the container so
the page content will no longer move after loading.

* rename and error display

* also log the js error

* add error handler

* remove useless inline style and hide divider on small screens

* Update routers/user/home.go

* Update routers/user/profile.go

1 files changed, 28 insertions, 27 deletions

diff --git a/web_src/less/features/heatmap.less b/web_src/less/features/heatmap.less
index 5383847387..61db5c81b0 100644
--- a/web_src/less/features/heatmap.less
+++ b/web_src/less/features/heatmap.less
@@ -1,49 +1,50 @@
 #user-heatmap {
-  width: 107%; // Fixes newest contributions not showing
+  width: 100%;
   text-align: center;
+  position: relative;
+  min-height: 125px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   svg:not(:root) {
     overflow: inherit;
     padding: 0 !important;
   }
 
+  text {
+    fill: currentColor !important;
+  }
+
   @media @mediaLgAndDown {
-    & {
+    &,
+    & + .divider {
       display: none;
     }
   }
 
   .total-contributions {
-    text-align: left;
-    margin-top: 0;
+    font-size: 11px;
+    position: absolute;
+    bottom: 0;
+    left: 25px;
   }
-}
-
-.heatmap-container {
-  position: relative;
-}
 
-.heatmap-container .total-contributions {
-  font-size: 11px;
-  position: absolute;
-  bottom: 0;
-  left: 25px;
-}
-
-@media @mediaLgAndDown {
-  .heatmap-container .total-contributions {
-    left: 21px;
+  @media @mediaLgAndDown {
+    .total-contributions {
+      left: 21px;
+    }
   }
-}
 
-@media (max-width: 1000px) {
-  .heatmap-container .total-contributions {
-    font-size: 10px;
-    left: 17px;
-    bottom: -2px;
+  @media (max-width: 1000px) {
+    .total-contributions {
+      font-size: 10px;
+      left: 17px;
+      bottom: -2px;
+    }
   }
 }
 
-.heatmap-container text {
-  fill: currentColor !important;
+.user.profile #user-heatmap {
+  min-height: 135px;
 }