Don't compress avatars

Fixes #210
This commit is contained in:
Bat 2018-09-09 21:41:55 +01:00
parent de3707983a
commit fcdd3d4c1a
7 changed files with 19 additions and 8 deletions

View File

@ -737,8 +737,9 @@ figcaption {
/** Avatars **/ /** Avatars **/
.avatar { .avatar {
background-position: center;
background-size: cover;
border-radius: 100%; border-radius: 100%;
text-align: center; /* for alt-text */
} }
.avatar.small { .avatar.small {

View File

@ -1,3 +1,5 @@
{% import "macros" as macros %}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
@ -33,8 +35,8 @@
<i class="icon icon-log-out" aria-label="{{ "Log Out" | _ }}"></i> <i class="icon icon-log-out" aria-label="{{ "Log Out" | _ }}"></i>
<span class="mobile-label">{{ "Log Out" | _ }}</span> <span class="mobile-label">{{ "Log Out" | _ }}</span>
</a> </a>
<a href="/me"> <a href="/me" title="{{ "My account" | _ }}">
<img class="avatar small" src="{{ account.avatar }}" alt="{{ "My account" | _ }}"> {{ macros::avatar(user=account) }}
<span class="mobile-label">{{ "My account" | _ }}</span> <span class="mobile-label">{{ "My account" | _ }}</span>
</a> </a>
{% else %} {% else %}

View File

@ -29,7 +29,7 @@ About {{ instance.name }}
</div> </div>
<div> <div>
<p>{{ "Administred by" | _ }}</p> <p>{{ "Administred by" | _ }}</p>
<img class="avatar small" src="{{ admin.avatar }}" alt="{{ admin.name }}"> {{ macros::avatar(user=admin) }}
<p><a href="/@/{{ admin.fqn }}">{{ admin.name }}</a><small>(@{{ admin.fqn }})</small></p> <p><a href="/@/{{ admin.fqn }}">{{ admin.name }}</a><small>(@{{ admin.fqn }})</small></p>
</div> </div>
</section> </section>

View File

@ -13,7 +13,7 @@ Users
<div class="list"> <div class="list">
{% for user in users %} {% for user in users %}
<div class="flex"> <div class="flex">
<img src="{{ user.avatar }}" class="avatar small padded" alt="{{ user.name }}"> {{ macros::avatar(user=user) }}
<p class="grow"> <p class="grow">
<a href="/@/{{ user.fqn }}">{{ user.name }}</a> <a href="/@/{{ user.fqn }}">{{ user.name }}</a>
<small>@{{ user.username }}</small> <small>@{{ user.username }}</small>

View File

@ -52,7 +52,7 @@
{% macro comment(comm) %} {% macro comment(comm) %}
<div class="comment" id="comment-{{ comm.id }}"> <div class="comment" id="comment-{{ comm.id }}">
<a class="author" href="/@/{{ comm.author.fqn }}/"> <a class="author" href="/@/{{ comm.author.fqn }}/">
<img class="avatar small padded" src="{{ comm.author.avatar }}" alt="{{ comm.author.name }}"> {{ macros::avatar(user=comm.author, pad=true) }}
<span class="display-name">{{ comm.author.name }}</span> <span class="display-name">{{ comm.author.name }}</span>
<small>@{{ comm.author.fqn }}</small> <small>@{{ comm.author.fqn }}</small>
</a> </a>
@ -86,3 +86,11 @@
</div> </div>
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}
{% macro avatar(user, size="small", pad=true) %}
<img
class="avatar {{ size }} {% if pad %}padded{% endif %}"
style="background-image: url('{{ user.avatar }}');"
title="{{ "{{ name }}'s avatar" | _(name=user.name) }}"
aria-label="{{ "{{ name }}'s avatar" | _(name=user.name) }}"
>
{% endmacro %}

View File

@ -42,7 +42,7 @@
{% endfor %} {% endfor %}
</ul> </ul>
<div class="flex"> <div class="flex">
<img src="{{ author.avatar }}" alt="{{ author.name }}" class="avatar medium padded"> {{ macros::avatar(user=author, pad=true, size="medium") }}
<div class="grow"> <div class="grow">
<h2><a href="/@/{{ author.fqn }}">{{ author.name }}</a></h2> <h2><a href="/@/{{ author.fqn }}">{{ author.name }}</a></h2>
<p>{{ author.summary | safe }}</h2> <p>{{ author.summary | safe }}</h2>

View File

@ -1,6 +1,6 @@
<div class="user"> <div class="user">
<div class="flex wrap"> <div class="flex wrap">
<img class="avatar medium" src="{{ user.avatar }}" alt="{{ "{{ name}}'s avatar'" | _(name=user.name) }}"> {{ macros::avatar(user=user, size="medium") }}
<h1 class="grow flex vertical"> <h1 class="grow flex vertical">
{{ user.name }} {{ user.name }}