Multiple UI Changes:

- Change Course Status page UI
- Fix breaking alignment in Monitor Page summary table

2 files changed, 47 insertions, 31 deletions

diff --git a/yaksh/templates/yaksh/course_detail.html b/yaksh/templates/yaksh/course_detail.html
index a0a6ed2..eccdceb 100644
--- a/yaksh/templates/yaksh/course_detail.html
+++ b/yaksh/templates/yaksh/course_detail.html
@@ -132,17 +132,26 @@
                 {% elif state == "course_status" %}
                     <div class="course_data">
                         
-                        <center><div class="yakshlabel">
-                            <input type="hidden" id="course_name" value="{{course.name}}">
-                            <a href="#" class="btn btn-outline-success pull-right" id="export">Export to CSV</a><h5>Course Status</h5>
-                        </div></center>
+                        <center>
+                            <div class="row">
+                                <div class="col-md-4">
+                                    <h5>Course Status</h5>
+                                </div>
+                                <div class="col-md-4">
+                                    Number Of Students: {{ student_details | length }}
+                                </div>
+                                <div class="col-md-4">
+                                    <input type="hidden" id="course_name" value="{{course.name}}">
+                                    <a href="#" class="btn btn-outline-success pull-right" id="export">Export to CSV</a>
+                                </div>
+                            </div>
+                        </center>
                         <div class="yakshwell">
                         <table class="tablesorter table table-bordered table-responsive-sm" id="course_table" data-sortlist="[0,0]">
                         <thead>
                             <tr class="yakshlight">
-                            <th>Sr No.</th>
                             <th>Roll No.</th>
-                            <th>Email</th>
+                            <th>Name</th>
                             <th>Current Unit</th>
                             <th>Course Completion Percentage</th>
                             <th>Grade</th>
@@ -151,26 +160,18 @@
                         <tbody>
                             {% for student, grade, percent, unit in student_details %}
                                 <tr>
-                                <td width="5%">
-                                    {{forloop.counter}}.
-                                </td>
                                 <td>
                                     {{ student.profile.roll_number}}
                                 </td>                            
                                 <td width="50%">
                                     <a class="user_data" data-item-id="{{course.id}}+{{student.id}}" data-toggle="tooltip" title="Click to view Overall Course progress" data-placement="top">
-                                        {% if student.email %}
-                                            {{ student.email }}
-                                        {% else %}
-                                            {{ student.get_full_name|title}}
-                                        {% endif %}
+                                        {{ student.get_full_name|title}}
                                         <i class="fa fa-caret-down"></i>
                                     </a>
                                     <div id="show_status_{{course.id}}_{{student.id}}" style="display: None;">
                                     </div>
                                 </td>
                                 <td>
-                                    {{ student.get_full_name|title }}
                                     {% if unit %}
                                         {% if unit.type == 'quiz' %}
                                             {{unit.quiz.description}}
diff --git a/yaksh/templates/yaksh/monitor.html b/yaksh/templates/yaksh/monitor.html
index 1f85938..54e4ce1 100644
--- a/yaksh/templates/yaksh/monitor.html
+++ b/yaksh/templates/yaksh/monitor.html
@@ -68,24 +68,39 @@ $(document).ready(function()
         {% if quiz %}
         {% if papers %}
         <div class="row">
-        <div class="card col-md-4">
-            <div class="row">
-                <div class="col"><b>Course Name:<br>Quiz Name:<br>Number of papers:<br>Papers completed:<br>Papers in progress:</b>
-                </div>
-                <div class="col">                
-                     {{ course.name }}<br>
-                     {{ quiz.description }}<br>
-                    {{ papers|length }}<br>
-                    {% completed papers as completed_papers %}
-                     {# template tag used to get the count of completed papers #}
-                      <b class="yakshred"> {{ completed_papers }} </b><br>
-                    {% inprogress papers as inprogress_papers %}
-                     {# template tag used to get the count of inprogress papers #}
-                     <b class="yakshred">  {{ inprogress_papers }} </b>
-                </div>
+        <div class="card col-md-10">
+            <div class = "table-responsive"">
+                <table class = "table">
+                    <tr>
+                        <td><b>Course Name:&nbsp</b></td>
+                        <td>{{course.name}}</td>
+                    </tr>
+                    <tr>
+                        <td><b>Quiz Name:&nbsp</b></td>
+                        <td>{{quiz.description}}</td>
+                    </tr>
+                    <tr>
+                        <td><b>Number of papers: &nbsp</b></td>
+                        <td>{{papers|length}}</td>
+                    </tr>
+                    <tr>
+                        <td><b>Papers Completed: &nbsp</b></td>
+                        <td>
+                            {% completed papers as completed_papers %}
+                            <b class = "yakshred">{{completed_papers}}</b>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><b>Papers in progress: &nbsp</b></td>
+                        <td>
+                            {% inprogress papers as inprogress_papers %}
+                            <b class="yakshred">  {{ inprogress_papers }} </b>
+                        </td>
+                    </tr>
+                </table>
             </div>
          </div>
-         <div class="col">
+         <div class="col-md-2">
                 <p><a href="{{URL_ROOT}}/exam/manage/statistics/question/{{papers.0.question_paper.id}}/{{course.id}}" class="btn btn-primary">Question Statisitics</a></p>
                 <p>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#csvModal">