Improve user page on small screens

Center avatar's alt text, since the only fix to display them on a single line would
break valid avatars
This commit is contained in:
Bat 2018-09-08 09:55:59 +01:00
parent 4c23404e76
commit 775162559e
2 changed files with 24 additions and 9 deletions

View File

@ -542,10 +542,10 @@ main .article-meta .tags li a {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 0;
margin: 0px;
}
.badge {
margin-left: 1em;
margin-right: 1em;
padding: 0.35em 1em;
background: #F4F4F4;
@ -664,6 +664,16 @@ main .article-meta .tags li a {
flex: 1;
}
.flex.vertical {
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
.flex.vertical small {
margin: initial;
}
.left-icon {
align-self: center;
padding: 1em;
@ -718,6 +728,7 @@ figcaption {
.avatar {
border-radius: 100%;
text-align: center; /* for alt-text */
}
.avatar.small {
@ -875,4 +886,6 @@ figcaption {
align-items: center;
}
body > footer * { margin: 1em auto; }
.flex.wrap { flex-direction: column; }
}

View File

@ -1,12 +1,13 @@
<div class="user">
<div class="flex">
<div class="flex wrap">
<img class="avatar medium" src="{{ user.avatar }}" alt="{{ "{{ name}}'s avatar'" | _(name=user.name) }}">
<h1 class="grow">
<h1 class="grow flex vertical">
{{ user.name }}
<small>@{{ user.fqn }}</small>
</h1>
<p>
{% if user.is_admin %}
<span class="badge">{{ "Admin" | _ }}</span>
{% endif %}
@ -14,10 +15,11 @@
{% if is_self %}
<span class="badge">{{ "It is you" | _ }}</span>
{% endif %}
</h1>
{% if is_self %}
<a href="/@/{{ user.username }}/edit" class="button inline-block">{{ "Edit your profile" | _ }}</a>
{% endif %}
</p>
</div>
{% if is_remote %}