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

6 files changed, 36 insertions, 13 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;
diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
index d340f28553..771c7e088c 100644
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@@ -100,7 +100,7 @@
       margin-right: auto;
     }
 
-    .ui.avatar {
+    .left .ui.avatar {
       margin-top: 13px;
     }
 
diff --git a/web_src/less/_organization.less b/web_src/less/_organization.less
index 089c649f61..7002a158f4 100644
--- a/web_src/less/_organization.less
+++ b/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;
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index a830e14c18..7c0f381953 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -826,8 +826,8 @@
           position: absolute;
           left: -72px;
           img {
-            width: 40px;
-            height: 40px;
+            width: 40px !important;
+            height: 40px !important;
           }
         }
 
diff --git a/web_src/less/_user.less b/web_src/less/_user.less
index c1eb15237e..2b37e8ee94 100644
--- a/web_src/less/_user.less
+++ b/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;
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index eac28df21e..3cf5161651 100644
--- a/web_src/less/helpers.less
+++ b/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;