Merge pull request #622 from CruiseDevice/offline_yaksh

Download course from yaksh for offline purpose.

9 files changed, 465 insertions, 171 deletions

diff --git a/yaksh/models.py b/yaksh/models.py
index d0161c1..c97a616 100644
--- a/yaksh/models.py
+++ b/yaksh/models.py
@@ -298,7 +298,7 @@ class Lesson(models.Model):
             if os.path.exists(file_path):
                 os.remove(file_path)
 
-    def _add_lesson_to_zip(self, module, course, zip_file, path):
+    def _add_lesson_to_zip(self, next_unit, module, course, zip_file, path):
         lesson_name = self.name.replace(" ", "_")
         course_name = course.name.replace(" ", "_")
         module_name = module.name.replace(" ", "_")
@@ -319,7 +319,8 @@ class Lesson(models.Model):
             path, "templates", "yaksh", "unit.html"
             ))
         lesson_data = {"course": course, "module": module,
-                       "lesson": self, "lesson_files": lesson_files}
+                       "lesson": self, "next_unit": next_unit,
+                       "lesson_files": lesson_files}
         write_templates_to_zip(zip_file, unit_file_path, lesson_data,
                                lesson_name, sub_folder_name)
 
@@ -567,6 +568,22 @@ class Quiz(models.Model):
         return '%s: on %s for %d minutes' % (desc, self.start_date_time,
                                              self.duration)
 
+    def _add_quiz_to_zip(self, next_unit, module, course, zip_file, path):
+        quiz_name = self.description.replace(" ", "_")
+        course_name = course.name.replace(" ", "_")
+        module_name = module.name.replace(" ", "_")
+        sub_folder_name = os.sep.join((
+            course_name, module_name, quiz_name
+            ))
+        unit_file_path = os.sep.join((
+            path, "templates", "yaksh", "quiz.html"
+            ))
+        quiz_data = {"course": course, "module": module,
+                     "quiz": self, "next_unit": next_unit}
+
+        write_templates_to_zip(zip_file, unit_file_path, quiz_data,
+                               quiz_name, sub_folder_name)
+
 
 ##########################################################################
 class LearningUnit(models.Model):
@@ -577,6 +594,9 @@ class LearningUnit(models.Model):
     quiz = models.ForeignKey(Quiz, null=True, blank=True)
     check_prerequisite = models.BooleanField(default=True)
 
+    def get_lesson_or_quiz(self):
+        return self.lesson if self.lesson else self.quiz
+
     def toggle_check_prerequisite(self):
         if self.check_prerequisite:
             self.check_prerequisite = False
@@ -774,12 +794,27 @@ class LearningModule(models.Model):
         course_name = course.name.replace(" ", "_")
         folder_name = os.sep.join((course_name, module_name))
         lessons = self.get_lesson_units()
-        for lesson in lessons:
-            lesson._add_lesson_to_zip(self, course, zip_file, path)
+
+        units = self.get_learning_units()
+        for idx, unit in enumerate(units):
+            next_unit = units[(idx + 1) % len(units)]
+            if unit.type == 'lesson':
+                unit.lesson._add_lesson_to_zip(next_unit,
+                                               self,
+                                               course,
+                                               zip_file,
+                                               path)
+            else:
+                unit.quiz._add_quiz_to_zip(next_unit,
+                                           self,
+                                           course,
+                                           zip_file,
+                                           path)
+
         module_file_path = os.sep.join((
             path, "templates", "yaksh", "module.html"
             ))
-        module_data = {"course": course, "module": self, "lessons": lessons}
+        module_data = {"course": course, "module": self, "units": units}
         write_templates_to_zip(zip_file, module_file_path, module_data,
                                module_name, folder_name)
 
