Restructure site and bug fixes

Fixes coala#44 Closes coala#1
ashwini0529 · Dec 16, 2017 · e1e4b6b · e1e4b6b
1 parent 3ef530f
commit e1e4b6b
Show file tree

Hide file tree

Showing 14 changed files with 264 additions and 65 deletions.
diff --git a/activity/views.py b/activity/views.py
@@ -0,0 +1,5 @@
+from django.shortcuts import render
+
+
+def index(request):
+    return render(request, 'activity.html')
diff --git a/community/context_processors.py b/community/context_processors.py
@@ -0,0 +1,6 @@
+from community.git import get_owner
+
+
+def get_org_name(request):
+    org_name = get_owner()
+    return {'org_name': org_name}
diff --git a/community/settings.py b/community/settings.py
@@ -89,3 +89,5 @@
 MEDIA_URL = '/media/'
 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
 STATICFILES_DIRS = ['static/']
+TEMPLATES[0]['OPTIONS']['context_processors'].append(
+    'community.context_processors.get_org_name')
diff --git a/static/css/main.css b/static/css/main.css
@@ -0,0 +1,20 @@
+.student {
+    padding-bottom: 20px;
+}
+
+.students {
+    list-style: none;
+}
+nav {
+    background-color: #38474e !important;
+}
+
+.page-footer {
+    background-color: #37474f !important;
+}
+
+canvas {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
diff --git a/static/charts.js → static/js/charts.js b/static/charts.js → static/js/charts.js
diff --git a/static/timeago.js → static/js/timeago.js b/static/timeago.js → static/js/timeago.js
diff --git a/static/main.css b/static/main.css
diff --git a/templates/activity.html b/templates/activity.html
@@ -1,41 +1,29 @@
-<!doctype html>
-<html>
+{% extends 'includes.html' %}
+{% block content %}
+<div class="section no-pad-bot" id="index-banner">
+        <div class="container">
+            <h1 class="header center  col-test">Welcome</h1>
+            <div class="row center">
+                <h5 class="header col s12 light">Hello, world. You are at the {{ org_name }} community GCI website.</h5>
+            </div>
+        </div>
+    {% include 'issues_graph.html' %}
 
-<head>
-    <title>Community Activity</title>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-</head>
-
-<body>
-    <h1>Community Activity</h1>
-    <br>
-    <br>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
     </div>
-    <select id="chartType">
-        <option value="Month">Year</option>
-        <option value="Week">Month</option>
-        <option value="Day">Week</option>
-    </select>
-    <br>
-    <br>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-    <script src="/static/charts.js"></script>
-    <script>
-    $('#chartType').on('change', function(){
-        updateChart($('#chartType').val())
-    });
-    updateChart($('#chartType').val());
-    </script>
-</body>
 
+    {% include 'footer.html' %}
+      <!--Import jQuery before materialize.js-->
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
+      <script src="../static/js/charts.js"></script>
+      <script>
+          $(document).ready(function() {
+              $('select').material_select();
+          });
+          $('#chartType').on('change', function(){
+              updateChart($('#chartType').val())
+          });
+          updateChart($('#chartType').val());
+      </script>
+{% endblock %}
+    </body>
 </html>
diff --git a/templates/footer.html b/templates/footer.html
@@ -0,0 +1,38 @@
+<footer class="page-footer">
+    <div class="container">
+        <div class="row">
+            <div class="col m3 s12">
+                <h5 class="white-text fine">{{ org_name }}</h5>
+                <ul>
+                    <li><a class="grey-text text-lighten-3" href="http://{{ org_name }}.io/docs">Documentation</a></li>
+                    <li><a class="grey-text text-lighten-3" href="http://{{ org_name }}.io/newcomer">Newcomer Docs</a></li>
+                    <li><a class="grey-text text-lighten-3" href="http://{{ org_name }}.io/coc">Code of Conduct</a></li>
+                    <li><a class="grey-text text-lighten-3" href="http://blog.{{ org_name }}.io/">Blog</a></li>
+                    <li><a class="grey-text text-lighten-3" href="mailto:sponsoring@{{ org_name }}.io">Donate</a></li>
+                </ul>
+            </div>
+            <div class="col m9 s12">
+                <div class="row footer-btn-row">
+                    <div class="col m6 s12 center">
+                        <div class="twitter-btn center">
+                            <a href="https://twitter.com/{{ org_name }}_io" class="waves-effect waves-light btn-large"><i class="fa fa-twitter" aria-hidden="true"></i><span class="footer-btn-text">Follow Us On Twitter</span></a>
+                        </div>
+                        <br>
+                    </div>
+                    <div class="col m6 s12 center">
+                        <div class="gitter-btn center">
+                            <a href="https://gitter.im/{{ org_name }}" class="waves-effect waves-light btn-large"><i class="fa fa-commenting-o" aria-hidden="true"></i><span class="footer-btn-text">Join Chat On Gitter</span></a>
+                        </div>
+                        <br>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="footer-copyright">
+        <div class="container">
+            <span class="left">© 2017 {{ org_name }}</span>
+            <a class="grey-text text-lighten-4 right" href="#!">GNU AGPL v3.0</a>
+        </div>
+    </div>
+</footer>
diff --git a/templates/includes.html b/templates/includes.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <!--Import Google Icon Font-->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!--Import materialize.css-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="../static/css/main.css">
+    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <!--Let browser know website is optimized for mobile-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+</head>
+<body>
+
+<nav>
+    <div class="nav-wrapper">
+        <a href="#" class="brand-logo">&nbsp;<img
+                src="https://api.{{ org_name }}.io/en/latest/_static/images/{{ org_name }}_logo.svg"></a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down">
+            <li><a href="/gci">GCI</a></li>
+            <li><a href="/activity">Github Activity</a></li>
+            <li><a href="/twitter">Twitter Feed</a></li>
+        </ul>
+    </div>
+</nav>
+
+{% block content %}
+{% endblock %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
diff --git a/templates/index.html b/templates/index.html
@@ -1,8 +1,97 @@
-<title>Community website</title>
-<body>
-<ul>
-    <li><a href="/gci/">Google Code-in</a>
-    <li><a href="/activity/">GitHub activity</a>
-    <li><a href="/twitter/">Twitter Feed</a>
-</ul>
+{% extends 'includes.html' %}
+
+{% block content %}
+    <div class="section no-pad-bot" id="index-banner">
+        <div class="container">
+            <h1 class="header center  col-test">Welcome</h1>
+            <div class="row center">
+                <h5 class="header col s12 light">Hello, world. You are at the {{ org_name }} community website.</h5>
+                <h4 class="header col s12 light">Meet awesome mentors</h4>
+
+            </div>
+             <div class="row">
+
+                <div class="col s4">
+            <div class="card" style="overflow: visible;">
+              <div class="card-image waves-effect waves-block waves-light">
+                <img class="activator" src="https://api.{{ org_name }}.io/en/latest/_static/images/{{ org_name }}_logo.svg">
+              </div>
+              <div class="card-content">
+                <span class="card-title activator grey-text text-darken-4">Mentor Name<i class="material-icons right">more_vert</i></span>
+
+              </div>
+              <div class="card-reveal" style="display: none; transform: translateY(0px);">
+                <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
+                <p>Here is some more information about this product that is only revealed once clicked on.</p>
+              </div>
+
+              <div class="card-action">
+                <a href="#">Github</a>
+                <a href="#">Twitter</a>
+              </div>
+            </div></div>
+                 <div class="col s4">
+            <div class="card" style="overflow: visible;">
+              <div class="card-image waves-effect waves-block waves-light">
+                <img class="activator" src="https://api.{{ org_name }}.io/en/latest/_static/images/{{ org_name }}_logo.svg">
+              </div>
+              <div class="card-content">
+                <span class="card-title activator grey-text text-darken-4">Mentor Name<i class="material-icons right">more_vert</i></span>
+
+              </div>
+              <div class="card-reveal" style="display: none; transform: translateY(0px);">
+                <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
+                <p>Here is some more information about this product that is only revealed once clicked on.</p>
+              </div>
+
+              <div class="card-action">
+                <a href="#">Github</a>
+                <a href="#">Twitter</a>
+              </div>
+            </div></div>
+                 <div class="col s4">
+            <div class="card" style="overflow: visible;">
+              <div class="card-image waves-effect waves-block waves-light">
+                <img class="activator" src="https://api.{{ org_name }}.io/en/latest/_static/images/{{ org_name }}_logo.svg">
+              </div>
+              <div class="card-content">
+                <span class="card-title activator grey-text text-darken-4">Mentor Name<i class="material-icons right">more_vert</i></span>
+
+              </div>
+              <div class="card-reveal" style="display: none; transform: translateY(0px);">
+                <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
+                <p>Here is some more information about this product that is only revealed once clicked on.</p>
+              </div>
+
+              <div class="card-action">
+                <a href="#">Github</a>
+                <a href="#">Twitter</a>
+              </div>
+            </div>
+                 </div>
+            </div>
+            <h4 class="header col s12 light center">Recent Activity</h4>
+<div class="section no-pad-bot" id="index-banner">
+
+        {% include 'issues_graph.html' %}
+</div>
+      <!--Import jQuery before materialize.js-->
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
+      <script src="../static/js/charts.js"></script>
+      <script>
+          $(document).ready(function() {
+              $('select').material_select();
+          });
+          $('#chartType').on('change', function(){
+              updateChart($('#chartType').val())
+          });
+          updateChart($('#chartType').val());
+      </script>
+        </div>
+    </div>
+
+{% include 'footer.html' %}
+{% endblock %}
 </body>
+</html>
+
diff --git a/templates/issues_graph.html b/templates/issues_graph.html
@@ -0,0 +1,22 @@
+<div class="row center">
+    <div class="input-field col s4">
+        <select id="chartType">
+            <option value="Month" selected>Year</option>
+            <option value="Week">Month</option>
+            <option value="Day">Week</option>
+        </select>
+        <label>Time Interval</label>
+    </div>
+    <div class="col s12 center">
+
+        <div class="card white darken-1">
+            <div class="card-content black-text">
+                <span class="card-title">Issues</span>
+
+                <div>
+                    <canvas id="canvas"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/templates/twitter_feed.html b/templates/twitter_feed.html
@@ -0,0 +1,12 @@
+{% extends 'includes.html' %}
+{% block content %}
+<div class="section no-pad-bot" id="index-banner">
+        <div class="container">
+<a class="twitter-timeline" href="https://twitter.com/{{ org_twitter_handle }}">Tweets by {{ org_twitter_handle }}
+</a>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div></div>
+
+{% include 'footer.html' %}
+{% endblock %}
+</body>
+</html>
diff --git a/twitter/view_twitter.py b/twitter/view_twitter.py
@@ -1,3 +1,4 @@
+from django.shortcuts import render
 from django.http import HttpResponse
 import requests
 import json
@@ -6,26 +7,18 @@
 
 
 def index(request):
-    s = []
-
     org_twitter_handle = org_name = get_owner()
-
-    s.append('<link rel="shortcut icon" type="image/png" '
-             'href="../static/favicon.png"/>')
-
     api_data_dump = json.loads(
         requests.get('https://gci-leaders.netlify.com/data.json').content)
     for item in api_data_dump:
         if item['name'] == org_name:
             org_twitter_handle = item['twitter_url'].split(
                 'twitter.com/')[-1]
+    org_data = {
+        'org_twitter_handle': org_twitter_handle
+    }
     if org_twitter_handle is not None:
-        s.append('<a class="twitter-timeline" data-height="1000" '
-                 'data-link-color="#2B7BB9" '
-                 'href="https://twitter.com/{twitter_handle}">'
-                 'Tweets by {twitter_handle}</a> <script async '
-                 'src="https://platform.twitter.com/widgets.js" '
-                 'charset="utf-8"></script>'.format(
-                     twitter_handle=org_twitter_handle))
+        return render(request, 'twitter_feed.html', context=org_data)
+    else:
+        return HttpResponse("Sorry, Organisation's twitter handle not found!")
 
-    return HttpResponse('\n'.join(s))