Restructure site and bug fixes

Fixes coala#44 Closes coala#1
ashwini0529 · Dec 15, 2017 · cec381a · cec381a
1 parent 3080184
commit cec381a
Show file tree

Hide file tree

Showing 15 changed files with 310 additions and 63 deletions.
diff --git a/activity/views.py b/activity/views.py
@@ -0,0 +1,10 @@
+from django.shortcuts import render
+
+
+def index(request):
+    org_name = open('org_name.txt').readline()
+    return render(request, 'activity.html', {'org_name': org_name})
+
+def return_org_name(request):
+    org_name = open('org_name.txt').readline()
+    return {'org_name': org_name}
diff --git a/community/context_processors.py b/community/context_processors.py
@@ -0,0 +1,3 @@
+def get_org_name(request):
+    org_name = open('org_name.txt').readline()
+    return {'org_name': org_name}
diff --git a/community/settings.py b/community/settings.py
@@ -89,3 +89,4 @@
 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/community/urls.py b/community/urls.py
@@ -9,6 +9,7 @@
 
 from gci.views import index as gci_index
 from twitter.view_twitter import index as twitter_index
+from activity.views import index as activity_index
 
 
 def get_index():
@@ -25,7 +26,7 @@ def get_index():
         distill_file='index.html',
     ),
     distill_url(
-        r'activity/', TemplateView.as_view(template_name='activity.html'),
+        r'activity/', activity_index,
         name='activity',
         distill_func=get_index,
         distill_file='activity/index.html',

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,52 @@
-<!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>
 
-<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 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>
     </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 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,29 @@
+<!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="../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"/>
+</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,120 @@
-<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 GCI 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">
+
+
+
+        <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>
+    </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/{{ twitter_handle }}">Tweets by {{ twitter_handle }}
+</a>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div></div>
+
+{% include 'footer.html' %}
+{% endblock %}
+</body>
+</html>