common/static/common/styles/_badge.sass

@@ -7,15 +7,17 @@
 
 .badge-notifications-count
   background-color: var(--color-accent)
-  border-radius: 50%
+  border-color: var(--nav-global-color-bg)
+  border-radius: var(--spacer-2)
+  color: var(--nav-global-color-text-active)
   display: flex
   font-size: .8rem
   +fw-bold
   height: var(--spacer)
+  left: 1.8rem
+  min-width: var(--spacer)
   position: absolute
-  right: .2rem
+  top: .6rem
-  top: var(--spacer-1)
-  width: var(--spacer)
 
 a.badge-tag
   --badge-color: var(--color-text-secondary)

common/static/common/styles/_cards.sass

@@ -13,7 +13,7 @@
 .cards-item-content
   overflow: hidden
 
-.crads-item-excerpt
+.cards-item-excerpt
   line-height: calc(24 / 18)
 
 .cards-item-extra
@@ -25,5 +25,24 @@
     .stars
       font-size: 1.4rem
 
+.cards-item-headline
+  color: var(--color-text-secondary)
+  font-size: var(--fs-xs)
+  +fw-normal
+  letter-spacing: .1rem
+  line-height: var(--spacer)
+  +margin(1, bottom)
+  text-transform: uppercase
+
+.cards-item-thumbnail
+  background-color: var(--color-bg-secondary)
+  border-bottom-left-radius: 0
+  border-bottom-right-radius: 0
+
 .cards-item-title
   +padding(0, y)
+
+.is-row-add-ons,
+.is-row-themes
+  .cards-item-headline
+    display: none

common/static/common/styles/_forms.sass

@@ -9,7 +9,7 @@
 .form-check-label
   +margin(2, left)
 
-.form-control
+.form-control-sm
   &[type="file"]
     font-size: var(--fs-xs)
     height: calc(var(--spacer) * 2)

common/static/common/styles/_list.sass

@@ -9,29 +9,3 @@
 
   &:first-child
     +padding(0, top)
-
-.list-filters
-  +box-card
-  background-color: var(--color-bg-primary)
-  +padding(3)
-
-  h3
-    border-bottom: var(--border-width) solid var(--border-color)
-    color: var(--color-text-secondary)
-    +padding(2, bottom)
-
-  ul
-    +list-unstyled
-    margin: 0
-
-    li
-      &.is-active
-        color: var(--color-text-primary)
-        +fw-bold
-
-    a
-      display: block
-
-      &:hover
-        color: var(--color-text-primary)
-        text-decoration: none

common/static/common/styles/_navigation_global.sass

@@ -2,14 +2,16 @@
   --nav-global-border-radius: var(--border-radius)
   --nav-global-border-radius-lg: var(--border-radius-lg)
   --nav-global-button-height: calc(var(--spacer) * 2.5)
-  --nav-global-font-size: var(--fs-sm)
+  --nav-global-font-size: var(--fs-base)
   --nav-global-link-padding-y: var(--nav-global-spacer-xs);
   --nav-global-navbar-height: var(--navbar-primary-height, var(--spacer-6));
-  --nav-global-spacer: var(--spacer)
+  --nav-global-spacer: var(--spacer-2)
   --nav-global-spacer-sm: var(--spacer-2)
   --nav-global-spacer-xs: var(--spacer-1)
 
   .btn
+    line-height: calc(var(--spacer) * 2)
+
     &:hover
       background-color: var(--nav-global-color-button-bg-hover)
       color: var(--nav-global-color-text-hover) !important
@@ -20,3 +22,23 @@
   input,
   .form-control
     height: var(--nav-global-button-height)
+
+  .nav-global-nav-links
+    width: auto
+
++media-md
+  .nav-global
+    --nav-global-spacer: calc(var(--spacer) * .75)
+    --nav-global-font-size: var(--fs-sm)
+
+/* Match nav global links dropdown styles with component dropdown menu */
+/* TODO: @web-assets simplify components navigation */
+// #nav-global-nav-links
+//   @extend .dropdown-menu
+//
+//   li
+//     a
+//       @extend .dropdown-item
+//
+//   +media-md
+//     display: inline-flex !important

