From 556f48bfe71be7ed986b620ba3e6c2ae74ae49e3 Mon Sep 17 00:00:00 2001
From: Oliver Falk <oliver@linux-kernel.at>
Date: Wed, 11 Jul 2018 13:05:42 +0200
Subject: [PATCH] More buttons, better styling

---
 ivatar/ivataraccount/templates/profile.html   | 114 ++++++++++++++----
 .../ivataraccount/templates/upload_photo.html |  45 ++++---
 2 files changed, 116 insertions(+), 43 deletions(-)

diff --git a/ivatar/ivataraccount/templates/profile.html b/ivatar/ivataraccount/templates/profile.html
index 8e0488a..094fb4a 100644
--- a/ivatar/ivataraccount/templates/profile.html
+++ b/ivatar/ivataraccount/templates/profile.html
@@ -1,6 +1,7 @@
 {% extends 'base.html' %}                                                                                                                      
 {% load i18n %}
 {% load static %}
+{% load bootstrap4 %}
 
 {% block title %}{% trans 'Your Profile' %}{% endblock title %}
 
@@ -15,32 +16,60 @@
   {% endif %}
 </h1>
 
+<style>
+.action-item:hover span {
+    display: inline !important;
+</style>
+
 {% if user.confirmedemail_set.count or user.confirmedopenid_set.count %}
-<p>{% trans 'You have the following confirmed email addresses and OpenIDs:' %}</p>
+<p>{% trans 'You have the following confirmed identities:' %}</p>
 <ul class="horizontal-list avatar-list">
     {% for email in user.confirmedemail_set.all %}
-        <li><form action="{% url 'remove_confirmed_email' email.id %}" method="post">{% csrf_token %}
-        <a href="{% url 'assign_photo_email' email.id %}">
-        {% if email.photo %}
-            <img class="thumbnail editable avatar-chooser" src="{% url 'raw_image' email.photo.id %}" alt=""></a>
-        {% else %}
-            <img class="thumbnail editable avatar-chooser" src="{% static '/img/nobody/64.png' %}" alt="Nobody"></a>
-        {% endif %}
-        {{ email.email }}
-        <br><a href="{% url 'assign_photo_email' email.id %}">{% trans 'Change photo' %}</a>
-        <br><br><input type="image" src="{% static '/img/delete_button.png' %}" value="{% trans 'Remove' %}"></form></li>
+      <li>
+        <form action="{% url 'remove_confirmed_email' email.id %}" method="post">{% csrf_token %}
+          <a href="{% url 'assign_photo_email' email.id %}">
+            {% if email.photo %}
+                <img class="thumbnail editable avatar-chooser" src="{% url 'raw_image' email.photo.id %}" alt="">
+            {% else %}
+                <img class="thumbnail editable avatar-chooser" src="{% static '/img/nobody/64.png' %}" alt="Nobody">
+            {% endif %}
+          </a>
+          <div style="min-width: 280px;">{{ email.email }}</div>
+          <br/>
+          <a class="btn btn-light action-item" href="{% url 'assign_photo_email' email.id %}"
+            role="button" title="{% trans 'Change photo' %}">
+            <i class="fa fa-edit"></i>
+            <span class="d-none">{% trans 'Change' %}</span>
+          </a>
+          <button type="submit" class="btn btn-danger action-item" title="{% trans 'Remove' %}">
+            <i class="fa fa-trash"></i>
+            <span class="d-none">{% trans 'Delete' %}</span>
+          </button>
+        </form>
+      </li>
     {% endfor %}
     {% for openid in user.confirmedopenid_set.all %}
-        <li><form action="{% url 'remove_confirmed_openid' openid.id %}" method="post">{% csrf_token %}
-        <a href="{% url 'assign_photo_openid' openid.id %}">
-        {% if openid.photo %}
+      <li>
+        <form action="{% url 'remove_confirmed_openid' openid.id %}" method="post">{% csrf_token %}
+          <a href="{% url 'assign_photo_openid' openid.id %}">
+          {% if openid.photo %}
             <img class="thumbnail editable avatar-chooser" src="{% url 'raw_image' openid.photo.id %}" alt=""></a>
-        {% else %}
+          {% else %}
             <img class="thumbnail editable avatar-chooser" src="{% static '/img/nobody/64.png' %}" alt=""></a>
-        {% endif %}
-        {{openid.openid}}
-        <br><a href="{% url 'assign_photo_openid' openid.id %}">{% trans 'Change photo' %}</a>
-        <br><br><input type="image" src="{% static '/img/delete_button.png' %}" value="{% trans 'Remove' %}"></form></li>
+          {% endif %}
+          {{ openid.openid }}
+          <br/>
+          <a class="btn btn-light action-item" href="{% url 'assign_photo_openid' openid.pk %}"
+            role="button" title="{% trans 'Change photo' %}">
+            <i class="fa fa-edit"></i>
+            <span class="d-none">{% trans 'Change' %}</span>
+          </a>
+          <button type="submit" class="btn btn-danger action-item" title="{% trans 'Remove' %}">
+            <i class="fa fa-trash"></i>
+            <span class="d-none">{% trans 'Delete' %}</span>
+          </button>
+        </form>
+      </li>
     {% endfor %}
 </ul>
 <div class="clear-both"></div>
@@ -50,12 +79,35 @@
 <p>{% trans 'You have the following unconfirmed email addresses and OpenIDs:' %}</p>
 <ul class="vertical-list">
     {% for email in user.unconfirmedemail_set.all %}
-        <li><form action="{% url 'remove_unconfirmed_email' email.id %}" method="post">{% csrf_token %}{{ email.email }}
-        <input type="image" src="{% static '/img/delete_button.png' %}" value="{% trans 'Remove' %}"></form>{# TODO: (expires in xx hours) #}</li>
+      <li>
+        <form action="{% url 'remove_unconfirmed_email' email.id %}" method="post">{% csrf_token %}
+          {{ email.email }}
+          <br/>
+          <!-- TODO: Confirmation mail URL -->
+          <a class="btn btn-info btn-sm action-item" href="resend_confirmation_mail"
+            role="button" title="{% trans 'Resend confirmation mail' %}" style="color:white;">
+            <i class="fa fa-envelope"></i>
+            <span class="d-none">{% trans 'Resend confirmation mail' %}</span>
+          </a>
+          <button type="submit" class="btn btn-danger btn-sm action-item" title="{% trans 'Remove' %}">
+            <i class="fa fa-trash"></i>
+            <span class="d-none">{% trans 'Delete' %}</span>
+          </button>
+        </form>
+        {# TODO: (expires in xx hours) #}
+      </li>
     {% endfor %}
     {% for openid in user.unconfirmedopenid_set.all %}
-        <li><form action="{% url 'remove_unconfirmed_openid' openid.id %}" method="post">{% csrf_token %}{{ openid.openid }}
-        <input type="image" src="{% static '/img/delete_button.png' %}" value="{% trans 'Remove' %}"></form>{# TODO: (expires in xx hours) #}</li>
+      <li>
+        <form action="{% url 'remove_unconfirmed_openid' openid.id %}" method="post">{% csrf_token %}
+          {{ openid.openid }}
+          <br/>
+          <button type="submit" class="btn btn-danger btn-sm" title="{% trans 'Remove' %}">
+            <i class="fa fa-trash"></i>
+          </button>
+        </form>
+        {# TODO: (expires in xx hours) #}
+      </li>
     {% endfor %}
 </ul>
 {% endif %}
@@ -71,9 +123,19 @@
 {% if user.photo_set.count %}
 <p>{% trans 'Here are the photos you have uploaded/imported:' %}</p>
 <ul class="horizontal-list avatar-list centered">
-{% for photo in user.photo_set.all %}
-<li><a href="{% url 'raw_image' photo.id %}"><img class="thumbnail" src="{% url 'raw_image' photo.id %}" title="{% blocktrans with photo.add_date as datetime %}Uploaded on {{ datetime }}{% endblocktrans %}" alt="{% blocktrans with photo.add_date as datetime %}Uploaded on {{ datetime }}{% endblocktrans %}"></a><br>
-    <a href="{% url 'delete_photo' photo.id %}">{% trans 'Delete' %}</a></li>
+  {% for photo in user.photo_set.all %}
+    <li>
+      <a href="{% url 'raw_image' photo.id %}">
+        <img class="thumbnail" src="{% url 'raw_image' photo.id %}"
+          title="{% blocktrans with photo.add_date as datetime %}Uploaded on {{ datetime }}{% endblocktrans %}"
+          alt="{% blocktrans with photo.add_date as datetime %}Uploaded on {{ datetime }}{% endblocktrans %}">
+      </a>
+      <div style="padding-top: 2px; min-width: 100px;"/>
+      <a class="btn btn-danger btn-sm action-item" href="{% url 'delete_photo' photo.pk %}"
+        role="button" title="{% trans 'Delete' %}" style="color:white;">
+        <i class="fa fa-trash"></i>
+        <span class="d-none">Delete</span>
+      </a>
 {% endfor %}
 </ul>
 {% endif %}
diff --git a/ivatar/ivataraccount/templates/upload_photo.html b/ivatar/ivataraccount/templates/upload_photo.html
index 6f98ed9..36000ab 100644
--- a/ivatar/ivataraccount/templates/upload_photo.html
+++ b/ivatar/ivataraccount/templates/upload_photo.html
@@ -1,6 +1,7 @@
 {% extends 'base.html' %}                                                                                                                      
 {% load i18n %}
 {% load static %}
+{% load bootstrap4 %}
 
 {% block title %}{% trans 'Upload a new photo' %} - ivatar{% endblock title %}
 
@@ -8,25 +9,35 @@
 <link rel="prefetch" href="{% static '/js/jcrop.js' %}">{% endblock header %}
 
 {% block content %}
+  <h1>{% trans 'Upload a new photo' %}</h1>
 
-<h1>{% trans 'Upload a new photo' %}</h1>
+  <form enctype="multipart/form-data" action="{% url 'upload_photo' %}" method="post">{% csrf_token %}
+    {% if email %}<input type="hidden" name="email" value="{{ email }}">{% endif %}
+    {% if openid %}<input type="hidden" name="openid" value="{{ openid }}">{% endif %}
 
-<form enctype="multipart/form-data" action="{% url 'upload_photo' %}" method="post">{% csrf_token %}
-{% if email %}<input type="hidden" name="email" value="{{email}}">{% endif %}
-{% if openid %}<input type="hidden" name="openid" value="{{openid}}">{% endif %}
+    {{ form.photo.errors }}
+    <div class="form-group">
+      {{ form.photo.label_tag }}
+      <input id="id_photo" type="file" name="photo" accept="image/*">
+    </div>
+    {% blocktrans with max_file_size|filesizeformat as max_size %}Maximum file size of {{ max_size }}.{% endblocktrans %}</p>
 
-{{ form.photo.errors }}
-<p class="aligned wide">{{ form.photo.label_tag }} <input id="id_photo" type="file" name="photo" accept="image/*">
-<br>{% blocktrans with max_file_size|filesizeformat as max_size %}Maximum file size of {{ max_size }}.{% endblocktrans %}</p>
-
-<ul class="conditions">
-  <li>{{ form.not_porn.errors }}{{ form.not_porn }} <label for="id_not_porn">{{ form.not_porn.label }}</label></li>
-  <li>{{ form.can_distribute.errors }}{{ form.can_distribute }} <label for="id_can_distribute">{{ form.can_distribute.label }}</label></li>
-</ul>
-
-<p><input type="submit" value="{% trans 'Upload' %}" />
-&nbsp;<a id="cancel-link" href="{% url 'profile' %}">{% trans 'Cancel' %}</a></p>
-
-</form>
+    <div class="form-group">
+      <ul class="conditions">
+        <li>
+          {{ form.not_porn.errors }} {{ form.not_porn }}
+          <label for="id_not_porn">{{ form.not_porn.label }}</label>
+        </li>
+        <li>
+          {{ form.can_distribute.errors }} {{ form.can_distribute }}
+          <label for="id_can_distribute">{{ form.can_distribute.label }}</label>
+        </li>
+      </ul>
+    </div>
 
+    {% buttons %}
+      <button type="submit" class="btn btn-primary">{% trans 'Upload' %}</button>
+      <button type="cancel" class="btn btn-danger">{% trans 'Cancel' %}</button>
+    {% endbuttons %}
+  </form>
 {% endblock content %}