Change Course Listing UI on Student Dashboard

2 files changed, 58 insertions, 47 deletions

diff --git a/yaksh/templates/yaksh/course_modules.html b/yaksh/templates/yaksh/course_modules.html
index 244c2d9..d5bbfd3 100644
--- a/yaksh/templates/yaksh/course_modules.html
+++ b/yaksh/templates/yaksh/course_modules.html
@@ -16,20 +16,8 @@
 <div class="container">
 <div class="row justify-content-md-center yakshwell ">
     <div class="col-md-10 bg-light card">
-        <div class="row align-items-center">
-            <div class="col h4">  {{ course.name }}  </div>
-            <div class="col-md-3 ml-auto yakshwell">
-                <div class="row align-items-center"> 
-                    <div class="col-sm-6"> Overall
-                    Course</br>Completion :
-                    </div>
-                    <div class="col-sm-5">
-                    <span class="progress">
-                      <span class="progress-bar bg-warning " role="progressbar" style="width: {{ course_percentage }}%; color: black;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">{{ course_percentage }} % completed</span>
-                    </span>
-                    </div>
-                </div>
-            </div>   
+        <div class="row align-items-center my-3">
+            <div class="col h4 text-center">  {{ course.name }}  </div>
         </div>
     </div>
 </div>
diff --git a/yaksh/templates/yaksh/quizzes_user.html b/yaksh/templates/yaksh/quizzes_user.html
index 548eef4..ee5b684 100644
--- a/yaksh/templates/yaksh/quizzes_user.html
+++ b/yaksh/templates/yaksh/quizzes_user.html
@@ -72,21 +72,21 @@
         <div class="yakshwell">
             <div class="row yakshlabel align-items-center">
                 <div class="col">
-                    <h4><b>
-                        
-                        {{ course.name }} by {{ course.creator.get_full_name }}
-                        
-                    </b></h4>
-                    {% if course.is_active_enrollment %}
+                    <a data-toggle="collapse" href="#collapsedetails{{course.data.id}}" role="button" aria-expanded="false" aria-controls="#collapsedetails{{course.data.id}}">
+                        <h4><b>
+                            {{ course.data.name }} by {{ course.data.creator.get_full_name }}
+                        </b></h4>
+                    </a>
+                    {% if course.data.is_active_enrollment %}
                         <div class="text-left">
-                            <span class="yakshgreen">{{course.start_enroll_time}}</span>&nbsp;&nbsp; to &nbsp;&nbsp;<span class="yakshgreen">{{course.end_enroll_time}}</span>
+                            <span class="yakshgreen">{{course.data.start_enroll_time}}</span>&nbsp;&nbsp; to &nbsp;&nbsp;<span class="yakshgreen">{{course.data.end_enroll_time}}</span>
                         </div>
                     {% endif %}
                 </div>
                 <div class="col-sm-auto">
-                    {% if course.days_before_start != 0 %}
+                    {% if course.data.days_before_start != 0 %}
                     <span class="label label-info" style="font-size: 15px">
-                        {{course.days_before_start}} day(s) to start
+                        {{course.data.days_before_start}} day(s) to start
                     </span>
                     {% endif %}
                     
@@ -94,20 +94,27 @@
                 <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.id}}" role="button" aria-expanded="false" aria-controls="#collapsedetails{{course.id}}">DETAILS</a>
+                        <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.requests.all %} <span class="badge badge-warning">Request Pending </span>
-                            {% elif user in course.rejected.all %}<span class="badge badge-danger">Request Rejected</span>
-                            {% elif user in course.students.all %}<a class="btn btn-success" href="{{URL_ROOT}}/exam/course_modules/{{course.id}}" >START</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 %}
+                                <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.active %}
-                                    {% if course.is_active_enrollment %}
-                                        {% if course.is_self_enroll %}
-                                            <a class="btn btn-success" href="{{ URL_ROOT }}/exam/self_enroll/{{ course.id }}">ENROLL</a>
+                                {% 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.id }}">ENROLL</a>
+                                            <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">
@@ -124,39 +131,55 @@
                     </span>
                 </div>
                      <!-- About course-->
-             <div class="collapse container-fluid" id="collapsedetails{{course.id}}">
+             <div class="collapse container-fluid" id="collapsedetails{{course.data.id}}">
               <div class="card card-body ">
-                <h4>{{ course.name }} by {{ course.creator.get_full_name }}</h4><hr>
+                <h4>{{ course.data.name }} by {{ course.data.creator.get_full_name }}</h4><hr>
                 <div class="row">
                     <div class="col-md-7">
-                        {% if course.description %}
+                        {% if course.data.description %}
                             <p> <span class="yakshred yakshheading">About the course</span><br>
-                               {{ course.description }}
+                               {{ course.data.description }}
                             </p>
                         {% endif %}
-                        {% if course.get_learning_modules %}
+                        {% if course.data.get_learning_modules %}
                             <p> <span class="yakshred yakshheading">What you'll learn</span>
                                 <ul>
-                                    {% for module in course.get_learning_modules %}
+                                    {% for module in course.data.get_learning_modules %}
                                     <li>{{module.name|title}}</li>
                                     {% endfor %}
                                 </ul>    
                             </p>
                         {% endif %}
                         <p> <span class="yakshred yakshheading">Instructor</span><br>
-                            {{ course.creator.get_full_name }}
+                            {{ course.data.creator.get_full_name }}
                         </p>
-                        {% if course.instructions %}
-                        <p> <span class="yakshred yakshheading">Requirement(s)</span><br>
-                            {{ course.instructions|safe }}
+                        {% if course.data.instructions %}
+                        <p> <span class="yakshred yakshheading">Instructions</span><br>
+                            {{ course.data.instructions|safe }}
                         </p>
                         {% endif %}
                     </div>
-                    <div class="col-md-4 ">
-                        <table class="table table-borderless card table-responsive-sm">
-                            <tr><td class="yakshgreen">STARTS ON</td> <td>{{course.start_enroll_time}}</td></tr>
-                            <tr><td class="yakshgreen">ENDS ON</td>  <td>{{course.end_enroll_time}}</td>
-                        </table>
+                    <div class="col-md-4">
+                        <div class="row my-3">
+                            <div class="col-md-5">
+                                STARTS ON
+                            </div>
+                            <div class="col-md-7">
+                                {{course.data.start_enroll_time}}
+                            </div>
+                        </div>
+                        <div class="row my-3">
+                            <div class="col-md-5">
+                                ENDS ON
+                            </div>
+                            <div class="col-md-7">
+                                {{course.data.end_enroll_time}}
+                            </div>
+                        </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>