common/static/common/styles/_utilities.sass

@@ -40,6 +40,10 @@
 .style-rich-text
   +style-rich-text
 
+  // TODO: @web-assets move style pre to web-assets
+  pre
+    +margin(3, bottom)
+
 .text-accent
   color: var(--color-accent)
 

common/static/common/styles/main.sass

@@ -39,18 +39,14 @@ $container-width: map-get($container-max-widths, 'xl')
 \:root
   --z-index-galleria: 1050
 
-.nav-global button.nav-global-logo
+.navbar-search-helper
-  +media-xs
+  max-width: 16.0rem
-    width: 60px
+  min-width: 6.0rem
+
 
 /* TODO: temporarily here until it can be moved to web-assets v2. */
 .nav-global-links-right
   gap: 0 var(--spacer-2)
-  .navbar-search
-    margin: 0
-
-.navbar-search
-  width: 160px
 
 .profile-avatar
   border-radius: 50%

common/templates/common/base.html

@@ -31,19 +31,15 @@
   </head>
 
   <body class="has-global-bar">
-    {% switch "is_alpha" %}
+    {% switch "is_beta" %}
-    <div class="site-announcement-alpha">
-      This platform is currently in alpha.
-      <a class="text-underline" href="https://projects.blender.org/infrastructure/extensions-website/issues" target="_blank">Please report any issues you may find</a>, thanks! <a class="text-underline" href="https://devtalk.blender.org/tag/extensions" target="_blank">Learn more</a>
-    </div>
-    {% else %}
-      {% switch "is_beta" %}
     <div class="site-announcement-beta">
-      The website will be officially released together with Blender 4.2.
+      This platform is currently in beta.
-      Meanwhile you can use the extensions with a <a class="text-underline" href="https://builder.blender.org/" target="_blank"> daily build</a> of Blender. <a class="text-underline" href="https://devtalk.blender.org/tag/extensions" target="_blank">Learn more</a>
+      <a class="text-underline" href="https://projects.blender.org/infrastructure/extensions-website/issues" target="_blank">Please report any issues you may find</a>, thanks!
+
+      Access extensions with a <a class="text-underline" href="https://builder.blender.org/" target="_blank"> daily build</a> of Blender. <a class="text-underline" href="https://code.blender.org/2024/05/extensions-platform-beta-release/" target="_blank">Learn more</a>
     </div>
-      {% endswitch %}
     {% endswitch %}
+
     {% if request.user.is_staff %}
     <div class="whoosh-container">
       <a href="{% url 'admin:index' %}" title='Admin' class="whoosh">
@@ -52,10 +48,11 @@
       {% block admin_button_page %}{% endblock %}
     </div>
     {% endif %}
