fix(ui): adjust styles for authentication name display

Author: felixfon

weblate/accounts/templatetags/authnames.py

@@ -12,7 +12,6 @@
 from django.conf import settings
 from django.contrib.staticfiles.storage import staticfiles_storage
 from django.utils.html import format_html
-from django.utils.safestring import mark_safe
 from django.utils.translation import gettext_lazy
 
 from weblate.accounts.utils import get_key_name
@@ -59,15 +58,11 @@
     "recovery": gettext_lazy("Use recovery codes"),
 }
 
-IMAGE_SOCIAL_TEMPLATE = """
-<img class="auth-image" src="{image}" />
-"""
+IMAGE_SOCIAL_TEMPLATE = """<img class="auth-image" src="{image}" />"""
 
-SOCIAL_TEMPLATE = """
-{icon}
-{separator}
-{name}
-"""
+NAME_SOCIAL_TEMPLATE = """<span class="auth-name">{name}</span>"""
+
+SOCIAL_TEMPLATE = """{icon}{label}"""
 
 
 def get_auth_params(auth: str) -> dict[str, StrOrPromise]:
@@ -92,22 +87,20 @@ def get_auth_params(auth: str) -> dict[str, StrOrPromise]:
     return params
 
 
-auth_name_default_separator = mark_safe("<br />")
-
-
 @register.simple_tag
-def auth_name(auth: str, separator: str = auth_name_default_separator, only: str = ""):
+def auth_name(auth: str, only: str = ""):
     """Create HTML markup for social authentication method."""
     params = get_auth_params(auth)
 
     if not params["image"].startswith(("http", "data:")):
         params["image"] = staticfiles_storage.url(f"auth/{params['image']}")
-    params["icon"] = format_html(IMAGE_SOCIAL_TEMPLATE, separator=separator, **params)
+    params["icon"] = format_html(IMAGE_SOCIAL_TEMPLATE, **params)
+    params["label"] = format_html(NAME_SOCIAL_TEMPLATE, **params)
 
     if only:
         return params[only]
 
-    return format_html(SOCIAL_TEMPLATE, separator=separator, **params)
+    return format_html(SOCIAL_TEMPLATE, **params)
 
 
 def get_auth_name(auth: str):
@@ -117,7 +110,7 @@ def get_auth_name(auth: str):
 
 @register.simple_tag
 def key_name(device: Device) -> str:
-    return format_html('<span class="auth-name">{}</span>', get_key_name(device))
+    return auth_name(get_key_name(device), only="label")
 
 
 @register.simple_tag

weblate/static/styles/main.css

@@ -2327,8 +2327,8 @@ tbody.warning {
 }
 
 .auth-name {
-  margin: 8px 0;
-  display: inline-block;
+  margin: 0 8px;
+  vertical-align: middle;
 }
 
 .totp-qr svg {

weblate/templates/accounts/login.html

@@ -52,7 +52,7 @@ <h5 class="login-label">{% translate "Sign in with:" %}</h5>
                       <a href=""
                          class="btn btn-outline-primary link-post"
                          data-href="{% url 'social:begin' name %}"
-                         {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name " " %}</a>
+                         {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name %}</a>
                     </div>
                   {% endfor %}
                 </div>

weblate/templates/accounts/redirect.html

@@ -19,7 +19,7 @@
       <a href=""
          class="btn btn-link link-auto link-post"
          data-href="{% url 'social:begin' backend %}"
-         {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name backend " " %}</a>
+         {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name backend %}</a>
     </div>
 
   </div>

weblate/templates/accounts/register.html

@@ -60,7 +60,7 @@ <h5 class="login-label">{% translate "Create an account using:" %}</h5>
                         <a href=""
                            class="btn btn-outline-primary link-post"
                            data-href="{% url 'social:begin' name %}"
-                           {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name " " %}</a>
+                           {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name %}</a>
                       </div>
                     {% endfor %}
                   </div>

weblate/templates/accounts/user.html

@@ -250,7 +250,7 @@ <h3>{{ page_user }}</h3>
             <tbody>
               {% for social in page_user.social_auth.all %}
                 <tr>
-                  <th>{% auth_name social.provider ' ' %}</th>
+                  <th>{% auth_name social.provider %}</th>
                   <td>{{ social.uid }}</td>
                   <td>
                     {% for verified in social.verifiedemail_set.all %}