maurice/snix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(templates): Fix layout of user info on desktop view

Browse source
This commit is contained in:
Vincent Ambo 2018-05-22 10:17:34 +02:00 • committed by Vincent Ambo
parent ff697ff792
commit d90dc2d77f
2 changed files with 10 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
static/styles.css
View file

@ -95,10 +95,16 @@ html, body {
max-width: 860px; max-width: 860px;
} }
.converse .mdl-card .avatar-card { .converse .mdl-card .avatar-card {
margin-left: auto; display: flex;
margin-right: auto; flex-direction: column;
text-align: center;
margin-top: 30px; margin-top: 30px;
} }
.desktop-avatar {
width: 80px;
margin-right: auto;
margin-left: auto;
}
.mobile-avatar { .mobile-avatar {
width: 30px; width: 30px;
border-radius: 8px; border-radius: 8px;

5
templates/thread.html
View file

@ -38,9 +38,8 @@
{# card to display avatars on desktop #} {# card to display avatars on desktop #}
<div class="mdl-card mdl-shadow--2dp mdl-cell--2-col mdl-cell--hide-phone mdl-cell--hide-tablet avatar-box"> <div class="mdl-card mdl-shadow--2dp mdl-cell--2-col mdl-cell--hide-phone mdl-cell--hide-tablet avatar-box">
<div class="avatar-card"> <div class="avatar-card">
<img src="https://www.gravatar.com/avatar/{{ post.author_gravatar }}?d=monsterid&s=160" style="width: 80px;"/> <img class="desktop-avatar" src="https://www.gravatar.com/avatar/{{ post.author_gravatar }}?d=monsterid&s=160" />
<br> <p class="user-name">{{ post.author_name }}</p>
<span class="user-name">{{ post.author_name }}</span>
</div> </div>
</div> </div>
{# card for main post content #} {# card for main post content #}