+    {# TODO: improve nav-global layout for small screens #}
     <div class="nav-global">
       <div class="nav-global-container">
         <nav>
-          <div class="site-beta-logo-container">
+          <div class="site-beta-logo-container text-nowrap">
             <a href="/" class="nav-global-logo{% if request.get_full_path == '/' %} is-active{% endif %}">
               <svg fill-rule="nonzero" viewBox="0 0 200 162.05">
                 <path
@@ -72,18 +69,21 @@
             {% endswitch %}
           </div>
 
-          <button class="nav-global-logo js-dropdown-toggle" data-toggle-menu-id="nav-global-nav-links">
+          <button class="align-items-center d-flex d-md-none nav-global-logo js-dropdown-toggle" data-toggle-menu-id="nav-global-nav-links">
-            <svg fill-rule="nonzero" viewBox="0 0 850.2 162.05">
+            <svg class="me-2" fill-rule="nonzero" viewBox="0 0 200 162.05">
               <path
                 d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z" />
             </svg>
-            <svg class="nav-global-icon nav-global-icon-dropdown-toggle" height="100px" width="100px" viewBox="0 0 1000 1000">
+            <strong class="fs-base me-1">Extensions</strong>
-              <path
+            <i class="i-chevron-down"></i>
-                d="m 206.53824,376.41174 a 42,42 0 0 1 71,-29 l 221,220 220,-220 a 42,42 0 1 1 59,59 l -250,250 a 42,42 0 0 1 -59,0 l -250,-250 a 42,42 0 0 1 -12,-30 z" />
-            </svg>
           </button>
 
-          <ul class="nav-global-nav-links nav-global-dropdown js-dropdown-menu" id="nav-global-nav-links">
+          <ul class="flex-nowrap me-4 nav-global-nav-links nav-global-dropdown js-dropdown-menu" id="nav-global-nav-links">
+            <li class="d-md-none">
+              <a href="/" class="{% if request.get_full_path == '/' %}is-active{% endif %}">
+                Home
+              </a>
+            </li>
             <li>
               <a href="{% url 'extensions:by-type' type_slug='add-ons' %}" class="{% if '/add-ons/' in request.get_full_path %}is-active{% endif %}">
                 Add-ons
@@ -106,13 +106,13 @@
             </li>
           </ul>
 
-          <ul class="nav-global-links-right">
+          <ul class="flex-grow-1 flex-nowrap justify-content-end ms-0 nav-global-links-right">
             <li>
               <button class="js-toggle-theme-btn px-2"><i class="js-toggle-theme-btn-icon i-adjust"></i></button>
             </li>
-            <li>
+            <li class="flex-grow-1 navbar-search-helper">
-              <search>
+              <search class="w-100">
-                <form action="{% url "extensions:search" %}" method="GET" class="navbar-search">
+                <form action="{% url "extensions:search" %}" method="GET" class="me-0 ms-0 navbar-search">
                   <input type="text" name="q" class="form-control"
                     {% if request.GET.q %}
                       value="{{ request.GET.q }}"
@@ -129,7 +129,7 @@
             </li>
 
             {% block nav-upload %}
-            <li>
+            <li class="d-none d-xl-flex">
               <a href="{% url 'extensions:submit' %}" class="btn btn-primary">
                 <i class="i-upload"></i>
                 <span>Upload Extension</span>
@@ -138,7 +138,7 @@
             {% endblock nav-upload %}
 
             {% if user.is_authenticated %}
-              <li>
+              <li class="nav-item">
                 <a class="btn btn-link position-relative px-2" href="{% url 'notifications:notifications' %}">
                   {% with unread_notification_count=user|unread_notification_count %}
                     {% if unread_notification_count %}
@@ -170,6 +170,12 @@
                   <li class="dropdown-divider"></li>
                   {% endif %}
 
+                  <li class="d-xl-none">
+                    <a href="{% url 'extensions:submit' %}" class="dropdown-item">
+                      <i class="i-upload"></i> {% trans 'Upload Extension' %}
+                    </a>
+                  </li>
+
                   <li>
                     <a href="{% url 'extensions:manage-list' %}" class="dropdown-item">
                       <i class="i-puzzle"></i> {% trans 'My Extensions' %}

common/templates/common/paginator.html

@@ -3,28 +3,28 @@
   <ol class="pagination">
     {% if pager.has_previous %}
       <li>
-        <a rel="prev" href="{{ pager.url|urlparams:pager.previous_page_number }}">
+        <a rel="prev" href="?page={{ pager.previous_page_number }}">
-          {{ _('Prev') }}
+          {% trans Prev %}
         </a>
       </li>
     {% endif %}
     {% if pager.dotted_lower %}
-      <li><a href="{{ pager.url|urlparams:1 }}">{{ 1 }}</a></li>
+      <li><a class="px-2 mx-1" href="?page=1">{{ 1 }}</a></li>
       <li class="skip">&hellip;</li>
     {% endif %}
     {% for x in pager.page_range %}
       <li {{ x|class_selected:pager.number }}>
-        <a href="{{ pager.url|urlparams:x }}">{{ x }}</a>
+        <a class="px-2 mx-1" href="?page={{ x }}">{{ x }}</a>
       </li>
     {% endfor %}
     {% if pager.dotted_upper %}
       <li class="skip">&hellip;</li>
-      <li><a href="{{ pager.url|urlparams:num_pages }}">{{ num_pages }}</a></li>
+      <li><a class="px-2 mx-1" href="?page={{ num_pages }}">{{ num_pages }}</a></li>
     {% endif %}
     {% if pager.has_next %}
       <li>
-        <a rel="next" href="{{ pager.url|urlparams:pager.next_page_number }}">
+        <a class="px-2 mx-1" rel="next" href="?page={{ pager.next_page_number }}">
-          {{ _('Next') }}
+          {% trans Next %}
         </a>
       </li>
     {% endif %}

extensions/admin.py

@@ -13,13 +13,13 @@ log = logging.getLogger(__name__)
 
 class MaintainerInline(admin.TabularInline):
     model = Maintainer
-    raw_id_fields = ('user',)
+    autocomplete_fields = ('user',)
     extra = 0
 
 
 class PreviewInline(NoAddDeleteMixin, admin.TabularInline):
     model = Extension.previews.through
-    raw_id_fields = ('file',)
+    autocomplete_fields = ('file',)
     show_change_link = True
     can_add = False
     extra = 0
@@ -34,21 +34,41 @@ class VersionInline(NoAddDeleteMixin, admin.TabularInline):
 
 
 class ExtensionAdmin(admin.ModelAdmin):
+    date_hierarchy = 'date_created'
     list_display = (
         '__str__',
         'type',
         'status',
+        'date_created',
         'download_count',
         'view_count',
         'average_score',
     )
-    list_filter = ('type', 'status')
+    list_filter = (
-    search_fields = ('id', '^slug', 'name')
+        'type',
+        'status',
+        'is_listed',
+        'date_approved',
+        'date_created',
+        'date_modified',
+        'date_status_changed',
+    )
+    search_fields = (
+        'id',
+        '^slug',
+        'name',
+        'authors__email',
+        'authors__full_name',
+        'authors__username',
+        'team__name',
+        'versions__file__user__email',
+        'versions__file__user__full_name',
+        'versions__file__user__username',
+    )
     inlines = (MaintainerInline, PreviewInline, VersionInline)
     readonly_fields = (
         'id',
         'type',
-        'name',
         'slug',
         'date_created',
         'date_status_changed',
@@ -60,9 +80,10 @@ class ExtensionAdmin(admin.ModelAdmin):
         'download_count',
         'view_count',
         'website',
+        'icon',
+        'featured_image',
     )
-    raw_id_fields = ('team',)
+    autocomplete_fields = ('team',)
-    autocomplete_fields = ('icon', 'featured_image')
 
     fieldsets = (
         (
@@ -70,7 +91,7 @@ class ExtensionAdmin(admin.ModelAdmin):
             {
                 'fields': (
                     ('team',),
-                    ('id', 'type'),
+                    ('id', 'type', 'extension_id'),
                     (
                         'date_created',
                         'date_status_changed',
@@ -114,6 +135,7 @@ class ExtensionAdmin(admin.ModelAdmin):
 
 
 class VersionAdmin(admin.ModelAdmin):
+    date_hierarchy = 'date_created'
     list_display = (
         '__str__',
         'extension',
@@ -124,13 +146,23 @@ class VersionAdmin(admin.ModelAdmin):
         'file__status',
         'blender_version_min',
         'blender_version_max',
+        'permissions',
+        'date_created',
+        'date_modified',
         'licenses',
         'tags',
-        'permissions',
         'platforms',
     )
-    search_fields = ('id', 'extension__slug', 'extension__name')
+    search_fields = (
-    raw_id_fields = ('extension', 'file')
+        'id',
+        'extension__slug',
+        'extension__name',
+        'extension__extension_id',
+        'file__user__email',
+        'file__user__full_name',
+        'file__user__username',
+    )
+    autocomplete_fields = ('extension', 'file')
     readonly_fields = (
         'id',
         'tagline',

extensions/static/extensions/scripts/manage.js

@@ -41,7 +41,7 @@ function appendImageUploadForm() {
         <input class="js-input-img-caption form-control" id="${formsetPrefix}-${i}-caption" type="text" maxlength="255" name="${formsetPrefix}-${i}-caption" placeholder="Describe the preview">
       </div>
       <div class="align-items-center d-flex justify-content-between">
-        <input accept="image/jpg,image/jpeg,image/png,image/webp,video/mp4" class="form-control js-input-img" id="id_${formsetPrefix}-${i}-source" type="file" name="${formsetPrefix}-${i}-source">
+        <input accept="image/jpg,image/jpeg,image/png,image/webp,video/mp4" class="form-control form-control-sm js-input-img" id="id_${formsetPrefix}-${i}-source" type="file" name="${formsetPrefix}-${i}-source">
         <ul class="pt-0">
           <li>
             <button class="btn btn-link btn-sm js-btn-reset-img-upload-form ps-2 pe-0"><i class="i-refresh"></i> Reset</button>

extensions/templates/extensions/components/card.html

@@ -1,14 +1,23 @@
 {% load common filters static %}
-{% static "common/images/no-image_640x360.png" as featured_image_missing %}
+{% with latest=extension.latest_version type_display=extension.get_type_display %}
-{% with latest=extension.latest_version %}
-  {% firstof extension.featured_image.thumbnail_360p_url featured_image_missing as thumbnail_360p_url %}
   <div class="cards-item">
     <div class="cards-item-content">
       <a href="{{ extension.get_absolute_url }}">
-        <div class="cards-item-thumbnail">
+        {% with featured_image=extension.featured_image.thumbnail_360p_url %}
-          <img alt="{{ extension.name }}" src="{{ thumbnail_360p_url }}" title="{{ extension.name }}">
+          <div class="cards-item-thumbnail">
-        </div>
+            {% if featured_image %}
+              <img alt="{{ extension.name }}" src="{{ featured_image }}" title="{{ extension.name }}">
+            {% else %}
+              <div class="align-items-center d-flex justify-content-center position-absolute">
+                <i class="fs-3 {% if type_display == "Theme" %}i-brush{% else %}i-puzzle{% endif %}"></i>
+              </div>
+            {% endif %}
+          </div>
+        {% endwith %}
       </a>
+      <div class="cards-item-headline">
+        {{ type_display }}
+      </div>
       <h3 class="cards-item-title">
         <a href="{{ extension.get_absolute_url }}">{{ extension.name }}</a>
       </h3>
@@ -48,7 +57,7 @@
 
           {% if show_type %}
           <li class="ms-auto">
-            {{ extension.get_type_display }}
+            {{ type_display }}
           </li>
           {% endif %}
         </ul>

extensions/templates/extensions/draft_finalise.html

@@ -134,5 +134,3 @@
 {% block scripts %}
   {% javascript "extensions" %}
 {% endblock scripts %}
-
-{% block footer %}{# no footer here #}{% endblock footer %}

extensions/templates/extensions/list.html

@@ -4,27 +4,8 @@
 {% block page_title %}{% include "extensions/components/listing_title" %}{% endblock page_title %}
 
 {% block content %}
-<div class="row">
+<div class="row {% if type == 'Add-ons' %}is-row-add-ons{% elif type == 'Themes' %}is-row-themes{% endif %}">
-  {% if tags %}
+  <div class="col-md-12 my-4">
-  <div class="col-md-2">
-    <aside class="is-sticky pt-3">
-      <div class="list-filters">
-        <h3>Tags</h3>
-        <ul>
-          {% for list_tag in tags %}
-          <li class="{% if tag == list_tag %}is-active{% endif %}">
-            <a href="{% url "extensions:by-tag" tag_slug=list_tag.slug %}" title="{{ list_tag.name }}">
-              {{ list_tag.name }}
-            </a>
-          </li>
-          {% endfor %}
-        </ul>
-      </div>
-    </aside>
-  </div>
-  {% endif %}
-
-  <div class="col-md-{% if tags %}10{% else %}12{% endif %} my-4">
     {% if author %}
       <h2>{% blocktranslate %}Extensions by{% endblocktranslate %} <em class="search-highlight">{{ author }}</em></h2>
     {% endif %}
@@ -44,18 +25,48 @@
       <h2>{{ page_obj.paginator.count }} result{{ page_obj.paginator.count | pluralize }} for <em class="search-highlight">{{ request.GET.q }}</em></h2>
     {% endif %}
 
+    {% if tags %}
+      <div class="row">
+        <div class="col-md-12">
+          <div class="box p-2">
+            <div class="btn-row">
+              {# TODO: @back-end add conditional link to either Add-ons or Themes pages #}
+              <a class="btn btn-sm {% if not tag %}btn-primary{% endif %}" href="/add-ons" title="All">
+                All
+              </a>
+              {% for list_tag in tags %}
+                <a class="align-items-center btn btn-sm d-flex {% if tag == list_tag %}btn-primary{% endif %}" href="{% url "extensions:by-tag" tag_slug=list_tag.slug %}" title="{{ list_tag.name }}">
+                  <div>
+                    {{ list_tag.name }}
+                  </div>
+                  {# TODO: @back-end add tags count dynamic #}
+                  {% comment %}
+                    <div class="align-items-center bg-primary d-flex h-3 fs-xs justify-content-center ms-2 rounded-circle w-3">
+                      1
+                    </div>
+                  {% endcomment %}
+                </a>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+    {% endif %}
+
     <div class="row">
       <div class="col">
         {% if object_list %}
-        <div class="cards cards-3">
+        <div class="cards cards cards-lg-4 cards-md-3 cards-sm-2 mt-3">
           {% for extension in object_list %}
             {% include "extensions/components/card.html" with show_type=False %}
           {% endfor %}
         </div>
         {% else %}
-        <p>
+        <div class="mt-3">
-          {% blocktranslate %}No extensions found.{% endblocktranslate %}
+          <p class="pt-3 text-center">
-        </p>
+            {% blocktranslate %}No extensions found.{% endblocktranslate %}
+          </p>
+        </div>
         {% endif %}
 
         <div class="row">

extensions/templates/extensions/manage/components/add_previews.html

@@ -20,7 +20,7 @@
               {% include "common/components/field.html" with field=inlineform.caption label='Caption' placeholder="Describe the preview" %}
             </div>
             <div class="align-items-center d-flex js-input-img-helper justify-content-between">
-              {% include "common/components/field.html" with field=inlineform.source label='File' %}
+              {% include "common/components/field.html" with classes="form-control-sm" field=inlineform.source label='File' %}
               <ul class="pt-0">
                 <li>
                   <button class="btn btn-link btn-sm js-btn-reset-img-upload-form ps-2 pe-0"><i class="i-refresh"></i> Reset</button>

extensions/templates/extensions/manage/components/set_image.html

@@ -9,7 +9,7 @@
     </div>
     {% for field in inlineform %}
       {% if field.name == "source" %}
-        {% include "common/components/field.html" with label=label help_text=help_text %}
+        {% include "common/components/field.html" with classes="form-control-sm" label=label help_text=help_text %}
       {% else %}
         {% include "common/components/field.html" %}
       {% endif %}

extensions/templates/extensions/manage/list.html

@@ -25,7 +25,7 @@
   <div class="row mt-4">
     <div class="col">
       {% if object_list %}
-      <div class="cards">
+      <div class="cards cards-lg-4 cards-md-3 cards-sm-2">
         {% for extension in object_list %}
           {% include "extensions/manage/components/card.html" with show_type=True %}
         {% endfor %}

extensions/templatetags/filters.py

@@ -15,23 +15,23 @@ def naturaltime_compact(time):
     # Take only the first part, e.g. "3 days, 2h ago", becomes " 3d ago"
     compact_time = compact_time.split(',')[0]
 
-    compact_time = compact_time.replace(' seconds ago', ' s')
+    compact_time = compact_time.replace(' ago', '')
-    compact_time = compact_time.replace('a minute ago', '1 m')
+    compact_time = compact_time.replace(' seconds', ' s')
-    compact_time = compact_time.replace(' minutes ago', ' m')
+    compact_time = compact_time.replace(' second', ' s')
-    compact_time = compact_time.replace('an hour ago', '1 h')  # Exactly 1 hour.
+    compact_time = compact_time.replace(' minutes', ' m')
-    compact_time = compact_time.replace(' hours ago', ' h')
+    compact_time = compact_time.replace('a minute', '1 m')
-    compact_time = compact_time.replace('1 day ago', '1 d')
+    compact_time = compact_time.replace(' minute', ' m')
-    compact_time = compact_time.replace('1 day', '1 d')
+    compact_time = compact_time.replace(' hours', ' h')
-    compact_time = compact_time.replace(' days ago', ' d')
+    compact_time = compact_time.replace('an hour', '1 h')
-    compact_time = compact_time.replace('1 week ago', '1 w')
+    compact_time = compact_time.replace(' hour', ' h')
-    compact_time = compact_time.replace('1 week', '1 w')
+    compact_time = compact_time.replace(' days', ' d')
-    compact_time = compact_time.replace(' weeks ago', ' w')
+    compact_time = compact_time.replace(' day', ' d')
-    compact_time = compact_time.replace('1 month ago', '1 mo')
+    compact_time = compact_time.replace(' weeks', ' w')
-    compact_time = compact_time.replace('1 month', '1 mo')
+    compact_time = compact_time.replace(' week', ' w')
-    compact_time = compact_time.replace(' months ago', ' mo')
+    compact_time = compact_time.replace(' months', ' mo')
-    compact_time = compact_time.replace('1 year ago', '1 y')
+    compact_time = compact_time.replace(' month', ' mo')
-    compact_time = compact_time.replace('1 year', '1 y')
+    compact_time = compact_time.replace(' years', ' y')
-    compact_time = compact_time.replace(' years ago', ' y')
+    compact_time = compact_time.replace(' year', ' y')
 
     return compact_time
 

extensions/views/public.py

@@ -29,7 +29,7 @@ class ListedExtensionsView(ListView):
 
 
 class HomeView(ListedExtensionsView):
-    paginate_by = 15
+    paginate_by = 16
     template_name = 'extensions/home.html'
 
     def dispatch(self, request, *args, **kwargs):
@@ -69,7 +69,7 @@ def extension_version_download(request, type_slug, slug, version):
 
 
 class SearchView(ListedExtensionsView):
-    paginate_by = 15
+    paginate_by = 16
     template_name = 'extensions/list.html'
 
     def _get_type_id_by_slug(self):

files/admin.py

@@ -63,6 +63,7 @@ class FileAdmin(admin.ModelAdmin):
             kwargs.update({'help_texts': {'metadata': help_text}})
         return super().get_form(request, obj, **kwargs)
 
+    date_hierarchy = 'date_created'
     view_on_site = False
     save_on_top = True
 
@@ -70,8 +71,10 @@ class FileAdmin(admin.ModelAdmin):
         'validation__is_ok',
         'type',
         'status',
-        'date_status_changed',
         'date_approved',
+        'date_created',
+        'date_modified',
+        'date_status_changed',
         ('extension', admin.EmptyFieldListFilter),
     )
     list_display = (
@@ -84,8 +87,9 @@ class FileAdmin(admin.ModelAdmin):
         'is_ok',
     )
 
-    list_select_related = ('version__extension', 'user')
+    list_select_related = ('version__extension', 'user', 'extension', 'version', 'validation')
 
+    autocomplete_fields = ['user']
     readonly_fields = (
         'id',
         'date_created',
@@ -96,7 +100,6 @@ class FileAdmin(admin.ModelAdmin):
         'thumbnails',
         'thumbnail',
         'type',
-        'user',
         'original_hash',
         'original_name',
         'hash',
@@ -110,6 +113,9 @@ class FileAdmin(admin.ModelAdmin):
         'original_name',
         'hash',
         'source',
+        'user__email',
+        'user__full_name',
+        'user__username',
     )
 
     fieldsets = (

notifications/templates/notifications/notification_list.html

@@ -64,4 +64,6 @@
       {% trans 'You have no notifications' %}
     </p>
   {% endif %}
+
+  {{ page_obj|paginator }}
 {% endblock content %}

notifications/views.py

@@ -13,7 +13,7 @@ from notifications.models import Notification
 
 class NotificationsView(LoginRequiredMixin, ListView):
     model = Notification
-    paginate_by = 10
+    paginate_by = 20
 
     def get_queryset(self):
         return Notification.objects.filter(recipient=self.request.user).order_by('-id')

playbooks/vars_common.yaml

@@ -9,7 +9,7 @@ max_requests: 1000
 max_requests_jitter: 50
 port: 8200
 workers: 2
-client_max_body_size: "50m"
+client_max_body_size: "300m"
 python_version: "3.10"
 delete_venv: false  # set to true if venv has to be re-created from scratch
 

reviewers/templates/reviewers/extensions_review_detail.html

@@ -101,31 +101,8 @@
   <ul class="activity-list">
   {% for activity in review_activity %}
     <li id="activity-{{ activity.id }}">
-
-      {% if activity.type in status_change_types %}
-      <div class="activity-item activity-status-change activity-status-{{ activity.get_type_display|slugify }}">
-        <i class="activity-icon i-activity-{{ activity.get_type_display|slugify }}"></i>
-
-        <a href="{% url "extensions:by-author" user_id=activity.user.pk %}">
-          {% include "users/components/profile_display.html" with user=activity.user classes="" %}
-        </a>
-
-        <a href="{% url "extensions:by-author" user_id=activity.user.pk %}"><strong>{{ activity.user }}</strong></a>
-        changed review status to
-        <span class="badge badge-status-{{ activity.get_type_display|slugify }}">
-          {{ activity.get_type_display }}
-        </span>
-        <a href="#activity-{{ activity.id }}" title="{{ activity.date_created }}">
-          {{ activity.date_created|naturaltime_compact }}
-        </a>
-      </div>
-      {% endif %}
-
-      {# Comments. #}
-      {% if activity.message %}
       <article class="activity-item comment-card">
-        <i class="activity-icon i-comment"></i>
+        <i class="activity-icon {% if activity.type in status_change_types %}i-activity-{{ activity.get_type_display|slugify }}{% else %}i-comment{% endif %}"></i>
-
         <aside>
           <a href="{% url "extensions:by-author" user_id=activity.user.pk %}">
             {% include "users/components/profile_display.html" with user=activity.user classes="" %}
@@ -138,6 +115,12 @@
                 <a href="{% url "extensions:by-author" user_id=activity.user.pk %}">
                   {{ activity.user }}
                 </a>
+                {% if activity.type in status_change_types %}
+                  changed review status to
+                  <span class="badge badge-status-{{ activity.get_type_display|slugify }}">
+                    {{ activity.get_type_display }}
+                  </span>
+                {% endif %}
               </li>
               <li class="ms-auto">
                 <a href="#activity-{{ activity.id }}" title="{{ activity.date_created }}">
@@ -146,10 +129,10 @@
               </li>
             </ul>
           </header>
-          <div>{{ activity.message|markdown }}</div>
+          <div>
+            {{ activity.message|markdown }}</div>
         </div>
       </article>
-      {% endif %}
     </li>
   {% endfor %}
   </ul>

reviewers/templates/reviewers/extensions_review_list.html

@@ -1,5 +1,5 @@
 {% extends "common/base.html" %}
-{% load i18n humanize filters %}
+{% load i18n humanize filters common %}
 
 {% block page_title %}Approval queue{% endblock page_title %}
 
@@ -45,5 +45,6 @@
   {% else %}
     <p>{% trans "No extensions to review." %}</p>
   {% endif %}
+  {{ page_obj|paginator }}
 </section>
 {% endblock content %}