admin/manage/users styling

public/less/admin/manage/users.less

@@ -1,27 +1,46 @@
 .users {
 	#users-container {
 		border: 1px solid #eee;
-		padding: 0px 20px 20px
+		padding: 0px 20px 20px;
-	}
 
-	.users-box{
+		.users-box {
-		display: inline-block;
+			display: inline-block;
-		margin-top: 20px;
+			margin-top: 20px;
-		text-align: center;
+			text-align: center;
-		vertical-align: top;
+			vertical-align: top;
-		white-space: nowrap;
+			white-space: nowrap;
-		text-overflow: ellipsis;
+			text-overflow: ellipsis;
-		overflow: hidden;
+			overflow: hidden;
-		height: auto;
+			height: auto;
-		max-width: 125px;
+			max-width: 125px;
 
-		img {
+			img {
-			width:80px;
+				width:80px;
-			height:80px;
+				height:80px;
-		}
+			}
+
+			a {
+				margin-bottom:5px;
+				font-size: 12px;
+			}
+
+			.user-image {
+				position: relative;
+
+				.labels {
+					position: absolute;
+					bottom: 0px;
+					width: 100%;
 
-		a {
+					span {
-			margin-bottom:5px;
+						width: 100%;
+						opacity: 0.9;
+						font-size: 10px;
+						display: block;
+						border-radius: 0;
+					}
+				}
+			}
 		}
 	}
 }

src/views/admin/manage/users.tpl

@@ -38,24 +38,15 @@
 				<ul id="users-container">
 					<!-- BEGIN users -->
 					<div class="users-box" data-uid="{users.uid}" data-username="{users.username}">
-
+						<div class="user-image">
-						<img src="{users.picture}" class="img-thumbnail user-selectable"/>
+							<img src="{users.picture}" class="img-thumbnail user-selectable"/>
-						<br/>
+							<div class="labels">
-						
+								<span class="administrator label label-primary <!-- IF !users.administrator -->hide<!-- ENDIF !users.administrator -->">Admin</span>
-						<a href="{relative_path}/user/{users.userslug}" target="_blank">{users.username}</a>
+								<span class="ban label label-danger <!-- IF !users.banned -->hide<!-- ENDIF !users.banned -->">Banned</span>
-						<br/>
+							</div>
-
-						<div title="uid">
-							<i class='fa fa-user'></i>
-							<span>{users.uid}</span>
 						</div>
-
+						
-						<span class="administrator label label-primary <!-- IF !users.administrator -->hide<!-- ENDIF !users.administrator -->">Admin</span>
+						<a href="{relative_path}/user/{users.userslug}" target="_blank">{users.username} ({users.uid})</a>
-
-						<br/>
-
-						<span class="ban label label-danger <!-- IF !users.banned -->hide<!-- ENDIF !users.banned -->">Banned</span>
-
 					</div>
 					<!-- END users -->
 				</ul>