diff --git a/yaksh/static/yaksh/css/offline.css b/yaksh/static/yaksh/css/offline.css
index 1ec40ab..134f102 100644
--- a/yaksh/static/yaksh/css/offline.css
+++ b/yaksh/static/yaksh/css/offline.css
@@ -1,18 +1,80 @@
-.footer {

-    position: fixed;

-    left: 0;

-    bottom: 0;

-    width: 100%;

-    background-color: #D3D3D3;

-    color: black;

-    text-align: center;

-}

-

-.module {

-    border: none;

-    border-spacing: 0;

-    border-collapse: collapse;

-}

-.module tr td:nth-child(2) {

-    border-left: 1px solid #D3D3D3;

-}
\ No newline at end of file
+#footer {
+  position:fixed;
+  bottom:0;
+  width:100%;
+  height:60px;   /* Height of the footer */
+  background-color: #D3D3D3;
+  color: black;
+  text-align: center;
+}
+
+.module {
+  border: none;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.module tr td:nth-child(2) {
+  border-left: 1px solid #D3D3D3;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100; /* Behind the navbar */
+  padding: 48px 0 0; /* Height of navbar */
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+
+.sidebar-sticky {
+  position: relative;
+  top: 0;
+  height: calc(100vh - 48px);
+  padding-top: .5rem;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+}
+
+@supports ((position: -webkit-sticky) or (position: sticky)) {
+  .sidebar-sticky {
+    position: -webkit-sticky;
+    position: sticky;
+  }
+}
+
+.sidebar .nav-link {
+  font-weight: 500;
+  color: #333;
+}
+
+.sidebar .nav-link .feather {
+  margin-right: 4px;
+  color: #999;
+}
+
+.sidebar .nav-link.active {
+  color: #007bff;
+}
+
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+  color: inherit;
+}
+
+.sidebar-heading {
+  font-size: .75rem;
+  text-transform: uppercase;
+}
+
+section{
+  padding: 2rem;
+}
+
+.bg-grey{
+  background-color:#dbf9f2;
+}
diff --git a/yaksh/templates/yaksh/course_modules.html b/yaksh/templates/yaksh/course_modules.html
index e1fdc51..8440d51 100644
--- a/yaksh/templates/yaksh/course_modules.html
+++ b/yaksh/templates/yaksh/course_modules.html
@@ -62,7 +62,7 @@
         <b style="color: black;">{{course_percentage}}% Completed</b>
         </div>
     </div>
-        
+
         {% for module, percent in modules %}
         <div class="yakshwell">
             <div class="row yakshlabel align-items-center">
@@ -72,14 +72,14 @@
 
                 <div class="col-md-1">
                     <a data-toggle="collapse" data-target="#learning_units{{module.id}}{{course.id}}" onclick="view_unit('learning_units{{module.id}}{{course.id}}');">
-                    <div class="btn yakshred"> 
+                    <div class="btn yakshred">
                     <span class="fa fa-caret-down fa-2x" id="learning_units{{module.id}}{{course.id}}_down" >
                     </span>
                     <span class="fa fa-caret-right fa-2x" id="learning_units{{module.id}}{{course.id}}_up" style="display: none; ">
                     </span>
                     </div>
                     </a>
-                    
+
                 </div>
                 <div class="col-md-5 ml-auto">
                     <div class="row align-items-center justify-content-md-end">
@@ -122,7 +122,7 @@
             </div>
             <div id="learning_units{{module.id}}{{course.id}}" class="collapse">
                         <table class="table yakshwell">
-                        
+
                         {% for unit in module.get_learning_units %}
                         <tr>
                             <td>
@@ -143,7 +143,7 @@
                                 {{unit.lesson.name}}
                             {% endif %}
                             </td>
-                            
+
                             <td>
                             {% get_unit_status course module unit user as status %}
                             {% if status == "completed" %}
diff --git a/yaksh/templates/yaksh/index.html b/yaksh/templates/yaksh/index.html
index c89405d..90a05fe 100644
--- a/yaksh/templates/yaksh/index.html
+++ b/yaksh/templates/yaksh/index.html
@@ -1,12 +1,15 @@
 {% load custom_filters %}
 <html>
-<link rel="stylesheet" href="static/css/bootstrap.css">
-<link rel="stylesheet" href="static/css/bootstrap.min.css">
-<link rel="stylesheet" href="static/css/offline.css">
-<script src="static/js/jquery-3.3.1.min.js"></script>
-<script src="static/js/bootstrap.min.js"></script>
-{% block pagetitle %} {{course.name}} {% endblock %}
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<head>
+    <link rel="stylesheet" href="static/css/bootstrap.css">
+    <link rel="stylesheet" href="static/css/bootstrap.min.css">
+    <link rel="stylesheet" href="static/css/offline.css">
+    <title>
+        {% block pagetitle %} {{course.name}} {% endblock %}
+    </title>
+</head>
+<body>
+<nav class="navbar bg-dark navbar-dark">
     <div class="container-fluid">
         <div class="navbar-header">
             <a class="navbar-brand" href="#">
@@ -24,36 +27,45 @@
             {% endblock %}
         </center>
     </h1>
-    {% block content %}
-        <table class="table">
-            {% for module in modules %}
-            <tr>
-            <td>
-                {{module.name}}
-                <div id="{{module.id}}" class="collapse">
-                    <ul class="list">
-                    {% for lesson in module.get_lesson_units %}
-                        <li>{{lesson.name}}</li>
-                    {% endfor %}
-                    </ul>
-                </div>
-            </td>
-            <td>
-                <button class="btn btn-info" data-toggle="collapse" data-target="#{{module.id}}">
-                    View Lessons
-                </button>
-            </td>
-            <td>
-                <a href="{{module.name|replace_spaces}}/{{module.name|replace_spaces}}.html" target="_blank" class="btn btn-primary">Go to Module</a>
-            </td>
-            </tr>
-            {% endfor %}
-        </table>
-    {% endblock %}
+    <div class="row justify-content-md-center">
+        <div class="col-md-10">
+            {% block content %}
+                {% for module in modules %}
+                    <section class="bg-grey text-center">
+                        <div class="row">
+                            <div class="col">
+                                {{module.name}}
+                            </div>
+                            <div class="col">
+                                <button class="btn btn-info" data-toggle="collapse" data-target="#{{module.id}}">
+                                    View Lessons
+                                </button>
+                            </div>
+                            <div class="col">
+                                <a href="{{module.name|replace_spaces}}/{{module.name|replace_spaces}}.html" target="_blank" class="btn btn-primary">Go to Module</a>
+                            </div>
+                        </div>
+                    </section>
+                    <br>
+                    <div id="{{module.id}}" class="collapse">
+                        <ul class="list-group">
+                            {% for lesson in module.get_lesson_units %}
+                                <li class="list-group-item">{{lesson.name}}</li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    <br>
+                {% endfor %}
+            {% endblock %}
+        </div>
+    </div>
 </div>
 <footer class="footer" id="footer_div">
     <div class="container">
         <p align="center">Developed by FOSSEE group, IIT Bombay</p>
     </div>
 </footer>
+</body>
+<script src="static/js/jquery-3.3.1.min.js"></script>
+<script src="static/js/bootstrap.min.js"></script>
 </html>
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/module.html b/yaksh/templates/yaksh/module.html
index 6109403..b062159 100644
--- a/yaksh/templates/yaksh/module.html
+++ b/yaksh/templates/yaksh/module.html
@@ -1,13 +1,14 @@
 {% load custom_filters %}
 <html>
-<link rel="stylesheet" href="../static/css/bootstrap.css">
-<link rel="stylesheet" href="../static/css/bootstrap.min.css">
-<link rel="stylesheet" href="../static/css/offline.css">
-<script src="../static/js/jquery-3.3.1.min.js"></script>
-<script src="../static/js/bootstrap.min.js"></script>
-<script src="https://vjs.zencdn.net/6.9.0/video.js"></script>
-{% block pagetitle %} {{module.name}} {% endblock %}
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<head>
+    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../static/css/offline.css">
+    <title>
+        {% block pagetitle %} {{module.name}} {% endblock %}        
+    </title>    
+</head>
+<body>
+ <nav class="navbar bg-dark navbar-dark">
     <div class="container-fluid">
         <div class="navbar-header">
             <a class="navbar-brand" href="#">
@@ -34,10 +35,16 @@
                 <h4><strong>Lessons (Click on lesson name to open lesson)
                 </strong></h4>
                 <ul class="list-group">
-                    {% for lesson in lessons %}
-                    <a href="{{lesson.name|replace_spaces}}/{{lesson.name|replace_spaces}}.html" target="_blank" class="list-group-item">
-                        {{lesson.name}}
+                    {% for unit in units %}
+                    {% if unit.type == 'lesson' %}
+                    <a href="{{unit.lesson.name|replace_spaces}}/{{unit.lesson.name|replace_spaces}}.html" target="_blank" class="list-group-item">
+                        {{unit.lesson.name}}
+                    </a>
+                    {% else %}
+                    <a href="{{unit.quiz.description|replace_spaces}}/{{unit.quiz.description|replace_spaces}}.html" target="_blank" class="list-group-item">
+                        {{unit.quiz.description}}
                     </a>
+                    {% endif %}
                     {% endfor %}
                 </ul>
             </td>
@@ -53,4 +60,8 @@
         <p align="center">Developed by FOSSEE group, IIT Bombay</p>
     </div>
 </footer>
+</body>
+<script src="../static/js/jquery-3.3.1.min.js"></script>
+<script src="../static/js/bootstrap.min.js"></script>
+<script src="https://vjs.zencdn.net/6.9.0/video.js"></script>
 </html>
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/quiz.html b/yaksh/templates/yaksh/quiz.html
new file mode 100644
index 0000000..156a2b1
--- /dev/null
+++ b/yaksh/templates/yaksh/quiz.html
@@ -0,0 +1,114 @@
+{% load custom_filters %}
+<html>
+<head>
+    <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../../static/css/offline.css">
+    <link rel="stylesheet" href="../../static/css/video-js.css">
+    <link rel="stylesheet" href="../../static/css/yakshcustom.css" type="text/css" />
+
+    <title>
+        {% block pagetitle %} {{course.name}} {% endblock %}
+    </title>
+</head>
+<body>
+<nav class="navbar bg-dark navbar-dark fixed-top">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="#">
+                <img src="../../static/images/yaksh_banner.png" alt="YAKSH">
+                </img>
+            </a>
+        </div>
+    </div>
+</nav>
+<div class="container" style="margin-top:50px">
+
+    <div class="row">
+        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
+          <div class="sidebar-sticky">
+            <ul class="nav flex-column">
+              <li class="nav-item">
+                <a class="nav-link active" href="#">
+                  {{ module.name }}
+                </a>
+              </li>
+              <div class="sidebar-submenu">
+                  <ul>
+                    <!-- loop -->
+                    {% for unit in module.get_learning_units %}
+                    {% if unit.type == 'lesson' %}
+                      <li class="nav-item">
+                        <a class="nav-link {% if unit.lesson.name == lesson.name %}active{% endif %}" href="../{{unit.lesson.name|replace_spaces}}/{{unit.lesson.name|replace_spaces}}.html">
+                          {{unit.lesson.name}}
+                        </a>
+                      </li>
+                    {% else %}
+                      <li class="nav-item">
+                        <a class="nav-link {% if unit.lesson.name == lesson.name %}active{% endif %}" href="../{{unit.quiz.description|replace_spaces}}/{{unit.quiz.description|replace_spaces}}.html">
+                          {{unit.quiz.description}}
+                        </a>
+                      </li>
+                    {% endif %}
+                    {% endfor %}
+                    <!-- End of loop -->
+                  </ul>
+              </div>
+            </ul>
+          </div>
+        </nav>
+        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
+            <div class="col-md-10">
+                <center>
+                    <h1>
+                        {% block subtitle %}
+                            {{course.name}}
+                        {% endblock %}
+                    </h1>
+                <hr>
+                </center>
+                {% block content %}
+                    <center><h2>{{module.name}}</h2></center>
+                    <hr>
+                    <div id="status"></div>
+                    <hr>
+                    <br>
+                    <div class="text-center">
+                        <!-- Change Yaksh TODO -->
+                        <a class="btn btn-success" href="http://yaksh.fossee.in/exam/start/{{quiz.questionpaper_set.get.id}}/{{module.id}}/{{course.id}}" target="_blank">{{quiz.description}}</a>
+                        {% if next_unit.type == 'lesson' %}
+                        <a class="btn btn-info" href="../{{next_unit.lesson.name|replace_spaces}}/{{next_unit.lesson.name|replace_spaces}}.html">
+                            Next
+                        </a>
+                        {% else %}
+                        <a class="btn btn-info" href="../{{next_unit.quiz.description|replace_spaces}}/{{next_unit.quiz.description|replace_spaces}}.html" target="_blank">
+                            Next
+                        </a>
+                        {% endif %}
+                    </div>
+
+                {% endblock %}
+            </div>
+        </main>
+    </div>
+    <footer class="footer" id="footer_div">
+            <p align="center">Developed by FOSSEE group, IIT Bombay</p>
+    </footer>
+</div>
+
+</body>
+<script src="../../static/js/jquery-3.3.1.min.js"></script>
+<script src="../../static/js/bootstrap.min.js"></script>
+<script src="../../static/js/video.js"></script>
+
+<script type="text/javascript">
+$(document).ready(function(){
+    var online = navigator.onLine;
+    if(online){
+        var status = document.getElementById("status").innerHTML = "<span class='badge badge-success'>User is online</span>";
+
+    }else{
+        document.getElementById("status").innerHTML = "<span class='badge badge-danger'>User is offline</span>";
+    }
+});
+</script>
+</html>
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/quizzes_user.html b/yaksh/templates/yaksh/quizzes_user.html
index ee5b684..eb3705e 100644
--- a/yaksh/templates/yaksh/quizzes_user.html
+++ b/yaksh/templates/yaksh/quizzes_user.html
@@ -14,7 +14,7 @@
     {% endif %}
 
     {% block navtab %}
-        {% if 'Enrolled Courses' not in title%} 
+        {% if 'Enrolled Courses' not in title%}
             <div class="container">
                 <div class="nav nav-tabs yakshnavtab">
                   <li class="nav-item" >
@@ -25,13 +25,13 @@
                   </li>
                 </div>
             </div>
-            <div class="row justify-content-center yakshwell"> 
+            <div class="row justify-content-center yakshwell">
             <div class="col-md-6">
                 <div class="yakshwell">
                         <form action="{{ URL_ROOT }}/exam/quizzes/" method="post" id="custom-search-form" >
                             {% csrf_token %}
                             <div class="col-md-12">
-                                <div class="input-group"> 
+                                <div class="input-group">
                                     <div class="input-group-prepend">
                                     <span class="input-group-text" id="basic-addon1">Search Course</span>
                                     </div>
@@ -63,7 +63,7 @@
     {% if not courses %}
         <center><div class="col-md-8 alert alert-warning animated flash" role="alert">
             No Courses to display
-        </div></center>    
+        </div></center>
     {% endif %}
 
     <div class="row justify-content-md-center align-items-center" >
@@ -89,46 +89,44 @@
                         {{course.data.days_before_start}} day(s) to start
                     </span>
                     {% endif %}
-                    
+
                 </div>
-                <div class="container col-sm-4 offset-sm-2">
-                    <span class="row align-items-center">
-                        <span class="col-sm-4" >   
-                        <a class="btn btn-primary" data-toggle="collapse" href="#collapsedetails{{course.data.id}}" role="button" aria-expanded="false" aria-controls="#collapsedetails{{course.data.id}}">DETAILS</a>
-                        </span>
-                        
-                        <span class="col-sm-auto">
-                            {% if user in course.data.requests.all %} <span class="badge badge-warning">Request Pending </span>
-                            {% elif user in course.data.rejected.all %}<span class="badge badge-danger">Request Rejected</span>
-                            {% elif user in course.data.students.all %}
-                                <a class="btn btn-success" href="{{URL_ROOT}}/exam/course_modules/{{course.data.id}}" >
-                                {% if course.completion_percentage > 0 %}
-                                    CONTINUE
+                <div class="container-fluid">
+                    <a class="btn btn-primary" data-toggle="collapse" href="#collapsedetails{{course.data.id}}" role="button" aria-expanded="false" aria-controls="#collapsedetails{{course.data.id}}">DETAILS</a>
+                    {% if user in course.data.requests.all %} <span class="badge badge-warning">Request Pending </span>
+                    {% elif user in course.data.rejected.all %}<span class="badge badge-danger">Request Rejected</span>
+                    {% elif user in course.data.students.all %}
+                    {% if course.data.has_lessons %}
+                        <a href="{% url 'yaksh:download_course' course.data.id %}" data-toggle="tooltip" title="Download course content" class="btn btn-primary">
+                            Download Course
+                        </a>
+                    {% endif %}
+                    <a class="btn btn-success" href="{{URL_ROOT}}/exam/course_modules/{{course.data.id}}" >
+                        {% if course.completion_percentage > 0 %}
+                            CONTINUE
+                        {% else %}
+                            START
+                        {% endif %}
+                    </a>
+                    {% else %}
+                        {% if course.data.active %}
+                            {% if course.data.is_active_enrollment %}
+                                {% if course.data.is_self_enroll %}
+                                    <a class="btn btn-success" href="{{ URL_ROOT }}/exam/self_enroll/{{ course.data.id }}">ENROLL</a>
                                 {% else %}
-                                    START
+                                    <a class="btn btn-success" href="{{ URL_ROOT }}/exam/enroll_request/{{ course.data.id }}">ENROLL</a>
                                 {% endif %}
-                                </a>
                             {% else %}
-                                {% if course.data.active %}
-                                    {% if course.data.is_active_enrollment %}
-                                        {% if course.data.is_self_enroll %}
-                                            <a class="btn btn-success" href="{{ URL_ROOT }}/exam/self_enroll/{{ course.data.id }}">ENROLL</a>
-                                        {% else %}
-                                            <a class="btn btn-success" href="{{ URL_ROOT }}/exam/enroll_request/{{ course.data.id }}">ENROLL</a>
-                                        {% endif %}
-                                    {% else %}
-                                        <span class="btn btn-danger disabled" style="font-size: 15px">
-                                            Enrollment Closed
-                                        </span>
-                                    {% endif %}
-                                {% else %}
-                                    <span class="badge badge-danger" style="font-size: 15px">
-                                        Inactive Course
-                                    </span>
-                                {% endif %}
+                                <span class="btn btn-danger disabled" style="font-size: 15px">
+                                    Enrollment Closed
+                                </span>
                             {% endif %}
-                        </span>
-                    </span>
+                        {% else %}
+                            <span class="badge badge-danger" style="font-size: 15px">
+                                Inactive Course
+                            </span>
+                        {% endif %}
+                    {% endif %}
                 </div>
                      <!-- About course-->
              <div class="collapse container-fluid" id="collapsedetails{{course.data.id}}">
@@ -147,7 +145,7 @@
                                     {% for module in course.data.get_learning_modules %}
                                     <li>{{module.name|title}}</li>
                                     {% endfor %}
-                                </ul>    
+                                </ul>
                             </p>
                         {% endif %}
                         <p> <span class="yakshred yakshheading">Instructor</span><br>
@@ -178,8 +176,8 @@
                         </div>
                         <div class="row my-3">
                                 <div class="progress-bar bg-success" role="progressbar" style="width:{{course.completion_percentage}}%"; color: black;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">{{course.completion_percentage}} % completed
-                                </div>
-                        </div>                            
+                        </div>
+                        </div>
                     </div>
                 </div>
               </div>
diff --git a/yaksh/templates/yaksh/unit.html b/yaksh/templates/yaksh/unit.html
index 5bf11f1..45092a6 100644
--- a/yaksh/templates/yaksh/unit.html
+++ b/yaksh/templates/yaksh/unit.html
@@ -1,13 +1,17 @@
 {% load custom_filters %}
 <html>
-<link rel="stylesheet" href="../../static/css/bootstrap.css">
-<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
-<link rel="stylesheet" href="../../static/css/offline.css">
-<link rel="stylesheet" href="../../static/css/video-js.css">
-<script src="../../static/js/jquery-3.3.1.min.js"></script>
-<script src="../../static/js/bootstrap.min.js"></script>
-<script src="../../static/js/video.js"></script>
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<head>
+    <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../../static/css/offline.css">
+    <link rel="stylesheet" href="../../static/css/video-js.css">
+    <link rel="stylesheet" href="../../static/css/yakshcustom.css" type="text/css" />
+
+    <title>
+            {% block pagetitle %} {{module.name}} {% endblock %}        
+    </title>
+</head>
+<body>
+<nav class="navbar bg-dark navbar-dark fixed-top">
     <div class="container-fluid">
         <div class="navbar-header">
             <a class="navbar-brand" href="#">
@@ -18,55 +22,112 @@
     </div>
 </nav>
 <div class="container" style="margin-top:50px">
-    <center>
-        <h1>
-            {% block subtitle %}
-                {{course.name}}
-            {% endblock %}
-        </h1>
-    <hr>
-    </center>
-    {% block content %}
-        <center><h2>{{module.name}}</h2></center>
-        <hr>
-        <h3>{{lesson.name}}</h3>
-        {% if lesson.video_file %}
-            <video id="lesson_video" height="500" class="video-js" controls preload="auto" data-setup='{"playbackRates": [0.5, 1, 1.5, 2]}'>
-                <source src="{{lesson.video_file.name|file_title}}">
-            </video>
-        {% endif %}
-        <br>
-        <table class="table">
-            <tr>
-                <td>
-                {{lesson.html_data|safe}}
-                </td>
-                <td>
-                {% if lesson_files %}
-                    <h4><strong>Lesson Files (Click on lesson file to download)
-                    </strong></h4>
-                    <ul class="list-group">
-                    {% for file in lesson_files %}
-                        <a href="{{file.file.name|file_title}}" class="list-group-item">
-                            {{file.file.name|file_title}}
+
+    <div class="row">
+        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
+          <div class="sidebar-sticky">
+            <ul class="nav flex-column">
+              <li class="nav-item">
+                <a class="nav-link active" href="#">
+                  {{ module.name }}
+                </a>
+              </li>
+              <div class="sidebar-submenu">
+                <ul>
+                    <!-- loop -->
+                    {% for unit in module.get_learning_units %}
+                    {% if unit.type == 'lesson' %}
+                      <li class="nav-item">
+                        <a class="nav-link {% if unit.lesson.name == lesson.name %}active{% endif %}" href="../{{unit.lesson.name|replace_spaces}}/{{unit.lesson.name|replace_spaces}}.html">
+                          {{unit.lesson.name}}
                         </a>
+                      </li>
+                    {% else %}
+                      <li class="nav-item">
+                        <a class="nav-link {% if unit.lesson.name == lesson.name %}active{% endif %}" href="../{{unit.quiz.description|replace_spaces}}/{{unit.quiz.description|replace_spaces}}.html">
+                          {{unit.quiz.description}}
+                        </a>
+                      </li>
+                    {% endif %}
                     {% endfor %}
-                    </ul>
-                {% else %}
-                    <ul class="list-group">
-                        <li class="list-group-item">
-                            <h4>No files for {{lesson.name}}</h4>
-                        </li>
-                    </ul>
-                {% endif %}
-                </td>
-            </tr>
-        </table>
-    {% endblock %}
-</div>
-<footer class="footer" id="footer_div">
-    <div class="container">
-        <p align="center">Developed by FOSSEE group, IIT Bombay</p>
+                    <!-- End of loop -->
+                </ul>
+              </div>
+            </ul>
+          </div>
+        </nav>
+
+        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
+            <div class="col-md-10">
+                <center>
+                    <h1>
+                        {% block subtitle %}
+                            {{course.name}}
+                        {% endblock %}
+                    </h1>
+                <hr>
+                </center>
+                {% block content %}
+                    <center><h2>{{module.name}}</h2></center>
+                    <hr>
+                    <h3>{{lesson.name}}</h3>
+                    {% if lesson.video_file %}
+                        <video id="lesson_video" height="500" class="video-js" controls preload="auto" data-setup='{"playbackRates": [0.5, 1, 1.5, 2]}'>
+                            <source src="{{lesson.video_file.name|file_title}}">
+                        </video>
+                    {% endif %}
+                    <br>
+                    <table class="table">
+                        <tr>
+                            <td>
+                            {{lesson.html_data|safe}}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                            {% if lesson_files %}
+                                <h4><strong>Lesson Files (Click on lesson file to download)
+                                </strong></h4>
+                                <ul class="list-group">
+                                {% for file in lesson_files %}
+                                    <a href="{{file.file.name|file_title}}" class="list-group-item">
+                                        {{file.file.name|file_title}}
+                                    </a>
+                                {% endfor %}
+                                </ul>
+                            {% else %}
+                                <ul class="list-group">
+                                    <li class="list-group-item">
+                                        <h4>No files for {{lesson.name}}</h4>
+                                    </li>
+                                </ul>
+                            {% endif %}
+                            </td>
+                        </tr>
+                    </table>
+                    <div class="text-center">
+                        <!-- Change Yaksh TODO -->
+                        {% if next_unit.type == 'lesson' %}
+                        <a class="btn btn-info" href="../{{next_unit.lesson.name|replace_spaces}}/{{next_unit.lesson.name|replace_spaces}}.html">
+                            Next
+                        </a>
+                        {% else %}
+                        <a class="btn btn-info" href="../{{next_unit.quiz.description|replace_spaces}}/{{next_unit.quiz.description|replace_spaces}}.html" target="_blank">
+                            Next
+                        </a>
+                        {% endif %}
+                    </div>
+                {% endblock %}
+            </div>
+        </main>
     </div>
-</footer>
+    <footer class="footer" id="footer_div">
+            <p align="center">Developed by FOSSEE group, IIT Bombay</p>
+    </footer>
+</div>
+
+</body>
+<script src="../../static/js/jquery-3.3.1.min.js"></script>
+<script src="../../static/js/bootstrap.min.js"></script>
+<script src="../../static/js/video.js"></script>
 </html>
\ No newline at end of file
diff --git a/yaksh/views.py b/yaksh/views.py
index 8d179b4..0bf91eb 100644
--- a/yaksh/views.py
+++ b/yaksh/views.py
@@ -2943,7 +2943,8 @@ def download_course(request, course_id):
     static_files = {"js": ["bootstrap.min.js",
                            "jquery-3.3.1.min.js", "video.js"],
                     "css": ["bootstrap.min.css",
-                            "video-js.css", "offline.css"],
+                            "video-js.css", "offline.css",
+                            "yakshcustom.css"],
                     "images": ["yaksh_banner.png"]}
     zip_file = course.create_zip(current_dir, static_files)
     zip_file.seek(0)