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

1 files changed, 18 insertions, 9 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index e8ed3748b3..20978bc605 100644
--- a/web_src/less/_base.less
+++ b/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;