Merge pull request #585 from CruiseDevice/course_status_ui

Multiple UI Changes

3 files changed, 54 insertions, 35 deletions

diff --git a/yaksh/static/yaksh/css/yakshcustom.css b/yaksh/static/yaksh/css/yakshcustom.css
index 1a2c45c..4aba382 100644
--- a/yaksh/static/yaksh/css/yakshcustom.css
+++ b/yaksh/static/yaksh/css/yakshcustom.css
@@ -225,6 +225,8 @@ html {
 .table-wrapper-2 {
     display: block;
     max-height: 500px;
+    padding-top: 1em;
+    width: 100%;
     overflow-y: auto;
     -ms-overflow-style: -ms-autohiding-scrollbar;
 }
diff --git a/yaksh/templates/yaksh/course_detail.html b/yaksh/templates/yaksh/course_detail.html
index a0a6ed2..f75e362 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">
+                                    <h5>Course Status</h5>
+                                </div>
+                                <div class="col-md-8">
+                                    Number Of Students: {{ student_details | length }}
+                                </div>
+                                <div class="col">
+                                    <input type="hidden" id="course_name" value="{{course.name}}">
+                                    <a href="#" class="btn btn-outline-success" 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..a9f8328 100644
--- a/yaksh/templates/yaksh/monitor.html
+++ b/yaksh/templates/yaksh/monitor.html
@@ -68,32 +68,49 @@ $(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 = "yakshgreen">{{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 = "row">
+            <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">
                        Download CSV <span class="fa fa-download"></span>
-                   </button></p>
+                   </button>
+               </p>
+            </div>
          </div>
-         <div class="yakshwell container-fluid">
-            <div class="table-wrapper-2">
+        <div class="table-wrapper-2">
             <table id="result-table" class="tablesorter table  table-striped table-responsive-sm">
                 <thead>
                 <tr class="table-info">
@@ -120,7 +137,6 @@ $(document).ready(function()
                     <td> {{ paper.answers.count }} </td>
                     <td id="time_left{{forloop.counter0}}"> {{ paper.time_left }} </td>
                     <td>{{ paper.status }}</td>
-                    </div>
                 </tr>
                 {% endfor %}
                 </tbody>