Update avatars. (#1317)

- fixes #1309

templates/libraries/detail.html

@@ -111,40 +111,25 @@
 
     </section>
 
-    {% if maintainers or top_contributors_release or top_contributors_overall %}
+    {% if maintainers or top_contributors_release_new or top_contributors_release_old %}
     <section class="p-6 pt-1 my-4 bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
       <!-- Avatars -->
-      <h2 class="text-2xl">Maintainers &amp; Contributors</h2>
+      <h2 class="text-2xl">Release Maintainers &amp; Contributors</h2>
       <div class="flex flex-col gap-y-4">
-        <div class="flex flex-wrap justify-center gap-2">
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-3 gap-x-2">
         {% for user in maintainers %}
-          {% avatar user=user commitauthor=user.commitauthor image_size="h-12 w-12" is_show_name=True %}
+          {% avatar user=user commitauthor=user.commitauthor avatar_type="wide" contributor_label="Maintainer" %}
         {% endfor %}
         </div>
 
-        <div class="flex flex-wrap justify-center gap-2">
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-3 gap-x-2">
         {% for author in top_contributors_release_new %}
-          {% avatar commitauthor=author is_new=author.is_new %}
+          {% avatar commitauthor=author avatar_type="wide" contributor_label="New Contributor" %}
         {% endfor %}
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-2">
         {% for author in top_contributors_release_old %}
-          {% avatar commitauthor=author %}
+          {% avatar commitauthor=author avatar_type="wide" contributor_label="Contributor" %}
         {% endfor %}
         </div>
-
-        <div class="flex flex-wrap justify-center gap-2">
-        {% for author in top_contributors_overall %}
-          {% avatar commitauthor=author %}
-        {% endfor %}
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-x-4 gap-y-2">
-          {% for author in all_contributors %}
-            <div>{{ author.name }}</div>
-          {% endfor %}
-        </div>
       </div>
     </section>
     {% endif %}
@@ -155,6 +140,20 @@
         {{ description|safe }}
       </section>
     {% endif %}
+
+    {% if top_contributors_overall %}
+    <section class="p-6 pt-1 my-4 bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
+      <h2 class="text-2xl">Previous Contributors</h2>
+      <div class="flex flex-col gap-y-4">
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-3 gap-x-2">
+        {% for author in top_contributors_overall %}
+          {% avatar commitauthor=author avatar_type="wide" contributor_label="Contributor" %}
+        {% endfor %}
+        </div>
+      </div>
+    </section>
+    {% endif %}
+
   </main>
 {% endblock %}
 {% block footer_js %}

templates/partials/avatar.html

@@ -1,31 +1,51 @@
 {# Intended to be used with a django tag: avatar_tags.avatar #}
-{% with av_size=av_size|default:"w-9 h-9" av_show_name=av_show_name|default:False av_title=av_title|default:av_name %}
+{% with av_size=av_size|default:"w-9 h-9" av_title=av_title|default:av_name %}
 {% with av_alt=av_alt|default:av_name av_icon_size=av_icon_size|default:"text-3xl" %}
-  <a {% if av_href and av_is_link %}href="{{ av_href }}"{% endif %}>
-    <div class="w-min text-center flex flex-col justify-center items-center">
-      <div
-        class="{{ av_size }} bg-gray-300 dark:bg-slate flex items-center justify-center relative rounded-lg"
-        title="{{ av_title }}{% if av_is_new %} - NEW!{% endif %}">
-      {% if av_image_url %}
-        <img src="{{ av_image_url }}"
-          alt="{{ av_alt }}"
-          class="
-            rounded-lg h-full w-full object-cover mx-auto
+  <div class="flex gap-x-2 items-center hover:bg-gray-100 dark:hover:bg-black rounded-lg">
+    <a {% if av_href and av_is_link %}href="{{ av_href }}"{% endif %}>
+      <div class="w-min text-center flex flex-col justify-center items-center">
+        <div
+          class="{{ av_size }} bg-gray-300 dark:bg-slate flex items-center justify-center relative rounded-lg"
+          title="{{ av_title }}">
+        {% if av_image_url %}
+          <img src="{{ av_image_url }}"
+            alt="{{ av_alt }}"
+            class="
+              rounded-lg h-full w-full object-cover mx-auto
+              "
+            />
+        {% else %}
+          <i
+            class="
+              {{ av_icon_size }}
+              align-middle fas fa-user text-white dark:text-white/60
             "
-          />
-      {% else %}
-        <i
-          class="
-            {{ av_icon_size }}
-            align-middle fas fa-user text-white dark:text-white/60
-          "
-        ></i>
-      {% endif %}
+          ></i>
+        {% endif %}
+        </div>
       </div>
-      {% if av_show_name %}
-        <span class="text-xs">{{ av_name }}</span>
-      {% endif %}
-    </div>
-  </a>
+    </a>
+    {% if av_avatar_type == "wide" %}
+      <div class="flex flex-col leading-tight min-w-[15rem]">
+        <div class="text-black dark:text-white">
+          {{ av_name }}
+        </div>
+        <div
+          class="
+            {% if av_contributor_label|lower == 'maintainer' %}
+              text-orange
+            {% elif av_contributor_label|lower == 'new contributor' %}
+              text-green
+            {% elif av_contributor_label|lower == 'contributor' %}
+              text-gray-400
+            {% endif %}
+            font-bold text-sm
+          "
+        >
+          {{ av_contributor_label }}
+        </div>
+      </div>
+    {% endif %}
+  </div>
 {% endwith %}
 {% endwith %}

users/templatetags/avatar_tags.py

@@ -1,3 +1,4 @@
+from typing import Literal
 from django import template
 from django.template.loader import render_to_string
 
@@ -10,24 +11,24 @@ def base_avatar(
     image_url,
     href,
     is_link=True,
-    is_show_name=False,
     alt=None,
     title=None,
     image_size=None,
     icon_size=None,
-    is_new=False,
+    contributor_label=None,
+    avatar_type: None | Literal["wide"] = None,
 ):
     context = {
         "av_name": name,
         "av_href": href,
         "av_is_link": is_link,
         "av_image_url": image_url,
-        "av_show_name": is_show_name,
         "av_size": image_size,
         "av_icon_size": icon_size,
         "av_title": title,
         "av_alt": alt,
-        "av_is_new": is_new,
+        "av_contributor_label": contributor_label,
+        "av_avatar_type": avatar_type,
     }
     return render_to_string("partials/avatar.html", context)
 
@@ -37,21 +38,21 @@ def avatar(
     user=None,
     commitauthor=None,
     is_link=True,
-    is_show_name=False,
     alt=None,
     title=None,
     image_size=None,
     icon_size=None,
-    is_new=False,
+    contributor_label=None,
+    avatar_type=None,
 ):
     kwargs = {
         "is_link": is_link,
-        "is_show_name": is_show_name,
         "alt": alt,
         "title": title,
         "image_size": image_size,
         "icon_size": icon_size,
-        "is_new": is_new,
+        "contributor_label": contributor_label,
+        "avatar_type": avatar_type,
     }
     if user and commitauthor:
         image_url = user.get_thumbnail_url() or commitauthor.avatar_url
@@ -70,10 +71,18 @@ def avatar(
             **kwargs,
         )
     elif commitauthor:
+        if isinstance(commitauthor, dict):
+            name = commitauthor["name"]
+            avatar_url = commitauthor["avatar_url"]
+            github_profile_url = commitauthor["github_profile_url"]
+        else:
+            name = commitauthor.name
+            avatar_url = commitauthor.avatar_url
+            github_profile_url = commitauthor.github_profile_url
         return base_avatar(
-            commitauthor.name,
-            commitauthor.avatar_url,
-            commitauthor.github_profile_url,
+            name,
+            avatar_url,
+            github_profile_url,
             **kwargs,
         )
     raise ValueError("Must provide user or commitauthor.")