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:
parent
4c23404e76
commit
775162559e
@ -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; }
|
||||
}
|
||||
|
@ -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 %}
|
||||
|
||||
{% if is_self %}
|
||||
<a href="/@/{{ user.username }}/edit" class="button inline-block">{{ "Edit your profile" | _ }}</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% if is_remote %}
|
||||
|
Loading…
Reference in New Issue
Block a user