feat(admin): spruce up the look of the user list

angular-fullstack · Dec 8, 2015 · 38bb6b8 · 38bb6b8
1 parent 00ae803
commit 38bb6b8
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 4 deletions.
diff --git a/app/templates/client/app/admin(auth)/admin(css).css b/app/templates/client/app/admin(auth)/admin(css).css
@@ -1 +1,19 @@
 .trash { color:rgb(209, 91, 71); }
+
+.user-list li {
+	display: flex;
+	border: none;
+	border-bottom: 1px lightgray solid;
+	margin-bottom: 0;
+}
+.user-list li:last-child {
+	border-bottom: none;
+}
+.user-list li .user-info {
+	flex-grow: 1;
+}
+.user-list li .trash {
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+}
diff --git a/app/templates/client/app/admin(auth)/admin(html).html b/app/templates/client/app/admin(auth)/admin(html).html
@@ -2,11 +2,13 @@
 
 <div class="container">
   <p>The delete user and user index api routes are restricted to users with the 'admin' role.</p>
-  <ul class="list-group">
+  <ul class="list-group user-list">
     <li class="list-group-item" ng-repeat="user in admin.users">
-        <strong>{{user.name}}</strong><br>
-        <span class="text-muted">{{user.email}}</span>
-        <a ng-click="admin.delete(user)" class="trash"><span class="glyphicon glyphicon-trash pull-right"></span></a>
+	    <div class="user-info">
+	        <strong>{{user.name}}</strong><br>
+	        <span class="text-muted">{{user.email}}</span>
+	    </div>
+        <a ng-click="admin.delete(user)" class="trash"><span class="fa fa-trash fa-2x"></span></a>
     </li>
   </ul>
 </div>
diff --git a/app/templates/client/app/admin(auth)/admin(less).less b/app/templates/client/app/admin(auth)/admin(less).less
@@ -1 +1,20 @@
 .trash { color:rgb(209, 91, 71); }
+
+.user-list {
+	li {
+		display: flex;
+		border: none;
+		border-bottom: 1px lightgray solid;
+		margin-bottom: 0;
+		&:last-child { border-bottom: none; }
+
+		.user-info {
+			flex-grow: 1;
+		}
+		.trash {
+			display: flex;
+			align-items: center;
+			text-decoration: none;
+		}
+	}
+}
diff --git a/app/templates/client/app/admin(auth)/admin(sass).scss b/app/templates/client/app/admin(auth)/admin(sass).scss
@@ -1 +1,20 @@
 .trash { color:rgb(209, 91, 71); }
+
+.user-list {
+	li {
+		display: flex;
+		border: none;
+		border-bottom: 1px lightgray solid;
+		margin-bottom: 0;
+		&:last-child { border-bottom: none; }
+
+		.user-info {
+			flex-grow: 1;
+		}
+		.trash {
+			display: flex;
+			align-items: center;
+			text-decoration: none;
+		}
+	}
+}
diff --git a/app/templates/client/app/admin(auth)/admin(stylus).styl b/app/templates/client/app/admin(auth)/admin(stylus).styl
@@ -1,2 +1,17 @@
 .trash
     color rgb(209, 91, 71)
+
+.user-list li 
+	display: flex
+	border: none
+	border-bottom: 1px lightgray solid
+	margin-bottom: 0
+	&:last-child 
+		border-bottom: none
+
+	.user-info
+		flex-grow: 1
+	.trash
+		display: flex
+		align-items: center
+		text-decoration: none