[damned-lies/bootstrap-5: 3/7] fix: align button on profile

[Guillaume Bernard <gbernard src gnome org>]

commit 7bde8fa6ceeef682199f306cbf1a3a67ccfd978e
Author: Guillaume Bernard <associations guillaume-bernard fr>
Date:   Thu Sep 22 10:21:28 2022 +0200

    fix: align button on profile
    
    feat: use bootstrap for user profile

 common/static/css/template.css        |  8 ++++
 damnedlies/settings.py                |  3 +-
 requirements.txt                      |  1 +
 templates/people/person_base.html     | 70 ++++++++++++++++++++++++-----------
 templates/people/person_overview.html | 63 +++++++++++++++----------------
 5 files changed, 91 insertions(+), 54 deletions(-)
---
diff --git a/common/static/css/template.css b/common/static/css/template.css
index 107274f8..3079b804 100644
--- a/common/static/css/template.css
+++ b/common/static/css/template.css
@@ -578,3 +578,11 @@ ul.foot li {
         margin: 2px 20px 0;
     }
 }
+
+#user_profile_image > img {
+  width: 100%;
+}
+
+.list-group-item svg {
+    width: 1.5rem;
+}
diff --git a/damnedlies/settings.py b/damnedlies/settings.py
index 08b1408a..6583a2c4 100644
--- a/damnedlies/settings.py
+++ b/damnedlies/settings.py
@@ -153,6 +153,7 @@ INSTALLED_APPS = [
     "feeds",
     "api",
     "bootstrap5",
+    "fontawesomefree",
 ]
 
 
@@ -224,6 +225,6 @@ if USE_DEBUG_TOOLBAR:
     INSTALLED_APPS.append("debug_toolbar")
 
 BOOTSTRAP5 = {
-    "css_url": {"href": "/static/css/bootstrap.min.css"},
+    "css_url": {"url": "/static/css/bootstrap.min.css"},
     "javascript_url": {"url": "/static/js/bootstrap.bundle.min.js"},
 }
diff --git a/requirements.txt b/requirements.txt
index 6c829fe5..10eb1fe5 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,6 +2,7 @@ django~=4.1
 markdown~=3.2.2  # Team presentation markup rendering
 translate-toolkit>=2.2.0
 django-bootstrap-v5
+fontawesomefree
 
 # Dependencies that might be installed on your system
 # mysqlclient  # MySQL database connector
diff --git a/templates/people/person_base.html b/templates/people/person_base.html
index 4b4fce73..9dd47420 100644
--- a/templates/people/person_base.html
+++ b/templates/people/person_base.html
@@ -4,27 +4,53 @@
 {% block title %}{% trans "GNOME Contributor" %}{% endblock %}
 
 {% block content %}
