feat: header text prefix (#141)

unfoldadmin · Oct 5, 2023 · f94be70 · f94be70
1 parent 760144c
commit f94be70
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -338,7 +338,10 @@ class UserAdmin(ModelAdmin):
 
     @display(header=True)
     def display_as_two_line_heading(self, obj):
-        return "First main heading", "Smaller additional description"
+        """
+        Third argument is short text which will appear as prefix in circle
+        """
+        return "First main heading", "Smaller additional description", "AB"
 ```
 
 ## Actions

diff --git a/src/unfold/static/unfold/css/styles.css b/src/unfold/static/unfold/css/styles.css
diff --git a/src/unfold/templates/unfold/helpers/display_header.html b/src/unfold/templates/unfold/helpers/display_header.html
@@ -1,13 +1,17 @@
-{% load i18n static %}
+<div class="flex gap-4 items-center">
+  {% if value.2 %}
+    <div class="border flex font-medium h-8 justify-center items-center rounded-full text-xs uppercase w-8 dark:border-gray-700">
+      {{ value.2 }}
+    </div>
+  {% endif %}
 
-<div class="flex items-center">
-    <div class="flex flex-col text-right lg:text-left">
-        <h3>
-            {{ value.0 }}
-        </h3>
+  <div class="flex flex-col text-right lg:text-left">
+    <h3>{{ value.0 }}</h3>
 
-        <p class="text-gray-500">
-            {{ value.1  }}
-        </p>
-    </div>
+    {% if value.1 %}
+      <p class="text-gray-500">
+        {{ value.1 }}
+      </p>
+    {% endif %}
+  </div>
 </div>