Initial commit.

challengepost · Nov 12, 2015 · 066ea87 · 066ea87
1 parent dafcd67
commit 066ea87
Show file tree

Hide file tree

Showing 8 changed files with 209 additions and 11 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.sass-cache/f722d28650ac725e34d54d4b7ca3c9f534140a23/_users.sassc b/.sass-cache/f722d28650ac725e34d54d4b7ca3c9f534140a23/_users.sassc
diff --git a/devpost-reversed-rgb.svg b/devpost-reversed-rgb.svg
diff --git a/hacker-card.html b/hacker-card.html
@@ -5,21 +5,98 @@
 </head>
 <body>
   <link rel="import" href="components/bower_components/polymer/polymer.html">
+  <link rel="stylesheet" href="users.css"/>
+  <script src="node_modules/superagent/superagent.js"></script>
+
   <dom-module id="hacker-card">
     <template>
-      <style>
-        span {
-          font-weight: bold;
+      <div class='hacker-card' on-click="goToProfile">
+        <div class="gallery-item">
+          <div class="user-entry">
+            <header></header>
+            <div class='entry-body'>
+              <h5>
+                {{user.name}}
+                <span class="paragraph-end"></span>
+              </h5>
+
+              <p>{{user.bio}}</p>
+            </div>
+
+            <footer>
+              <div class="count">
+                <span>{{user.projects_count}}</span>
+                <br>
+                Projects
+              </div>
+              <div class="count">
+                <span>{{user.hackathons_count}}</span>
+                <br>
+                Hackathons
+              </div>
+              <div class="count">
+                <span>{{user.followers_count}}</span>
+                <br>
+                Followers
+              </div>
+            </footer>
+          </div>
+        </div>  
+      </div>
+    </template>
+
+    <script>
+      Polymer({
+        is: 'hacker-card',
+        properties: {
+          userName: {
+            type: String
+          },
+          user: {
+            type: Object
+          }
+        },
+        goToProfile: function() {
+
+        },
+        ready: function() {
+          var self = this;
+          request
+            .get("https://iii3mdppm7.execute-api.us-east-1.amazonaws.com/prod/UserPortfolioEndpoint/" + this.userName)
+            .end(function(err, res) {
+              window.user = self.user = res.body;
+            });
         }
-      </style>
-      <div>
-        <span>Some stuff</span>
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id="hacker-tile">
+    <template>
+      <div class='hacker-card' on-click="goToProfile">
+        <img>  
       </div>
     </template>
 
     <script>
       Polymer({
-        is: 'hacker-card'
+        is: 'hacker-tile',
+        properties: {
+          userName: {
+            type: String
+          },
+          user: {
+            type: Object
+          }
+        },
+        ready: function() {
+          var self = this;
+          request
+            .get("https://iii3mdppm7.execute-api.us-east-1.amazonaws.com/prod/UserPortfolioEndpoint/" + this.userName)
+            .end(function(err, res) {
+              window.user = self.user = res.body;
+            });
+        }
       });
     </script>
   </dom-module>

diff --git a/index.html b/index.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title></title>
+  <title></title>
 </head>
 <body>
-	<script src="components/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>	
-	<link rel="import" href="hacker-card.html">
-	<hacker-card></hacker-card>
+  <script src="components/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+  <link rel="import" href="hacker-card.html">
+
+  <hacker-card user-name='MGerrior'></hacker-card>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "hacker_card",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "superagent": "^1.4.0"
+  }
+}
diff --git a/users.css b/users.css
@@ -0,0 +1,79 @@
+.user-photo, .user-avatar {
+  border-radius: 50%; }
+
+.user-entry {
+  text-align: center;
+}
+
+.entry-body h5 {
+  font-weight: bold;
+} 
+
+.entry-body p {
+  color: rgb(87, 85, 83);
+  font-family: 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  font-style: italic;
+  font-weight: normal;
+}
+
+.user-entry, .user-entry:hover, .user-entry:active, .user-entry:focus {
+  border-color: #b3b3b3;
+  box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.4); 
+}
+
+.user-entry header {
+  height: 70px; 
+  background-image: url(/devpost-reversed-rgb.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: #003E54;
+}
+
+.user-entry .entry-body h4 {
+  margin-top: 0.5em; 
+}
+
+.user-entry footer {
+  background-color: #f0f0f0;
+  padding: 6px;
+}
+
+.user-entry footer .count {
+  display: inline-block;
+  width: 32%;
+  font-size: 0.6875em;
+  color: #999794; 
+}
+
+.user-entry footer .count span {
+  font-weight: bold;
+  color: #1a1918;
+  font-size: 1rem; 
+}
+
+.user-entry .user-photo {
+  background: white;
+  margin: 0 auto;
+  height: 90px;
+  width: 90px;
+  margin-top: -52px;
+  border: 3px solid white; 
+}
+
+.user-entry .follow-button-wrapper {
+  min-height: 1.5em;
+  margin-bottom: 0.3em; 
+}
+
+.hacker-card {
+  cursor: pointer;
+  max-width: 270px;
+  font-family: 'HelveticaNeue', sans-serif;
+}
+
+.hacker-tile {
+  cursor: pointer;
+  max-width: 300px;
+  font-family: 'HelveticaNeue', sans-serif;
+}