-<div class="mainpage container">
-  {% include "people/person_overview.html" %}
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8 col-xs-12 col-sm-12 col-md-12 mb-5">
+                <h2 class="h2">{% trans "Profile" %}</h2>
+                <hr>
+                {% include "people/person_overview.html" %}
+            </div>
+            <div class="col-lg-4 col-xs-12 col-sm-12 col-md-12 mb-5">
+                {% if on_own_page %}
+                    <h2 class="h2">{% trans "Settings" %}</h2>
+                    <hr>
+                    <div class="list-group list-group-flush">
+                        <a class="list-group-item list-group-item-action nav-link"
+                           href="{% url 'person_detail_change' %}">
+                            <i class="fa-solid fa-circle-info me-2"></i> {% trans "Change your details" %}
+                        </a>
+                        <a class="list-group-item list-group-item-action nav-link"
+                           href="{% url 'person_password_change' %}">
+                            <i class="fa-solid fa-lock me-2"></i> {% trans "Change your password" %}
+                        </a>
+                        <a class="list-group-item list-group-item-action nav-link"
+                           href="{% url 'person_team_join' %}">
+                            <i class="fa-solid fa-people-group me-2"></i> {% trans "Join a team" %}
+                        </a>
+                        {% if not person.auth_token %}
+                            <form method="post" action="{% url 'person_create_token' %}">
+                                {% csrf_token %}
+                                <button class="list-group-item list-group-item-action border-0" 
type="submit">
+                                    <i class="fa-solid fa-coins me-2"></i> {% trans "Create an 
authentication token" %}
+                                </button>
+                            </form>
+                        {% endif %}
 
-  {% if on_own_page %}
-  <span class="visible-xs-inline"><h2>{% trans "User Settings" %}</h2></span>
-  <div class="right_actions col-sm-3 col-xs-12">
-    <ul>
-      <li><a href="{% url 'person_detail_change' %}">{% trans "Change your details" %}</a></li>
-      <li><a href="{% url 'person_password_change' %}">{% trans "Change your password" %}</a></li>
-      <li><a href="{% url 'person_team_join' %}">{% trans "Join a team" %}</a></li>
-      {% if not person.auth_token %}
-      <li><form class="inline" method="post" action="{% url 'person_create_token' %}">
-            {% csrf_token %}
-            <button type="submit">{% trans "Create auth token" %}</button>
-          </form>
-      </li>
-      {% endif %}
-    </ul>
-  </div>
-  {% endif %}
-  {% block subcontent %}
-  {% endblock %}
-</div>
+                        {% if person.auth_token and on_own_page %}
+                            <form id="delete-token" method="post" action="{% url 'person_delete_token' %}">
+                                {% csrf_token %}
+                                <button class="list-group-item list-group-item-action border-0" 
type="submit">
+                                    <i class="fa-solid fa-trash me-2"></i></i> {% trans "Delete the 
authentication token" %}
+                                </button>
+                            </form>
+                        {% endif %}
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+        <hr>
+        {% block subcontent %}
+        {% endblock %}
+    </div>
 {% endblock %}
diff --git a/templates/people/person_overview.html b/templates/people/person_overview.html
index 88841a34..f40c128c 100644
--- a/templates/people/person_overview.html
+++ b/templates/people/person_overview.html
@@ -3,41 +3,42 @@
 
 {% load people %}
 
-<div class="person_detail col-sm-9">
-    <div class="image">{{ person|people_image }}</div>
-
-    <div class="txt">
-        <a class="name main_feature" href="{{ person.get_absolute_url }}">{{ person.name }}</a>
-        <br>
-
-        {% if person.webpage_url %}
-            <strong>{% trans "Web:" %}</strong>
-            <a class="url" href="{{ person.webpage_url }}">{{ person.webpage_url }}</a>
+<div class="person_detail">
+    <div class="row">
+        <div id="user_profile_image" class="col-2 align-middle">
+            {{ person|people_image }}
+        </div>
+        <div class="col-10">
+            <a class="name main_feature" href="{{ person.get_absolute_url }}">{{ person.name }}</a>
+            (@{{ person.username }})
             <br>
-        {% endif %}
 
-        {% if person.no_spam_email %}
-            <strong>{% trans "Email address:" %}</strong>
-            <a class="email" href="mailto:{{ person.no_spam_email }}">{{ person.no_spam_email }}</a>
-            <br>
-        {% endif %}
+            {% if person.webpage_url %}
+                <strong>{% trans "Web:" %}</strong>
+                <a class="url" href="{{ person.webpage_url }}">
+                    {{ person.webpage_url }}
+                </a>
+                <br>
+            {% endif %}
 
-        {% if person.irc_nick %}
-            <strong>{% trans "IRC account:" %}</strong>
-            <em>{{ person.irc_nick }}</em>
-            <br>
-        {% endif %}
+            {% if person.no_spam_email %}
+                <strong>{% trans "Email address:" %}</strong>
+                <a class="email" href="mailto:{{ person.no_spam_email }}">
+                    {{ person.no_spam_email }}
+                </a>
+                <br>
+            {% endif %}
+
+            {% if person.irc_nick %}
+                <strong>{% trans "IRC account:" %}</strong>
+                <em>{{ person.irc_nick }}</em>
+                <br>
+            {% endif %}
 
-        {% if person.auth_token and on_own_page %}
-            <form id="delete-token" method="post" action="{% url 'person_delete_token' %}">{% csrf_token %}
+            {% if person.auth_token and on_own_page %}
                 <strong>{% trans "Authentication token:" %}</strong>
-                <span id="person_auth_token">{{ person.auth_token }}</span>
-                <span class="hidden">
-                    <button type="submit" class="icon_button">
-                        <img src="{% static 'img/delete.svg' %}" width="20" title="{% trans 'Delete token' 
%}" alt="{% trans 'Delete token' %}">
-                    </button>
-                </span>
-            </form>
-        {% endif %}
+                <code id="person_auth_token">{{ person.auth_token }}</code>
+            {% endif %}
+        </div>
     </div>
 </div>