add repos count

hit9 · Feb 24, 2013 · fec7158 · fec7158
1 parent 0c1bf45
commit fec7158
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 20 deletions.
diff --git a/coffee/ghresume.coffee b/coffee/ghresume.coffee
@@ -12,7 +12,7 @@ desktoppr_api = "https://api.desktoppr.co/1/wallpapers/random"
 $.getJSON(desktoppr_api, 
   (res)->
     $("body").css("background-image","url("+res.response.image.url+")")
-  )
+)
 
 # user information
 $.getJSON(api_url+username,
@@ -32,21 +32,21 @@ $.getJSON(api_url+username,
         <i class=\"icon-map-marker icon-white\"></i>
         "+res.location+"
       </li>
-      ")
+        ")
     if res.email
       $("ul#user-info").append("
       <li>
         <i class=\"icon-envelope icon-white\"></i>
         "+res.email+"
       </li>
-      ")
+        ")
     if res.company
       $("ul#user-info").append("
       <li>
         <i class=\"icon-user icon-white\"></i>
         "+res.company+"
       </li>
-      ")
+        ")
     if res.blog
       $("ul#user-info").append("
       <li>
@@ -57,7 +57,7 @@ $.getJSON(api_url+username,
       followers = (res.followers / 1000).toFixed(1) + "k"
     else
       followers = res.followers
-    $("#followers #follower-number").text(followers)
+    $("#follower-number").text(followers)
 )
 
 # get repos and display the first 5 repos
@@ -87,19 +87,19 @@ $.getJSON(api_url+username+"/repos",
             <li class=\"stars\">
               <i class=\"icon-star icon-white\"></i>"+repo.watchers_count+"
             </li>
-            <li class=\"forks\">
+              <li class=\"forks\">
               <i class=\"icon-share-alt icon-white\"></i>
               "+repo.forks_count+"
             </li>
-            <li class=\"created_time\">
+              <li class=\"created_time\">
               <i class=\"icon-time icon-white\"></i>"+repo.created_at.substring(0, 10)+"
             </li>
-          </ul>
+              </ul>
           <h3>
             <a href=\"https://github.com/"+username+"/"+repo.name+"\">
             "+repo.name+language+"
             </a>
-          </h3>
+              </h3>
           <p id=\"description\">"+homepage+"&nbsp;"+repo.description+"</p>
         </li>
       ")
@@ -114,14 +114,19 @@ $.getJSON(api_url+username+"/repos",
           lang[repo.language] = 0
         lang[repo.language] += 1
       size += 1
+
     tuple_arr = []
+
     for key, value of lang
       tuple_arr.push([key, value])
     tuple_arr.sort(
       (a, b)->
         b[1]-a[1]
     )
 
+    # count of repository
+    $("#repos-count").text(size)
+
     $("h1#name").append("&nbsp; <span>("+tuple_arr[0][0]+")</span>")
 
     $.getJSON("vendors/github-language-colors/colors.json", 

diff --git a/css/style.css b/css/style.css
@@ -126,13 +126,19 @@ hr {
 .container#user #user-info-container #user-info {
   line-height: 21px;
 }
-.container#user #followers h2 {
+.container#user .countcircle {
+  margin: auto 18px;
+}
+.container#user .countcircle h2 {
   font-weight: normal;
   font-size: 152%;
   font-style: italic;
   margin: 10px auto;
+  text-align: center;
+  min-width: 70px;
 }
-.container#user #followers #follower-number {
+.container#user .countcircle #follower-number,
+.container#user .countcircle #repos-count {
   height: 70px;
   width: 70px;
   border-radius: 50em;

diff --git a/index.html b/index.html
@@ -55,11 +55,18 @@ <h1 id="name"></h1>
         </div>
 
         <!-- followers circle -->
-        <div class="span2 offset1" id="followers">
+        <div class="span1 countcircle">
           <div id="follower-number" >
           </div>
           <h2>follower</h2>
         </div>
+
+        <!-- repos count circle -->
+        <div class="span1 countcircle">
+          <div id="repos-count" >
+          </div>
+          <h2>repo</h2>
+        </div>
       </div>
 
     </div>

diff --git a/js/ghresume.js b/js/ghresume.js
@@ -29,13 +29,13 @@
     }
     $("#name").html("<a href=\"https://github.com/" + username + "\">" + name + "</a>");
     if (res.location) {
-      $("ul#user-info").append("      <li>        <i class=\"icon-map-marker icon-white\"></i>        " + res.location + "      </li>      ");
+      $("ul#user-info").append("      <li>        <i class=\"icon-map-marker icon-white\"></i>        " + res.location + "      </li>        ");
     }
     if (res.email) {
-      $("ul#user-info").append("      <li>        <i class=\"icon-envelope icon-white\"></i>        " + res.email + "      </li>      ");
+      $("ul#user-info").append("      <li>        <i class=\"icon-envelope icon-white\"></i>        " + res.email + "      </li>        ");
     }
     if (res.company) {
-      $("ul#user-info").append("      <li>        <i class=\"icon-user icon-white\"></i>        " + res.company + "      </li>      ");
+      $("ul#user-info").append("      <li>        <i class=\"icon-user icon-white\"></i>        " + res.company + "      </li>        ");
     }
     if (res.blog) {
       $("ul#user-info").append("      <li>        <i class=\"icon-home icon-white\"></i>        <a href=\"" + res.blog + "\" >" + res.blog + "</a>      </li>");
@@ -45,7 +45,7 @@
     } else {
       followers = res.followers;
     }
-    return $("#followers #follower-number").text(followers);
+    return $("#follower-number").text(followers);
   });
 
   $.getJSON(api_url + username + "/repos", function(res) {
@@ -67,7 +67,7 @@
       if (repo.language) {
         language = "<span id=\"language\"> (" + repo.language + ")</span>";
       }
-      $("#repolist").append("        <li style=\"display: list-item;\" class=\"singlerepo\">          <ul class=\"repo-stats\">            <li class=\"stars\">              <i class=\"icon-star icon-white\"></i>" + repo.watchers_count + "            </li>            <li class=\"forks\">              <i class=\"icon-share-alt icon-white\"></i>              " + repo.forks_count + "            </li>            <li class=\"created_time\">              <i class=\"icon-time icon-white\"></i>" + repo.created_at.substring(0, 10) + "            </li>          </ul>          <h3>            <a href=\"https://github.com/" + username + "/" + repo.name + "\">            " + repo.name + language + "            </a>          </h3>          <p id=\"description\">" + homepage + "&nbsp;" + repo.description + "</p>        </li>      ");
+      $("#repolist").append("        <li style=\"display: list-item;\" class=\"singlerepo\">          <ul class=\"repo-stats\">            <li class=\"stars\">              <i class=\"icon-star icon-white\"></i>" + repo.watchers_count + "            </li>              <li class=\"forks\">              <i class=\"icon-share-alt icon-white\"></i>              " + repo.forks_count + "            </li>              <li class=\"created_time\">              <i class=\"icon-time icon-white\"></i>" + repo.created_at.substring(0, 10) + "            </li>              </ul>          <h3>            <a href=\"https://github.com/" + username + "/" + repo.name + "\">            " + repo.name + language + "            </a>              </h3>          <p id=\"description\">" + homepage + "&nbsp;" + repo.description + "</p>        </li>      ");
     }
     lang = [];
     size = 0;
@@ -89,6 +89,7 @@
     tuple_arr.sort(function(a, b) {
       return b[1] - a[1];
     });
+    $("#repos-count").text(size);
     $("h1#name").append("&nbsp; <span>(" + tuple_arr[0][0] + ")</span>");
     return $.getJSON("vendors/github-language-colors/colors.json", function(clr) {
       var item, l, n, _k, _len2, _ref1, _results;

diff --git a/less/style.less b/less/style.less
@@ -13,6 +13,10 @@
 @h2-size: 152%; 
 @h3-size: 130%; 
 
+//some var
+
+@count-circle-radius: 35px; 
+
 // transparent background
 .transpare(@arg:0.892745){
     /* transparent gray */
@@ -143,13 +147,16 @@ hr{
             line-height: @line-height-normal;
         }
     }
-    #followers{
+    .countcircle{
+        margin:auto 18px; 
         h2{
             .h2; 
             margin: 10px auto; 
+            text-align: center; 
+            min-width: @count-circle-radius * 2; 
         }
-        #follower-number{
-            .text-circle(35px); 
+        #follower-number, #repos-count{
+            .text-circle(@count-circle-radius); //mention here: circle radius 35px!
             font-size: @h2-size; 
             background-color: @light-blue; 
             color: @white;