From 2b71c182b85d735d3fae995a73df4ea028fd9b40 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 11 Mar 2019 11:29:35 +0530
Subject: [PATCH] Fix user list UI

---
 .../js/frappe/social/pages/UserList.vue       | 49 ++++++++++++++++---
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/frappe/public/js/frappe/social/pages/UserList.vue b/frappe/public/js/frappe/social/pages/UserList.vue
index 6f2c6bbed7..b257223572 100644
--- a/frappe/public/js/frappe/social/pages/UserList.vue
+++ b/frappe/public/js/frappe/social/pages/UserList.vue
@@ -1,19 +1,21 @@
 <template>
 	<div class="flex justify-center">
 		<div class="col-md-6">
-			<div class="flex justify-between padding">
+			<div class="flex justify-between padding search-bar">
 				<input type="text" class="form-control" :placeholder="__('Search for a user...')" v-model="search_text">
 			</div>
-			<ul class="list-unstyled">
+			<ul class="list-unstyled user-list">
 				<li
-					class="padding cursor-pointer"
+					class="padding cursor-pointer flex user-card"
 					v-for="user in filtered_users" :key="user.name"
 					@click="go_to_profile_page(user.name)">
-					<span
-						v-html="get_avatar(user.name)">
-					</span>
-					{{ user.fullname }}
+					<span v-html="get_avatar(user.name)"></span>
+					<div class="user-details">
+						{{ user.fullname }}
+						<div class="text-muted text-medium" :class="{'italic': !user.bio}">{{ user.bio || 'No Bio'}}</div>
+					</div>
 				</li>
+				<li class="text-muted" v-if="!filtered_users.length">{{__('No user found')}}</li>
 			</ul>
 		</div>
 	</div>
@@ -40,7 +42,7 @@ export default {
 		}
 	},
 	created() {
-		const standard_users = ['Administrator', 'Guest'];
+		const standard_users = ['Administrator', 'Guest', 'guest@example.com'];
 		this.users = frappe.boot.user_info;
 		// delete standard users from the list
 		standard_users.forEach(user => delete this.users[user]);
@@ -56,5 +58,36 @@ export default {
 	}
 }
 </script>
+<style lang="less" scoped>
+.user-list {
+	// similar to search bar height
+	margin-top: 75px;
+	.user-card {
+		&:hover {
+			border: 1px solid #d1d8dd;
+		}
+		border-radius: 5px;
+		.user-details {
+			margin-left: 10px;
+			.italic {
+				font-style: italic;
+			}
+		}
+	}
+}
+.search-bar {
+	position: fixed;
+	background: white;
+	height: 75px;
+	text-align: center;
+	input {
+		width: 40%;
+		margin: auto;
+	}
+	width: 100%;
+	left: 0;
+}
+</style>
+