Better style for users panel

approot/admin-users.xml

@@ -5,13 +5,18 @@
 	<div class="page-header">
 		<h2>${tr:Lms.Admin.Users.users}</h2>
 	</div>
-	${users class="list-group"}
-	${add-btn class="btn-primary"}
+	${users}
+	${add-btn class="btn-primary Lms-admin-users-add-btn"}
 </message>
 
 <message id="Lms.Admin.Users.template.entry">
-	<div class="list-group-item">
-		${name} ${<if-tag>}<span class="badge">${tag}</span>${</if-tag>} ${<if-edit>}${edit-btn} ${del-btn class="btn-danger"}${</if-edit>}
+	<div class="row Lms-admin-users-entry Lms-vertical-align">
+		<div class="col-xs-7 Lms-vertical-align">
+			${name}${<if-tag>}<span class="badge Lms-admin-users-entry-role">${tag}</span>${</if-tag>}
+		</div>
+		<div class="col-xs-5 Lms-horizontal-center">
+			${<if-edit>}${edit-btn class="Lms-admin-users-entry-btn"}${del-btn class="btn-danger Lms-admin-users-entry-btn"}${</if-edit>}
+		</div>
 	</div>
 </message>
 

docroot/css/lms.css

@@ -23,6 +23,29 @@ a:hover {
 	margin-bottom: 8px;
 }
 
+.Lms-admin-users-entry {
+	min-height: 48px;
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
+.Lms-admin-users-add-btn {
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
+
+.Lms-admin-users-entry:hover {
+	background-color: lightgrey;
+}
+
+.Lms-admin-users-entry-role {
+	margin-left: 8px;
+}
+
+.Lms-admin-users-entry-btn {
+	margin-right: 8px;
+}
+
 .Lms-cluster {
 	display: inline;
 	cursor: pointer;