hyperzlib
/
nodebb-theme-persona
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

user-icon styles for new teaser partials

Browse Source
main
Julian Lam 10 years ago
parent 2824a0f9db
commit a5a3889e2b
4 changed files with 52 additions and 22 deletions
Show Stats Download Patch File Download Diff File

9
less/categories.less
Unescape Escape View File

@ -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;
}
} }
} }
} }

9
less/category.less
Unescape Escape View File

@ -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 {

8
templates/partials/categories/lastpost.tpl
Unescape Escape View File

@ -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>

48
templates/partials/topics_list.tpl
Unescape Escape View File

@ -7,22 +7,22 @@
<div class="col-md-7 col-sm-9 col-xs-10 content"> <div class="col-md-7 col-sm-9 col-xs-10 content">
<div class="avatar pull-left"> <div class="avatar pull-left">
<!-- IF showSelect --> <!-- IF showSelect -->
<div class="select fa-square-o"> <div class="select fa-square-o">
<!-- IF topics.user.picture --> <!-- IF topics.user.picture -->
{function.renderTopicImage} {function.renderTopicImage}
<!-- ELSE --> <!-- ELSE -->
<div class="user-icon" style="background-color: {topics.user.icon:bgColor};" title="{topics.user.username}">{topics.user.icon:text}</div> <div class="user-icon" style="background-color: {topics.user.icon:bgColor};" title="{topics.user.username}">{topics.user.icon:text}</div>
<!-- ENDIF topics.user.picture --> <!-- ENDIF topics.user.picture -->
<i class="fa fa-check"></i> <i class="fa fa-check"></i>
</div> </div>
<!-- ELSE --> <!-- ELSE -->
<a href="{config.relative_path}/user/{topics.user.userslug}" class="pull-left"> <a href="{config.relative_path}/user/{topics.user.userslug}" class="pull-left">
<!-- IF topics.user.picture --> <!-- IF topics.user.picture -->
{function.renderTopicImage} {function.renderTopicImage}
<!-- ELSE --> <!-- ELSE -->
<div class="user-icon" style="background-color: {topics.user.icon:bgColor};" title="{topics.user.username}">{topics.user.icon:text}</div> <div class="user-icon" style="background-color: {topics.user.icon:bgColor};" title="{topics.user.username}">{topics.user.icon:text}</div>
<!-- ENDIF topics.user.picture --> <!-- ENDIF topics.user.picture -->
</a> </a>
<!-- ENDIF showSelect --> <!-- ENDIF showSelect -->
</div> </div>
@ -50,11 +50,11 @@
<small class="hidden-xs"><span class="timeago" title="{topics.relativeTime}"></span></small> <small class="hidden-xs"><span class="timeago" title="{topics.relativeTime}"></span></small>
<small class="visible-xs-inline"> <small class="visible-xs-inline">
<!-- IF topics.teaser.timestamp --> <!-- IF topics.teaser.timestamp -->
<span class="timeago" title="{topics.teaser.timestamp}"></span> <span class="timeago" title="{topics.teaser.timestamp}"></span>
<!-- ELSE --> <!-- ELSE -->
<span class="timeago" title="{topics.relativeTime}"></span> <span class="timeago" title="{topics.relativeTime}"></span>
<!-- ENDIF topics.teaser.timestamp --> <!-- ENDIF topics.teaser.timestamp -->
</small> </small>
</h2> </h2>
</div> </div>
@ -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>

Write Preview
Loading…
Cancel
Save