feat(accounts): make identities listing responsive

Fixes WeblateOrg#11860
nijel · Jun 17, 2024 · 7dee0ba · 7dee0ba
1 parent 279fed0
commit 7dee0ba
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 40 deletions.
diff --git a/weblate/accounts/templatetags/authnames.py b/weblate/accounts/templatetags/authnames.py
@@ -82,14 +82,17 @@ def get_auth_params(auth: str) -> dict[str, StrOrPromise]:
 
 
 @register.simple_tag
-def auth_name(auth: str, separator: str = auth_name_default_separator):
+def auth_name(auth: str, separator: str = auth_name_default_separator, only: str = ""):
     """Create HTML markup for social authentication method."""
     params = get_auth_params(auth)
 
     if not params["image"].startswith("http"):
         params["image"] = staticfiles_storage.url("auth/" + params["image"])
     params["icon"] = format_html(IMAGE_SOCIAL_TEMPLATE, separator=separator, **params)
 
+    if only:
+        return params[only]
+
     return format_html(SOCIAL_TEMPLATE, separator=separator, **params)
 
 

diff --git a/weblate/static/style-bootstrap.css b/weblate/static/style-bootstrap.css
@@ -2006,3 +2006,11 @@ tbody.warning {
   padding: 5px 10px;
   margin: 0;
 }
+
+.auth-info {
+  display: inline-block;
+}
+.auth-list .auth-image {
+  vertical-align: top;
+  padding: 0 5px;
+}
diff --git a/weblate/templates/accounts/profile.html b/weblate/templates/accounts/profile.html
@@ -129,42 +129,42 @@
   </div>
 </div>
 
+<div class="row">
+<div class="col-sm-6">
+
 <div class="panel panel-default">
   <div class="panel-heading"><h4 class="panel-title">{% documentation_icon 'user/profile' 'authentication' right=True %}{% trans "Current user identities" %}</h4></div>
-<table class="table table-auth">
-<thead>
-<tr>
-<th>{% trans "Identity" %}</th>
-<th>{% trans "User ID" %}</th>
-<th>{% trans "Action" %}</th>
-</tr>
-<tbody>
-{% if request.user.has_usable_password or has_email_auth %}
-<tr>
-<th>{% auth_name 'password' ' ' %}</th>
-<td>{{ request.user.username }}</td>
-<td>
-<a href="{% url 'password' %}" class="btn btn-primary">{% if request.user.has_usable_password %}{% trans "Change password" %}{% else %}{% trans "Set password" %}{% endif %}</a>
-</td>
-</tr>
-{% endif %}
-{% for assoc in associated %}
-<tr>
-<th>{% auth_name assoc.provider ' ' %}</th>
-<td>{{ assoc.uid }}</td>
-<td>
-{% if associated.count > 1 %}
-<a href="{% url 'social:disconnect_individual' assoc.provider assoc.id %}?next={% url 'profile' %}%23account" class="disconnect btn btn-danger">{% trans "Disconnect" %}</a>
-{% endif %}
-</td>
-
-</tr>
-{% endfor %}
-</tbody>
-</table>
+  <ul class="list-group">
+    {% if request.user.has_usable_password or has_email_auth %}
+      <li class="list-group-item auth-list">
+        <a href="{% url 'password' %}" class="btn btn-primary pull-right flip">{% if request.user.has_usable_password %}{% trans "Change password" %}{% else %}{% trans "Set password" %}{% endif %}</a>
+
+        {% auth_name 'password' only="icon" %}
+        <div class="auth-info">
+          <strong>{% auth_name 'password' only="name" %}</strong><br />
+          {{ request.user.username }}
+        </div>
+      </li>
+    {% endif %}
+    {% for assoc in associated %}
+      <li class="list-group-item auth-list">
+        {% if associated.count > 1 %}
+          <a href="{% url 'social:disconnect_individual' assoc.provider assoc.id %}?next={% url 'profile' %}%23account" class="disconnect btn btn-danger pull-right flip">{% trans "Disconnect" %}</a>
+        {% endif %}
+
+        {% auth_name assoc.provider only="icon" %}
+        <div class="auth-info">
+          <strong>{% auth_name assoc.provider only="name" %}</strong><br />
+          {{ assoc.uid }}
+        </div>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
 </div>
 
 {% if new_backends %}
+<div class="col-sm-6">
 <div class="panel panel-default">
   <div class="panel-heading"><h4 class="panel-title">{% trans "Add new user identity" %}</h4></div>
   <div class="panel-body">
@@ -173,29 +173,39 @@
 {% endfor %}
 </div>
 </div>
+</div>
 {% endif %}
+</div>
 
-<div class="panel panel-danger">
-  <div class="panel-heading"><h4 class="panel-title">{% trans "Removal" %}</h4></div>
+<div class="row">
+
+<div class="col-sm-6">
+<div class="panel panel-default">
+  <div class="panel-heading"><h4 class="panel-title">{% trans "User data" %}</h4></div>
   <div class="panel-body">
 
-    <p>{% trans "Account removal deletes all your private data." %}</p>
+    <p>{% trans "You can download all your private data." %}</p>
    </div>
    <div class="panel-footer">
-    <a class="btn btn-danger" href="{% url 'remove' %}">{% trans "Remove my account" %}</a>
+    <a href="" class="btn btn-primary link-post" data-href="{% url 'userdata' %}">{% trans "Download user data" %}</a>
    </div>
 </div>
+</div>
 
-<div class="panel panel-default">
-  <div class="panel-heading"><h4 class="panel-title">{% trans "User data" %}</h4></div>
+<div class="col-sm-6">
+<div class="panel panel-danger">
+  <div class="panel-heading"><h4 class="panel-title">{% trans "Removal" %}</h4></div>
   <div class="panel-body">
 
-    <p>{% trans "You can download all your private data." %}</p>
+    <p>{% trans "Account removal deletes all your private data." %}</p>
    </div>
    <div class="panel-footer">
-    <a href="" class="btn btn-primary link-post" data-href="{% url 'userdata' %}">{% trans "Download user data" %}</a>
+    <a class="btn btn-danger" href="{% url 'remove' %}">{% trans "Remove my account" %}</a>
    </div>
 </div>
+</div>
+
+</div>
 
 </div>