haskal
/
Plume
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
static/css/main.css
View File

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

10
templates/users/header.html.tera
View File

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