user-icon styles for new teaser partials

less/categories.less

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

less/category.less

@@ -81,6 +81,15 @@
 			.fa-stack {
 				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 {

templates/partials/categories/lastpost.tpl

@@ -3,7 +3,13 @@
 	<!-- IF @first -->
 	<div component="category/posts">
 		<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 -->">
 				<small class="timeago" title="{../relativeTime}"></small>
 			</a>

templates/partials/topics_list.tpl

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