Merge pull request #64 from yvonne-liu/styling-user-profiles

improved user profile styling
FAC10 · Mar 31, 2017 · 6d96e3d · 6d96e3d
2 parents f377903 + 79fc648
commit 6d96e3d
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
   "devDependencies": {
     "codecov": "^2.1.0",
     "istanbul": "^0.4.5",
+    "nodemon": "^1.11.0",
     "shot": "^3.4.0",
     "tap-spec": "^4.1.1",
     "tape": "^4.6.3"

diff --git a/public/user.css b/public/user.css
@@ -1,20 +1,72 @@
 html, body {
   margin: 0 auto;
   font-size: 1.2em;
+  font-family: 'Raleway', sans-serif;
+}
+
+h1 {
+  margin-top: 0;
+  text-align: center;
 }
 
 .userprofile {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  padding: 2rem;
+  max-width: 40rem;
+  border-radius: 1rem;
+  border: 2px solid rgba(0, 0, 0, 0.5);
+  margin: 2rem auto;
+  transition: 0.4s all ease;
+}
+
+.userprofile:hover {
+    -webkit-box-shadow: .5rem .5rem 0.33rem 0px rgba(0,0,0,0.10);
+    -moz-box-shadow: .5rem .5rem 0.33rem 0px rgba(0,0,0,0.10);
+    box-shadow: .5rem .5rem 0.33rem 0px rgba(0,0,0,0.10);
 }
 
-img {
-  width: 30%;
+.userprofile__image {
+  margin: 2rem auto;
+  overflow: hidden;
+  width: 15rem;
+  height: 15rem;
+  text-decoration: none;
   border-radius: 50%;
+  display: block;
 }
 
-ul {
+.userprofile__image__img {
+  border-radius: 50%;
+  width: 100%;
+  opacity: 1;
+  transition: .5s all ease;
+}
+
+.userprofile__image__back {
+  width: 15rem;
+  height: 15rem;
+  line-height: 15rem;
+  color: white;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.userprofile__image:hover .userprofile__image__back {
+  margin-top: -15rem;
+  color: black;
+}
+.userprofile__image:hover .userprofile__image__img {
+  opacity: 0.5;
+}
+
+table {
+  margin: 0 auto;
+  max-width: 46rem;
   list-style-type: none;
 }
+td {
+  padding: 0.5rem;
+}
+tr:nth-child(odd) {
+  background-color: rgba(0,0,0,0.05);
+}
diff --git a/src/assets/user.html b/src/assets/user.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="/../../public/user.css">
   <title>SoFly presents: FAC10 FACts</title>
+  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
 </head>
 <body>
   <main class="userprofile">

diff --git a/src/handler.js b/src/handler.js
@@ -125,17 +125,20 @@ handler.userSearch = (req, res) => {
         data.getUser(userId, (err, user) => {
           const userHtml =
           `<h1>${user.first_name} ${user.middle_name || ''} ${user.last_name}</h1>
-          <img class="userimg" src=${'../public/assets/profile-pics/' + user.first_name.toLowerCase() + '_headshot.jpg'}>
-          <ul>
-          <li>Github username: <a href="${'https://www.github.com/'+user.github_user_name}">${user.github_user_name}</a></li>
-          <li>Nationality: ${user.nationality}</li>
-          <li>Languages spoken: ${user.languages}</li>
-          <li>Place of birth: ${user.place_of_birth}</li>
-          <li>Favourite hobby: ${user.favorite_hobby}</li>
-          <li>Favourite book: ${user.favorite_book}</li>
-          <li>Number of siblings: ${user.siblings}</li>
-          </ul>`;
-
+          <a class="userprofile__image" href="/">
+            <img class="userprofile__image__img" src=${'../public/assets/profile-pics/' + user.first_name.toLowerCase() + '_headshot.jpg'}>
+            <section class="userprofile__image__back">Go back</section>
+          </a>
+          <table>
+
+            <tr><td>Github: </td><td><a href="${'https://www.github.com/'+user.github_user_name}">${user.github_user_name}</a></td></tr>
+            <tr><td>Nationality: </td><td>${user.nationality}</td></tr>
+            <tr><td>Languages: </td><td>${user.languages}</td></tr>
+            <tr><td>Place of birth: </td><td>${user.place_of_birth}</td></tr>
+            <tr><td>Favourite hobby: </td><td>${user.favorite_hobby}</td></tr>
+            <tr><td>Favourite book: </td><td>${user.favorite_book}</td></tr>
+            <tr><td>Siblings: </td><td>${user.siblings}</td></tr>
+          </table>`;
 
           const html = file.replace(/<!--REPLACETHIS-->/, userHtml);