From 35ba8ecdd71c70e4a420919c6601f7f4de2e7e81 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Thu, 16 Jan 2025 14:12:51 -0800
Subject: [PATCH] ui: Fix tag separator not showing on some machines

We were using the Unicode point "Katakana middle dot" which was not showing up
on some systems. Separators may not show up the same on all machines depending
on the font used. So, use an SVG image instead.

Tests:

- On the front page and apps page, the separators appears as expected.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 plinth/templates/card.html         | 2 +-
 plinth/templates/index.html        | 2 +-
 static/themes/default/css/main.css | 9 +++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/plinth/templates/card.html b/plinth/templates/card.html
index cbc30c8cb..13e912374 100644
--- a/plinth/templates/card.html
+++ b/plinth/templates/card.html
@@ -20,7 +20,7 @@
     </div>
     <div class="card-title">{{ item.name }}</div>
     <div class="card-tags">
-      {% for tag in item.tags|slice:":3" %}{% trans tag %}{% if not forloop.last %}・{% endif %}{% endfor %}
+      {% for tag in item.tags|slice:":3" %}<span class="tag">{% trans tag %}</span>{% if not forloop.last %}<span class="tag-separator"></span>{% endif %}{% endfor %}
     </div>
   </a>
 </div>
diff --git a/plinth/templates/index.html b/plinth/templates/index.html
index 67b0c76aa..c82ca63f4 100644
--- a/plinth/templates/index.html
+++ b/plinth/templates/index.html
@@ -76,7 +76,7 @@
                           {{ shortcut.name }}
                         </div>
                         <div class="card-tags">
-                          {% for tag in shortcut.tags|slice:":3" %}{% trans tag %}{% if not forloop.last %}・{% endif %}{% endfor %}
+                          {% for tag in shortcut.tags|slice:":3" %}<span class="tag">{% trans tag %}</span>{% if not forloop.last %}<span class="tag-separator"></span>{% endif %}{% endfor %}
                         </div>
                     </a>
                 </div>
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index c100ba7f6..a6dee5f3e 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -660,6 +660,15 @@ footer {
     margin: 0.5rem 0;
 }
 
+.card .tag-separator {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>%3ccircle style='fill:%236c757d' cx='8' cy='8' r='8'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    display: inline-block;
+    width: 0.1875rem;
+    height: 0.375rem;
+    margin: 0 0.5rem;
+}
+
 /* System page - special card styling */
 .system-page .card-list {
     justify-content: left;