UI improvements

- show lessons in tree structure on sidebar menu.
- Use div inplace of table in index.html to show modules and lessons.

3 files changed, 66 insertions, 56 deletions

diff --git a/yaksh/templates/yaksh/index.html b/yaksh/templates/yaksh/index.html
index 05ade47..cf5f35c 100644
--- a/yaksh/templates/yaksh/index.html
+++ b/yaksh/templates/yaksh/index.html
@@ -30,30 +30,32 @@
     <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 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>{{lesson.name}}</li>
+                                <li class="list-group-item">{{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>
+                        </ul>
+                    </div>
+                    <br>
+                {% endfor %}
             {% endblock %}            
         </div>
     </div>
diff --git a/yaksh/templates/yaksh/quiz.html b/yaksh/templates/yaksh/quiz.html
index 256b282..fca0cad 100644
--- a/yaksh/templates/yaksh/quiz.html
+++ b/yaksh/templates/yaksh/quiz.html
@@ -31,24 +31,28 @@
                 <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 -->
+              <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" 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>
             </ul>
           </div>
         </nav>
diff --git a/yaksh/templates/yaksh/unit.html b/yaksh/templates/yaksh/unit.html
index 1526454..1ceffe8 100644
--- a/yaksh/templates/yaksh/unit.html
+++ b/yaksh/templates/yaksh/unit.html
@@ -31,24 +31,28 @@
                 <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 -->
+              <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" 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>
             </ul>
           </div>
         </nav>