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,23 +19,32 @@
<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 %}
<div style="float:left; min-width: 80px; min-height: 80px;">
<a href="{% url 'assign_photo_email' email.id %}"> <a href="{% url 'assign_photo_email' email.id %}">
{% if email.photo %} {% if email.photo %}
<img class="thumbnail editable avatar-chooser" src="{% url 'raw_image' email.photo.id %}" alt=""> <img class="thumbnail editable avatar-chooser" src="{% url 'raw_image' email.photo.id %}" alt="">
{% else %} {% else %}
<img class="thumbnail editable avatar-chooser" src="{% static '/img/nobody/64.png' %}" alt="Nobody"> <img class="thumbnail editable avatar-chooser" src="{% static '/img/nobody/80.png' %}" alt="Nobody">
{% endif %} {% endif %}
</a> </a>
<div style="min-width: 280px;">{{ email.email }}</div> </div>
<br/> <div class="d-none d-sm-block" style="min-width: 320px;">{{ email.email|truncatechars:40 }}</div>
<div style="display:flex;">
<a class="btn btn-light action-item" href="{% url 'assign_photo_email' email.id %}" <a class="btn btn-light action-item" href="{% url 'assign_photo_email' email.id %}"
role="button" title="{% trans 'Change photo' %}"> role="button" title="{% trans 'Change photo' %}">
<i class="fa fa-edit"></i> <i class="fa fa-edit"></i>
@@ -45,20 +54,25 @@
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
<span class="d-none">{% trans 'Delete' %}</span> <span class="d-none">{% trans 'Delete' %}</span>
</button> </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 %}
<div style="float:left; min-width: 80px; min-height: 80px;">
<a href="{% url 'assign_photo_openid' openid.id %}"> <a href="{% url 'assign_photo_openid' openid.id %}">
{% if openid.photo %} {% if openid.photo %}
<img class="thumbnail editable avatar-chooser" src="{% url 'raw_image' openid.photo.id %}" alt=""></a> <img class="thumbnail editable avatar-chooser" src="{% url 'raw_image' openid.photo.id %}" alt="">
{% else %} {% else %}
<img class="thumbnail editable avatar-chooser" src="{% static '/img/nobody/64.png' %}" alt=""></a> <img class="thumbnail editable avatar-chooser" src="{% static '/img/nobody/80.png' %}" alt="">
{% endif %} {% endif %}
{{ openid.openid }} </a>
<br/> </div>
<div class="d-none d-sm-block" style="min-width: 320px;">{{ openid.openid|truncatechars:40 }}</div>
<div style="display:flex;">
<a class="btn btn-light action-item" href="{% url 'assign_photo_openid' openid.pk %}" <a class="btn btn-light action-item" href="{% url 'assign_photo_openid' openid.pk %}"
role="button" title="{% trans 'Change photo' %}"> role="button" title="{% trans 'Change photo' %}">
<i class="fa fa-edit"></i> <i class="fa fa-edit"></i>
@@ -68,6 +82,8 @@
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
<span class="d-none">{% trans 'Delete' %}</span> <span class="d-none">{% trans 'Delete' %}</span>
</button> </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;
}
}