More on styling

This commit is contained in:
Oliver Falk
2018-07-11 15:03:03 +02:00
parent 504f278d23
commit 20018cbf9f
2 changed files with 62 additions and 37 deletions

View File

@@ -19,55 +19,71 @@
<style> <style>
.action-item:hover span { .action-item:hover span {
display: inline !important; display: inline !important;
}
@media screen and (max-width: 320px) {
.action-item, .btn {
padding-left: 0.3em;
padding-right: 0.3em;
}
}
</style> </style>
{% if user.confirmedemail_set.count or user.confirmedopenid_set.count %} {% if user.confirmedemail_set.count or user.confirmedopenid_set.count %}
<p>{% trans 'You have the following confirmed identities:' %}</p> <p>{% trans 'You have the following confirmed identities:' %}</p>
<ul class="horizontal-list avatar-list"> <ul class="horizontal-list avatar-list">
{% for email in user.confirmedemail_set.all %} {% for email in user.confirmedemail_set.all %}
<li> <li style="float:left;">
<form action="{% url 'remove_confirmed_email' email.id %}" method="post">{% csrf_token %} <form action="{% url 'remove_confirmed_email' email.id %}" method="post">{% csrf_token %}
<a href="{% url 'assign_photo_email' email.id %}"> <div style="float:left; min-width: 80px; min-height: 80px;">
{% if email.photo %} <a href="{% url 'assign_photo_email' email.id %}">
<img class="thumbnail editable avatar-chooser" src="{% url 'raw_image' email.photo.id %}" alt=""> {% if email.photo %}
{% else %} <img class="thumbnail editable avatar-chooser" src="{% url 'raw_image' email.photo.id %}" alt="">
<img class="thumbnail editable avatar-chooser" src="{% static '/img/nobody/64.png' %}" alt="Nobody"> {% else %}
{% endif %} <img class="thumbnail editable avatar-chooser" src="{% static '/img/nobody/80.png' %}" alt="Nobody">
</a> {% endif %}
<div style="min-width: 280px;">{{ email.email }}</div> </a>
<br/> </div>
<a class="btn btn-light action-item" href="{% url 'assign_photo_email' email.id %}" <div class="d-none d-sm-block" style="min-width: 320px;">{{ email.email|truncatechars:40 }}</div>
role="button" title="{% trans 'Change photo' %}"> <div style="display:flex;">
<i class="fa fa-edit"></i> <a class="btn btn-light action-item" href="{% url 'assign_photo_email' email.id %}"
<span class="d-none">{% trans 'Change' %}</span> role="button" title="{% trans 'Change photo' %}">
</a> <i class="fa fa-edit"></i>
<button type="submit" class="btn btn-danger action-item" title="{% trans 'Remove' %}"> <span class="d-none">{% trans 'Change' %}</span>
<i class="fa fa-trash"></i> </a>
<span class="d-none">{% trans 'Delete' %}</span> <button type="submit" class="btn btn-danger action-item" title="{% trans 'Remove' %}">
</button> <i class="fa fa-trash"></i>
<span class="d-none">{% trans 'Delete' %}</span>
</button>
</div>
<div class="d-block d-sm-none" style="min-width: 320;">{{ email.email|truncatechars:40 }}</div>
</form> </form>
</li> </li>
{% endfor %} {% endfor %}
{% for openid in user.confirmedopenid_set.all %} {% for openid in user.confirmedopenid_set.all %}
<li> <li style="float:left;">
<form action="{% url 'remove_confirmed_openid' openid.id %}" method="post">{% csrf_token %} <form action="{% url 'remove_confirmed_openid' openid.id %}" method="post">{% csrf_token %}
<a href="{% url 'assign_photo_openid' openid.id %}"> <div style="float:left; min-width: 80px; min-height: 80px;">
{% if openid.photo %} <a href="{% url 'assign_photo_openid' openid.id %}">
<img class="thumbnail editable avatar-chooser" src="{% url 'raw_image' openid.photo.id %}" alt=""></a> {% if openid.photo %}
{% else %} <img class="thumbnail editable avatar-chooser" src="{% url 'raw_image' openid.photo.id %}" alt="">
<img class="thumbnail editable avatar-chooser" src="{% static '/img/nobody/64.png' %}" alt=""></a> {% else %}
{% endif %} <img class="thumbnail editable avatar-chooser" src="{% static '/img/nobody/80.png' %}" alt="">
{{ openid.openid }} {% endif %}
<br/> </a>
<a class="btn btn-light action-item" href="{% url 'assign_photo_openid' openid.pk %}" </div>
role="button" title="{% trans 'Change photo' %}"> <div class="d-none d-sm-block" style="min-width: 320px;">{{ openid.openid|truncatechars:40 }}</div>
<i class="fa fa-edit"></i> <div style="display:flex;">
<span class="d-none">{% trans 'Change' %}</span> <a class="btn btn-light action-item" href="{% url 'assign_photo_openid' openid.pk %}"
</a> role="button" title="{% trans 'Change photo' %}">
<button type="submit" class="btn btn-danger action-item" title="{% trans 'Remove' %}"> <i class="fa fa-edit"></i>
<i class="fa fa-trash"></i> <span class="d-none">{% trans 'Change' %}</span>
<span class="d-none">{% trans 'Delete' %}</span> </a>
</button> <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>
</div>
<div class="d-block d-sm-none" style="min-width: 320;">{{ openid.openid|truncatechars:40 }}</div>
</form> </form>
</li> </li>
{% endfor %} {% endfor %}

View File

@@ -183,3 +183,12 @@ ul li {
.fas, .fab { .fas, .fab {
color: #dbc40d; color: #dbc40d;
} }
@media screen and (max-width: 320px) {
body {
font-size: 90%;
}
h1 {
font-size: 1.2em;
}
}