Direct avatar rendering (#13649)

* Direct avatar rendering

This adds new template helpers for avatar rendering which output image
elements with direct links to avatars which makes them cacheable by the
browsers.

This should be a major performance improvment for pages with many avatars.

* fix avatars of other user's profile pages

* fix top border on user avatar name

* uncircle avatars

* remove old incomplete avatar selector

* use title attribute for name and add it back on blame

* minor refactor

* tweak comments

* fix url path join and adjust test to new result

* dedupe functions

web_src/less/_base.less

@@ -410,6 +410,19 @@ a.muted:hover,
   border-color: var(--color-secondary);
 }
 
+.ui.avatar.images .image,
+.ui.avatar.images img,
+.ui.avatar.images svg,
+.ui.avatar.image img,
+.ui.avatar.image svg,
+.ui.avatar.image,
+.ui.cards > .card img.avatar,
+.ui.cards > .card .avatar img,
+.ui.card img.avatar,
+.ui.card .avatar img {
+  border-radius: var(--border-radius);
+}
+
 .dont-break-out {
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -791,15 +804,6 @@ a.muted:hover,
     font-weight: normal;
   }
 
-  .avatar.image,
-  .avatar.image img,
-  .avatar.image svg,
-  .avatar.images .image,
-  .avatar.images img,
-  .avatar.images svg {
-    border-radius: 3px;
-  }
-
   .form {
     .fake {
       display: none !important;
@@ -1559,6 +1563,11 @@ a.ui.label:hover {
   margin-bottom: .4em;
 }
 
+.ui.cards > .card > .extra,
+.ui.card > .extra {
+  color: var(--color-text);
+}
+
 .color-icon {
   margin-right: .5em;
   margin-left: .5em;

web_src/less/_dashboard.less

@@ -100,7 +100,7 @@
       margin-right: auto;
     }
 
-    .ui.avatar {
+    .left .ui.avatar {
       margin-top: 13px;
     }
 

web_src/less/_organization.less

@@ -34,13 +34,15 @@
   }
 
   &.profile {
-    #org-avatar {
+    .org-avatar {
       width: 100px;
       height: 100px;
       margin-right: 15px;
     }
 
     #org-info {
+      overflow-wrap: anywhere;
+
       .ui.header {
         font-size: 36px;
         margin-bottom: 0;

web_src/less/_repository.less

@@ -826,8 +826,8 @@
           position: absolute;
           left: -72px;
           img {
-            width: 40px;
-            height: 40px;
+            width: 40px !important;
+            height: 40px !important;
           }
         }
 

web_src/less/_user.less

@@ -15,6 +15,10 @@
         line-height: 1.3rem;
       }
 
+      .profile-avatar-name {
+        border-top: none;
+      }
+
       .extra.content {
         padding: 0;
 
@@ -46,9 +50,16 @@
       }
 
       #profile-avatar {
+        background: none;
+        padding: 1rem 1rem .25rem;
+
         img {
           width: 100%;
+          height: auto;
+          object-fit: contain;
+          margin: 0;
         }
+
         @media @mediaSm {
           height: 250px;
           overflow: hidden;

web_src/less/helpers.less

@@ -8,6 +8,7 @@
 .fc { flex-direction: column !important; }
 .f1 { flex: 1 !important; }
 .fw { flex-wrap: wrap !important; }
+.vm { vertical-align: middle !important; }
 
 .mono {
   font-family: var(--fonts-monospace) !important;