user-icon styles for new teaser partials

main
Julian Lam 10 years ago
parent 2824a0f9db
commit a5a3889e2b

@ -107,6 +107,15 @@
display: none; display: none;
} }
} }
.user-icon {
display: inline-block;
border-radius: 50%;
height: 24px;
width: 24px;
line-height: 24px;
font-size: 1.5rem;
}
} }
} }
} }

@ -81,6 +81,15 @@
.fa-stack { .fa-stack {
font-size: 90%; font-size: 90%;
} }
.card .user-icon {
display: inline-block;
border-radius: 50%;
height: 24px;
width: 24px;
line-height: 24px;
font-size: 1.5rem;
}
} }
&:last-child li { &:last-child li {

@ -3,7 +3,13 @@
<!-- IF @first --> <!-- IF @first -->
<div component="category/posts"> <div component="category/posts">
<p> <p>
<a href="{config.relative_path}/user/{../user.userslug}"><img class="user-img" title="{../user.username}" src="{../user.picture}" /></a> <a href="{config.relative_path}/user/{../user.userslug}">
<!-- IF ../user.picture -->
<img class="user-img" title="{../user.username}" src="{../user.picture}" />
<!-- ELSE -->
<span class="user-icon user-img" style="background-color: {../user.icon:bgColor};">{../user.icon:text}</span>
<!-- ENDIF ../user.picture -->
</a>
<a class="permalink" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->"> <a class="permalink" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
<small class="timeago" title="{../relativeTime}"></small> <small class="timeago" title="{../relativeTime}"></small>
</a> </a>

@ -81,7 +81,13 @@
</p> </p>
<!-- ELSE --> <!-- ELSE -->
<p> <p>
<a href="{config.relative_path}/user/{topics.teaser.user.userslug}"><img title="{topics.teaser.user.username}" class="user-img" src="{topics.teaser.user.picture}" /></a> <a href="{config.relative_path}/user/{topics.teaser.user.userslug}">
<!-- IF topics.teaser.user.picture -->
<img title="{topics.teaser.user.username}" class="user-img" src="{topics.teaser.user.picture}" />
<!-- ELSE -->
<span class="user-icon user-img" style="background-color: {topics.teaser.user.icon:bgColor};">{topics.teaser.user.icon:text}</span>
<!-- ENDIF topics.teaser.user.picture -->
</a>
<a class="permalink" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"> <a class="permalink" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
<span class="timeago" title="{topics.teaser.timestamp}"></span> <span class="timeago" title="{topics.teaser.timestamp}"></span>
</a> </a>

Loading…
Cancel
Save