mirror of
https://git.linux-kernel.at/oliver/ivatar.git
synced 2025-11-17 21:48:02 +00:00
UX enhancements for Bluesky
This commit is contained in:
Oliver Falk
@@ -12,23 +12,24 @@
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
{% for photo in photos %}
|
||||
<div class="panel panel-tortin" style="width:182px;float:left;margin-left:20px">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<input type="checkbox" name="photo_{{photo.service_name}}" id="photo_{{photo.service_name}}" checked="checked">
|
||||
<label for="photo_{{photo.service_name}}" style="width:100%">
|
||||
{{ photo.service_name }}
|
||||
{% if photo.service_url %}
|
||||
<a href="{{ photo.service_url }}" style="float:right;color:#FFFFFF"><i class="fa fa-external-link"></i></a>
|
||||
{% endif %}
|
||||
</label>
|
||||
</h3></div>
|
||||
<div class="panel-body">
|
||||
<center>
|
||||
<img src="{{ photo.thumbnail_url }}" style="max-width: 80px; max-height: 80px;" alt="{{ photo.service_name }} image">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-tortin" style="width:182px;float:left;margin-left:20px">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<input type="checkbox" name="photo_{{photo.service_name}}" id="photo_{{photo.service_name}}" checked="checked">
|
||||
<label for="photo_{{photo.service_name}}" style="width:100%">
|
||||
{{ photo.service_name }}
|
||||
{% if photo.service_url %}
|
||||
<a href="{{ photo.service_url }}" style="float:right;color:#FFFFFF"><i class="fa fa-external-link"></i></a>
|
||||
{% endif %}
|
||||
</label>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<center>
|
||||
<img src="{{ photo.thumbnail_url }}" style="max-width: 80px; max-height: 80px;" alt="{{ photo.service_name }} image">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p>
|
||||
|
||||
@@ -17,34 +17,29 @@ outline: inherit;
|
||||
</style>
|
||||
<h1>{% blocktrans with email.email as email_address %}Choose a photo for {{ email_address }}{% endblocktrans %}</h1>
|
||||
|
||||
{% if not user.photo_set.count %}
|
||||
{% if user.photo_set.count %}
|
||||
<p>{% trans 'Here are the pictures you have uploaded, click on the one you wish to associate with this email address:' %}</p>
|
||||
<div class="row">
|
||||
{% for photo in user.photo_set.all %}
|
||||
<form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<input type="hidden" name="photo_id" value="{{ photo.id }}">
|
||||
<button type="submit" name="photo{{ photo.id }}" class="nobutton">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{% if email.photo.id == photo.id %}<i class="fa fa-check"></i>{% endif %} {% trans 'Image' %} {{ forloop.counter }}</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="height:130px">
|
||||
<center>
|
||||
<img style="max-height:100px;max-width:100px" src="{% url 'raw_image' photo.id %}">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</form>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% url 'upload_photo' as upload_url %}
|
||||
<h4>{% blocktrans %}You need to <a href="{{ upload_url }}">upload some photos</a> first!{% endblocktrans %}</h4>
|
||||
|
||||
<p><a href="{% url 'profile' %}" class="button">{% trans 'Back to your profile' %}</a></p>
|
||||
|
||||
{% else %}
|
||||
|
||||
<p>{% trans 'Here are the pictures you have uploaded, click on the one you wish to associate with this email address:' %}</p>
|
||||
<div class="row">
|
||||
{% for photo in user.photo_set.all %}
|
||||
<form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<input type="hidden" name="photo_id" value="{{ photo.id }}">
|
||||
<button type="submit" name="photo{{ photo.id }}" class="nobutton">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{% if email.photo.id == photo.id %}<i class="fa fa-check"></i>{% endif %} {% trans 'Image' %} {{ forloop.counter }}</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="height:130px">
|
||||
<center>
|
||||
<img style="max-height:100px;max-width:100px" src="{% url 'raw_image' photo.id %}">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</form>
|
||||
{% endfor %}
|
||||
<form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<button type="submit" name="photoNone" class="nobutton">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
@@ -73,25 +68,28 @@ outline: inherit;
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div style="height:8px"></div>
|
||||
<a href="{% url 'upload_photo' %}" class="button">{% blocktrans %}Upload a new one{% endblocktrans %}</a>
|
||||
<a href="{% url 'import_photo' email.pk %}" class="button">{% blocktrans %}Import from other services{% endblocktrans %}</a>
|
||||
|
||||
<div style="height:8px"></div>
|
||||
<form action="{% url 'assign_bluesky_handle_to_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
|
||||
{% if email.bluesky_handle %}
|
||||
<input type="text" name="bluesky_handle" required value="{{ email.bluesky_handle }}" class="form-control" id="id_bluesky_handle">
|
||||
{% else %}
|
||||
<input type="text" name="bluesky_handle" required value="" placeholder="{% trans 'Bluesky handle' %}" class="form-control" id="id_bluesky_handle">
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
<div style="height:8px"></div>
|
||||
<a href="{% url 'upload_photo' %}" class="button">{% blocktrans %}Upload a new one{% endblocktrans %}</a>
|
||||
<a href="{% url 'import_photo' %}" class="button">{% blocktrans %}Import from other services{% endblocktrans %}</a>
|
||||
</div>
|
||||
<button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
|
||||
</form>
|
||||
|
||||
{% endif %}
|
||||
<div style="height:8px"></div>
|
||||
<form action="{% url 'assign_bluesky_handle_to_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
|
||||
{% if email.bluesky_handle %}
|
||||
<input type="text" name="bluesky_handle" required value="{{ email.bluesky_handle }}" class="form-control" id="id_bluesky_handle">
|
||||
{% else %}
|
||||
<input type="text" name="bluesky_handle" required value="" placeholder="{% trans 'Bluesky handle' %}" class="form-control" id="id_bluesky_handle">
|
||||
{% endif %}
|
||||
</div>
|
||||
<button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:40px"></div>
|
||||
{% endblock content %}
|
||||
|
||||
@@ -18,64 +18,65 @@ outline: inherit;
|
||||
<h1>{% blocktrans with openid.openid as openid_address %}Choose a photo for {{ openid_address }}{% endblocktrans %}</h1>
|
||||
|
||||
{% if not user.photo_set.count %}
|
||||
|
||||
{% url 'upload_photo' as upload_url %}
|
||||
<h3>{% blocktrans %}You need to <a href="{{ upload_url }}">upload some photos</a> first!{% endblocktrans %}</h3>
|
||||
|
||||
<p><a href="{% url 'profile' %}" class="button">{% trans 'Back to your profile' %}</a></p>
|
||||
|
||||
{% else %}
|
||||
|
||||
<p>{% trans 'Here are the pictures you have uploaded, click on the one you wish to associate with this openid address:' %}</p>
|
||||
<div class="row">
|
||||
{% for photo in user.photo_set.all %}
|
||||
<form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<input type="hidden" name="photo_id" value="{{ photo.id }}">
|
||||
<button type="submit" name="photo{{ photo.id }}" class="nobutton">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{% if openid.photo.id == photo.id %}<i class="fa fa-check"></i>{% endif %} {% trans 'Image' %} {{ forloop.counter }}</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="height:130px">
|
||||
<center>
|
||||
<img style="max-height:100px;max-width:100px" src="{% url 'raw_image' photo.id %}">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</form>
|
||||
{% endfor %}
|
||||
<form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<button type="submit" name="photoNone" class="nobutton">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{% if openid.photo.id == photo.id %}<i class="fa fa-check"></i>{% endif %} {% trans 'No image' %}</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="height:130px">
|
||||
<center>
|
||||
<img style="max-height:100px;max-width:100px" src="/static/img/nobody/100.png">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div style="height:8px"></div>
|
||||
<a href="{% url 'upload_photo' %}" class="button">{% blocktrans %}upload a new one{% endblocktrans %}</a>
|
||||
|
||||
<div style="height:8px"></div>
|
||||
<form action="{% url 'assign_bluesky_handle_to_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
|
||||
{% if openid.bluesky_handle %}
|
||||
<input type="text" name="bluesky_handle" required value="{{ openid.bluesky_handle }}" class="form-control" id="id_bluesky_handle">
|
||||
{% else %}
|
||||
<input type="text" name="bluesky_handle" required value="" placeholder="{% trans 'Bluesky handle' %}" class="form-control" id="id_bluesky_handle">
|
||||
{% endif %}
|
||||
<p>{% trans 'Here are the pictures you have uploaded, click on the one you wish to associate with this openid address:' %}</p>
|
||||
<div class="row">
|
||||
{% for photo in user.photo_set.all %}
|
||||
<form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<input type="hidden" name="photo_id" value="{{ photo.id }}">
|
||||
<button type="submit" name="photo{{ photo.id }}" class="nobutton">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{% if openid.photo.id == photo.id %}<i class="fa fa-check"></i>{% endif %} {% trans 'Image' %} {{ forloop.counter }}</h3>
|
||||
</div>
|
||||
<button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
|
||||
</form>
|
||||
<div class="panel-body" style="height:130px">
|
||||
<center>
|
||||
<img style="max-height:100px;max-width:100px" src="{% url 'raw_image' photo.id %}">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</form>
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
<div class="row">
|
||||
<form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<button type="submit" name="photoNone" class="nobutton">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{% if openid.photo.id == photo.id %}<i class="fa fa-check"></i>{% endif %} {% trans 'No image' %}</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="height:130px">
|
||||
<center>
|
||||
<img style="max-height:100px;max-width:100px" src="/static/img/nobody/100.png">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div style="height:8px"></div>
|
||||
<a href="{% url 'upload_photo' %}" class="button">{% blocktrans %}upload a new one{% endblocktrans %}</a>
|
||||
<a href="{% url 'import_photo' %}" class="button">{% blocktrans %}Import from other services{% endblocktrans %}</a>
|
||||
</div>
|
||||
|
||||
<div style="height:8px"></div>
|
||||
<form action="{% url 'assign_bluesky_handle_to_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
|
||||
{% if openid.bluesky_handle %}
|
||||
<input type="text" name="bluesky_handle" required value="{{ openid.bluesky_handle }}" class="form-control" id="id_bluesky_handle">
|
||||
{% else %}
|
||||
<input type="text" name="bluesky_handle" required value="" placeholder="{% trans 'Bluesky handle' %}" class="form-control" id="id_bluesky_handle">
|
||||
{% endif %}
|
||||
</div>
|
||||
<button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:40px"></div>
|
||||
{% endblock content %}
|
||||
|
||||
@@ -5,37 +5,37 @@
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
input[type=checkbox] {display:none}
|
||||
input[type=checkbox] + label:before {
|
||||
font-family: FontAwesome;
|
||||
display: inline-block;
|
||||
}
|
||||
input[type=checkbox] + label:before {content: "\f096"}
|
||||
input[type=checkbox] + label:before {letter-spacing: 5px}
|
||||
input[type=checkbox]:checked + label:before {content: "\f046"}
|
||||
input[type=checkbox]:checked + label:before {letter-spacing: 3px}
|
||||
input[type=checkbox] {display:none}
|
||||
input[type=checkbox] + label:before {
|
||||
font-family: FontAwesome;
|
||||
display: inline-block;
|
||||
}
|
||||
input[type=checkbox] + label:before {content: "\f096"}
|
||||
input[type=checkbox] + label:before {letter-spacing: 5px}
|
||||
input[type=checkbox]:checked + label:before {content: "\f046"}
|
||||
input[type=checkbox]:checked + label:before {letter-spacing: 3px}
|
||||
</style>
|
||||
<h1>{% trans 'Import photo' %}</h1>
|
||||
|
||||
{% if not email_id %}
|
||||
<div style="max-width:640px">
|
||||
<form action="{% url 'import_photo' %}" method="get" id="check_mail_form">
|
||||
<div class="form-group">
|
||||
<label for="check_email_addr">{% trans 'Email Address' %}</label>
|
||||
<input type="text" name="check_email_addr" class="form-control" value="{{ email_addr }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="button">{% trans 'Check' %}</button>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
document.getElementById('check_mail_form').onsubmit =
|
||||
function(self) {
|
||||
window.location.href = "{% url 'import_photo' %}" + document.getElementsByName('check_email_addr')[0].value;
|
||||
return false;
|
||||
};
|
||||
</script>
|
||||
</div>
|
||||
<div style="max-width:640px">
|
||||
<form action="{% url 'import_photo' %}" method="get" id="check_mail_form">
|
||||
<div class="form-group">
|
||||
<label for="check_email_addr">{% trans 'Email Address' %}</label>
|
||||
<input type="text" name="check_email_addr" class="form-control" value="{{ email_addr }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="button">{% trans 'Check' %}</button>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
document.getElementById('check_mail_form').onsubmit =
|
||||
function(self) {
|
||||
window.location.href = "{% url 'import_photo' %}" + document.getElementsByName('check_email_addr')[0].value;
|
||||
return false;
|
||||
};
|
||||
</script>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% include '_import_photo_form.html' %}
|
||||
|
||||
Reference in New Issue
Block a user