Merge pull request #809 from adityacp/new_ui

Add new UI over bootstrap

1 files changed, 66 insertions, 56 deletions

diff --git a/stats/templates/view_lesson_tracking.html b/stats/templates/view_lesson_tracking.html
index a9d3025..b59fa7a 100644
--- a/stats/templates/view_lesson_tracking.html
+++ b/stats/templates/view_lesson_tracking.html
@@ -31,62 +31,69 @@
         <i class="fa fa-arrow-left"></i>&nbsp;Back
     </a>
     <br><br>
-    {% include "yaksh/paginator.html" %}
-    <br>
-        <div class="row">
-        <div class="col" id='barDiv1'></div>
-        <div class="col" id="barDiv2"></div>
-        <div class="col" id="barDiv3"></div>
+    <div class="row">
+        <div class="card" style="margin: 1%">
+            <div class="col" id='barDiv1'></div>
+        </div>
+        <div class="card" style="margin: 1%">
+            <div class="col" id="barDiv2"></div>
         </div>
-        <script type="text/javascript">
-            var config = {responsive: true}
-            var data = [
-                {
-                    x: ["Completed", "Not Completed"],
-                    y: ["{{completion.0}}", "{{completion.1}}"],
-                    type: 'bar'
-                }
-            ];
-            var layout = {
-                title: "Number of completions (Out of {{visits.2}})",
-                xaxis: {title: 'Completion status'},
-                yaxis: {title: 'Count'},
-                width: 400,
-                height: 400,
-            };
-            Plotly.newPlot('barDiv1', data, layout, config);
-            var data = [
-                {
-                    x: ["Visited", "Not Visited"],
-                    y: ["{{visits.0}}", "{{visits.1}}"],
-                    type: 'bar'
-                }
-            ];
-            var layout = {
-                title: "Number of visits (Out of {{visits.2}})",
-                xaxis: {title: 'Visit status'},
-                yaxis: {title: 'Count'},
-                width: 400,
-                height: 400,
-            };
-            Plotly.newPlot('barDiv2', data, layout, config);
-            var x_data = ["0-25", "25-50", "50-75", "75-100"], y_data = [];
-            {% for i, j in percentage_data.items %}
-                y_data.push("{{j}}")
-            {% endfor %}
-            var data = [{x: x_data, y: y_data, type: 'bar'}];
-            var layout = {
-                title: "Range wise completion (Out of {{total}})",
-                xaxis: {title: 'Percentage Range'},
-                yaxis: {title: 'Count'},
-                width: 400,
-                height: 400,
-            };
-            Plotly.newPlot('barDiv3', data, layout, config);
-        </script>
+        <div class="card" style="margin: 1%">
+            <div class="col" id="barDiv3"></div>
+        </div>
+    </div>
+    <script type="text/javascript">
+        var config = {responsive: true, displayModeBar: false}
+        var data = [
+            {
+                x: ["Completed", "Not Completed"],
+                y: ["{{completion.0}}", "{{completion.1}}"],
+                type: 'bar'
+            }
+        ];
+        var layout = {
+            title: "Number of completions (Out of {{visits.2}})",
+            xaxis: {title: 'Completion status'},
+            yaxis: {title: 'Count'},
+            width: 400,
+            height: 400,
+        };
+        Plotly.newPlot('barDiv1', data, layout, config);
+        var data = [
+            {
+                x: ["Visited", "Not Visited"],
+                y: ["{{visits.0}}", "{{visits.1}}"],
+                type: 'bar'
+            }
+        ];
+        var layout = {
+            title: "Number of visits (Out of {{visits.2}})",
+            xaxis: {title: 'Visit status'},
+            yaxis: {title: 'Count'},
+            width: 400,
+            height: 400,
+        };
+        Plotly.newPlot('barDiv2', data, layout, config);
+        var x_data = ["0-25", "25-50", "50-75", "75-100"], y_data = [];
+        {% for i, j in percentage_data.items %}
+            y_data.push("{{j}}")
+        {% endfor %}
+        var data = [{x: x_data, y: y_data, type: 'bar'}];
+        var layout = {
+            title: "Range wise completion (Out of {{total}})",
+            xaxis: {title: 'Percentage Range'},
+            yaxis: {title: 'Count'},
+            width: 400,
+            height: 400,
+        };
+        Plotly.newPlot('barDiv3', data, layout, config);
+    </script>
+    <br>
+    {% include "yaksh/paginator.html" %}
     <br>
-    <table class="table table-responsive" id="stats-table">
-        <thead>
+    <div class="table-responsive">
+    <table class="table table-dark table-responsive-sm" id="stats-table">
+        <thead class="thead-dark">
             <tr>
                 <th>Sr No.</th>
                 <th>Student Name&nbsp;<i class="fa fa-sort"></i></th>
@@ -94,12 +101,13 @@
                 <th>Started on&nbsp;<i class="fa fa-sort"></i></th>
                 <th>Current Duration&nbsp;<i class="fa fa-sort"></i></th>
                 <th>Video Duration&nbsp;<i class="fa fa-sort"></i></th>
-                <th>Percentage Watched&nbsp;<i class="fa fa-sort"></i></th>
-                <th>Watched Once Completely&nbsp;<i class="fa fa-sort"></i></th>
+                <th>Percentage&nbsp;<i class="fa fa-sort"></i></th>
+                <th>Watched&nbsp;<i class="fa fa-sort"></i></th>
                 <th>Total Time Spent&nbsp;<i class="fa fa-sort"></i></th>
                 <th>Total Visits&nbsp;<i class="fa fa-sort"></i></th>
             </tr>
         </thead>
+        <tbody class="list">
         {% for track in trackings %}
             <tr>
                 <td>{{ forloop.counter0 }}</td>
@@ -122,7 +130,9 @@
                 <td>{{track.get_no_of_vists}}</td>
             </tr>
         {% endfor %}
+        </tbody>
     </table>
+    </div>
     {% endwith %}
     <br>
     {% include "yaksh/paginator.html" %}