contributors.html: Add bootstrap card design

This enhancement commit shows the contributor's data on [contributors](http://community.coala.io/contributors/) web-page in a bootstrap card design form. Closes #140
coala · Feb 14, 2019 · bd3c21d · bd3c21d
1 parent 07d6d51
commit bd3c21d
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 21 deletions.
diff --git a/static/main.css b/static/main.css
@@ -1,3 +1,28 @@
+.contributor-data {
+    width: 18rem;
+    margin-bottom: 1%;
+}
+
+.contributor-card .contributor-image {
+    max-width:auto;
+}
+
+.contributors {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.github-icon {
+    display: inline-block;
+    float: right;
+}
+
+.icon {
+    font-size:30px;
+    color: black;
+}
+
 .student {
     padding-bottom: 20px;
 }

diff --git a/templates/contributors.html b/templates/contributors.html
@@ -1,40 +1,46 @@
 <!DOCTYPE html>
+{% load staticfiles %}
 <html lang="en">
   <head>
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="{% static 'main.css' %}" rel="stylesheet">
     <title>Contributors Data</title>
   </head>
   <body>
     <h1>Details of all the contributors</h1>
     <ul>
-      {% for contributor in contributors %}
-      <div class="container">
-        <div class="row">
-          <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-              <div class="caption">
-                <p>login: {{ contributor.login }}</p>
-                <p>name: {{ contributor.name }}</p>
-                <p>bio: {{ contributor.bio }}</p>
-                <p>num_commits: {{ contributor.num_commits }}</p>
-                <p>reviews: {{ contributor.reviews }}</p>
-                <p>issues_opened: {{ contributor.issues_opened }}</p>
-                <p>teams:
-                {% for team in contributor.teams.all %}
-                    {{ team.name }}
-                {% endfor %}{# for team in contributor.teams.all #}
-                </p>
-              </div>
-            </div>
+      <div class="contributors">
+        {% for contributor in contributors %}
+        <div class="card contributor-data">
+          <img class="card-img-top contributor-image"
+               src="//avatars.githubusercontent.com/{{ contributor.login }}"
+               alt="Profile picture">
+          <div class="card-body">
+            <h5 class="card-title">
+              {% if contributor.name %}
+                {{ contributor.name }}
+              {% else %}
+                {{ contributor.login }}
+              {% endif %}{# if contributor.name #}
+              <span class="github-icon">
+                <a href="//github.com/{{ contributor.login }}" target="_blank">
+                  <i class="fa fa-github icon"></i>
+                </a>
+              </span>
+            </h5>
+            <p class="card-text">Bio: {{ contributor.bio }}</p>
+            <p class="card-text">Commits: {{ contributor.num_commits }}</p>
+            <p class="card-text">Reiviews: {{ contributor.reviews }}</p>
+            <p class="card-text">Issues Opened: {{ contributor.issues_opened }}</p>
           </div>
         </div>
+        {% endfor %}{# for contributor in contributors #}
       </div>
-      <hr>
-      {% endfor %}{# for contributor in contributors #}
     </ul>
   </body>
 </html>