Add the HackerTile.

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

Hide file tree

Showing 6 changed files with 103 additions and 9 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/devpost-icon-rgb.svg b/devpost-icon-rgb.svg
diff --git a/devpost-rgb.svg b/devpost-rgb.svg
diff --git a/hacker-card.html b/hacker-card.html
@@ -13,14 +13,13 @@
       <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>
+              <p>on</p>
+              <img src='devpost-rgb.svg'>
             </div>
 
             <footer>
@@ -73,8 +72,60 @@ <h5>
 
   <dom-module id="hacker-tile">
     <template>
-      <div class='hacker-card' on-click="goToProfile">
-        <img>  
+      <style>
+        .hacker-container {
+          border-color: #b3b3b3;
+          box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.4);
+        }
+        .portfolio-link {
+          padding: 10px;
+          display: block;
+          color: black !important;
+          text-decoration: none;
+        }
+        .logo-container {
+          width: 20%;
+          float: left;
+        }
+        .logo-container img {
+          margin-right: 1em;
+          margin-top: 2px;
+        }
+        .user-container {
+          width: 80%;
+          margin-left: 20%;
+        }
+        .user-stats {
+          font-size: 0.6875em;
+          color: #999794;
+        }
+        .user-stats .count {
+          font-size: 1em;
+          color: black;
+          font-weight: bold;
+        }
+        .view-portfolio {
+          margin-bottom: 0.5em;
+        }
+      </style>
+      <div class='hacker-tile hacker-container' on-click="goToProfile">
+        <a class="portfolio-link" href="http://devpost.com/{{ userName }}" target="_blank">
+          <div class="logo-container">
+            <img src="devpost-icon-rgb.svg">
+          </div>
+          <div class="user-container">
+            <div class="view-portfolio">
+              <strong>{{ user.name }}</strong> on Devpost
+            </div>
+            <div class="user-stats">
+              <span class="count">{{user.projects_count}}</span> Projects
+              &middot;
+              <span class="count">{{user.hackathons_count}}</span> Hackathons
+              &middot;
+              <span class="count">{{user.followers_count}}</span> Followers 
+            </div>
+          </div>
+        </a>
       </div>
     </template>
 

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
 <body>
   <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>
+  <hacker-tile user-name="MGerrior"></hacker-tile>
 </body>
 </html>
diff --git a/users.css b/users.css
@@ -1,14 +1,20 @@
 .user-photo, .user-avatar {
-  border-radius: 50%; }
+  border-radius: 50%; 
+}
 
 .user-entry {
   text-align: center;
 }
 
 .entry-body h5 {
   font-weight: bold;
+  font-size: 1.2em;
 } 
 
+.entry-body img {
+  width: 45%;
+}
+
 .entry-body p {
   color: rgb(87, 85, 83);
   font-family: 'Helvetica Neue', sans-serif;
@@ -24,7 +30,7 @@
 
 .user-entry header {
   height: 70px; 
-  background-image: url(/devpost-reversed-rgb.svg);
+  background-image: url(/devpost-rgb.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-color: #003E54;
@@ -74,6 +80,6 @@
 
 .hacker-tile {
   cursor: pointer;
-  max-width: 300px;
+  max-width: 310px;
   font-family: 'HelveticaNeue', sans-serif;
 }