From 6a7f69f65c44809532d8c27c5b644c42abd95fe2 Mon Sep 17 00:00:00 2001
From: Kenneth Jao <ksjdragon@gmail.com>
Date: Mon, 5 Sep 2016 16:41:22 -0400
Subject: [PATCH] Added user icons and links to profile

---
 hourglass/client/main/main.css  | 70 ++++++++++++++++++++++++++++++---
 hourglass/client/main/main.html | 16 ++++++--
 hourglass/client/main/main.js   | 21 +++++++---
 3 files changed, 92 insertions(+), 15 deletions(-)

diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index 4b0f07d..fd4bd42 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -438,6 +438,8 @@ input, textarea {
 	width: 40%;
 	margin: auto;
 	margin-top: 5%;
+
+	box-shadow: 2px 2px 5px 3px #333;
 }
 
 #editWorkCont {
@@ -855,15 +857,60 @@ input, textarea {
 
 .commentBox {
 	margin: 0 !important;
+	height: 50%;
 	padding: 2%;
 	background-color: rgba(255,255,255,0.1);
 	border-bottom: solid 1px #CCC;
 }
 
+.commentAvatarCont {
+	margin: 0 1% -3% 0 !important;
+	background-color: rgba(255,255,255,1);
+
+	-moz-border-radius: 10%;
+	-webkit-border-radius: 10%;
+	border-radius: 10%;
+
+	display: inline-block;
+}
+
+.commentAvatar {
+	height: 4vh;
+	width: 4vh;
+	margin-bottom: -10%;
+
+	-moz-border-radius: 10%;
+	-webkit-border-radius: 10%;
+	border-radius: 10%;
+
+	-webkit-transition: opacity 0.4s ease;  
+	-moz-transition: opacity 0.4s ease; 
+	-ms-transition: opacity 0.4s ease;
+	transition: opacity 0.4s ease; 
+}
+
+.commentAvatar:hover {
+	opacity: 0.9;
+}
+
+.commentInfo {
+	max-height: 5%;
+	margin: 0 !important;
+	display: inline-block;
+}
+
+.commentUser:hover {
+	text-decoration: underline;
+}
+
 .commentUser, .commentDate {
 	font-size: 75%;
 }
 
+.commentAvatar, .commentUser {
+	cursor: pointer;
+}
+
 #commentRestrict {
 	font-weight: 400;
 }
@@ -890,14 +937,17 @@ input, textarea {
 #done {
 	height: 60%;
 	top: 0;
+	overflow-y: auto;
 }
 
 .doneUser {
 	font-size: 110%;
 	margin: 0;
-	padding: 6% 6% 6% 10%;
+	padding: 4% 4% 3% 6%;
 	background-color: rgba(0,0,0,0.1);
-	overflow-y: auto;
+
+	position: relative;
+	cursor: pointer;
 
 	-webkit-transition: background-color 0.4s ease;  
 	-moz-transition: background-color 0.4s ease; 
@@ -909,8 +959,19 @@ input, textarea {
 	background-color: rgba(0,0,0,0.15);
 }
 
-.doneUser p {
-	margin: 0;
+.doneUser img {
+	height: 4vh;
+	width: 4vh;
+	margin-right: 5%;
+
+	-moz-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	border-radius: 50%;
+}
+
+.doneUser span {
+	position: absolute;
+	top: 32%;
 }
 
 #toggleButtons {
@@ -954,4 +1015,3 @@ input, textarea {
 #markDone:hover, #markConfirm:hover, #markReport:hover {
 	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.15);
 }
-
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index 32fe7f3..e3721b5 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -255,12 +255,20 @@
 
 <template name="comment">
     <div class="commentBox">
-        <span class="commentComment">{{comment}}</span><br>
-        <span class="commentUser">{{user}}</span>
-        <span class="commentDate">{{date}}</span>
+        <div class="commentAvatarCont">
+            <img class="commentAvatar" src='{{avatar}}' onclick="window.location='/user/{{email}}'">
+        </div>
+        <div class="commentInfo">
+            <span class="commentComment">{{comment}}</span><br>
+            <span class="commentUser" onclick="window.location='/user/{{email}}'">{{user}}</span>
+            <span class="commentDate">{{date}}</span>
+        </div>
     </div>
 </template>
 
 <template name="doneUsers">
-    <p class="doneUser">{{user}}</p>
+    <div class="doneUser" onclick="window.location='/user/{{email}}'">
+        <img src='{{avatar}}'>
+        <span>{{user}}</span>
+    </div>
 </template>
\ No newline at end of file
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index d9db12a..b66af2b 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -922,10 +922,14 @@ function formReadable(input) { // Makes work information readable by users.
         }
 
         for (var i = 0; i < input.done.length; i++) { // Display users who marked as done.
+            var user = Meteor.users.findOne({
+                _id: input.done[i]
+            });
+
             input.done[i] = {
-                "user": Meteor.users.findOne({
-                    _id: input.done[i]
-                }).profile.name
+                "user": user.profile.name,
+                "avatar": user.profile.avatar,
+                "email": user.services.google.email
             };
         }
 
@@ -952,12 +956,17 @@ function formReadable(input) { // Makes work information readable by users.
                 resort[re] = {
                     "comment": comments[k].comment,
                     "date": null,
-                    "user": null
+                    "user": null,
+                    "avatar": null,
+                    "email":null
                 };
-                resort[re].user = Meteor.users.findOne({
+                var user = Meteor.users.findOne({
                     _id: comments[k].user
-                }).profile.name;
+                });
+                resort[re].user = user.profile.name;
                 resort[re].date = moment(comments[k].date).fromNow();
+                resort[re].avatar = user.profile.avatar;
+                resort[re].email = user.services.google.email;
             }
             input.comments = resort;
         }