Improve UI in offline Yaksh

5 files changed, 285 insertions, 127 deletions

diff --git a/yaksh/static/yaksh/css/offline.css b/yaksh/static/yaksh/css/offline.css
index 1ec40ab..66d805e 100644
--- a/yaksh/static/yaksh/css/offline.css
+++ b/yaksh/static/yaksh/css/offline.css
@@ -1,18 +1,83 @@
-.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;
+}
+
+/*.footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #D3D3D3;
+    color: black;
+    text-align: center;
+}
+*/
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/index.html b/yaksh/templates/yaksh/index.html
index 9bd28d5..05ade47 100644
--- a/yaksh/templates/yaksh/index.html
+++ b/yaksh/templates/yaksh/index.html
@@ -27,32 +27,36 @@
             {% 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>
+    <div class="row justify-content-md-center">
+        <div class="col-md-10">
+            {% 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 %}
-                    </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 %}
+                </table>
+            {% endblock %}            
+        </div>
+    </div>
 </div>
 <footer class="footer" id="footer_div">
     <div class="container">
diff --git a/yaksh/templates/yaksh/quiz.html b/yaksh/templates/yaksh/quiz.html
index fd52e7d..256b282 100644
--- a/yaksh/templates/yaksh/quiz.html
+++ b/yaksh/templates/yaksh/quiz.html
@@ -4,12 +4,14 @@
     <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">
+<nav class="navbar bg-dark navbar-dark fixed-top">
     <div class="container-fluid">
         <div class="navbar-header">
             <a class="navbar-brand" href="#">
@@ -20,40 +22,75 @@
     </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>
-        <div id="status"></div>
-        <hr>
-        <h3>{{unit.description}}</h3>
-        <a href="http://127.0.0.1:8000/exam/start/{{quiz.questionpaper_set.get.id}}/{{module.id}}/{{course.id}}" target="_blank">{{quiz.description}}</a>
-        <br>
-         
-        {% 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 %}
+    
+    <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>                
+            <!-- loop -->
+            {% for unit in module.get_learning_units %}
+            {% if unit.type == 'lesson' %}
+              <li class="nav-item">
+                <a class="nav-link" 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" href="../{{unit.quiz.description|replace_spaces}}/{{unit.quiz.description|replace_spaces}}.html">
+                  {{unit.quiz.description}}
+                </a>
+              </li>            
+            {% endif %}
+            {% endfor %}
+            <!-- End of loop -->
+            </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://127.0.0.1:8000/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>
-<footer class="footer" id="footer_div">
-    <div class="container">
-        <p align="center">Developed by FOSSEE group, IIT Bombay</p>
+                {% 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>
diff --git a/yaksh/templates/yaksh/unit.html b/yaksh/templates/yaksh/unit.html
index c5bb1e5..1526454 100644
--- a/yaksh/templates/yaksh/unit.html
+++ b/yaksh/templates/yaksh/unit.html
@@ -4,12 +4,14 @@
     <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">
+<nav class="navbar bg-dark navbar-dark fixed-top">
     <div class="container-fluid">
         <div class="navbar-header">
             <a class="navbar-brand" href="#">
@@ -20,57 +22,106 @@
     </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>                
+            <!-- loop -->
+            {% for unit in module.get_learning_units %}
+            {% if unit.type == 'lesson' %}
+              <li class="nav-item">
+                <a class="nav-link" 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" href="../{{unit.quiz.description|replace_spaces}}/{{unit.quiz.description|replace_spaces}}.html">
+                  {{unit.quiz.description}}
+                </a>
+              </li>            
+            {% endif %}
+            {% endfor %}
+            <!-- End of loop -->
+            </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>
-                    {% 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>
+                        {% 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>
diff --git a/yaksh/views.py b/yaksh/views.py
index 0b70361..319acde 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)