Merge pull request #693 from adityacp/fix_grade_user

Change UI in grade user

2 files changed, 52 insertions, 12 deletions

diff --git a/yaksh/static/yaksh/css/custom.css b/yaksh/static/yaksh/css/custom.css
index 3979e3e..697361d 100644
--- a/yaksh/static/yaksh/css/custom.css
+++ b/yaksh/static/yaksh/css/custom.css
@@ -98,6 +98,13 @@ body, .dropdown-menu {
     transition: all 0.3s;
 }
 
+@media (min-width: 1024px) {
+
+  .students-list {
+    position: fixed !important;
+  }
+}
+
 /* ---------------------------------------------------
     FORUM STYLE
 ----------------------------------------------------- */
@@ -117,4 +124,5 @@ body, .dropdown-menu {
 
 .description {
     font-size: 16px;
-}
\ No newline at end of file
+}
+>>>>>>> 53a0c4ad3e733f3960000527f83565f2fd8fc412
diff --git a/yaksh/templates/yaksh/grade_user.html b/yaksh/templates/yaksh/grade_user.html
index 7206525..f4c7d67 100644
--- a/yaksh/templates/yaksh/grade_user.html
+++ b/yaksh/templates/yaksh/grade_user.html
@@ -15,7 +15,24 @@ $(document).ready(function()
 {
   $("#marks_table").tablesorter({sortList: [[2,1]]});
 });
+function searchNames() {
+  var input, filter, ul, li, a, i, txtValue;
+  input = document.getElementById('myInput');
+  filter = input.value.toUpperCase();
+  $("#myUL").toggle();
+  ul = document.getElementById("myUL");
+  li = ul.getElementsByTagName('li');
 
+  for (i = 0; i < li.length; i++) {
+    a = li[i].getElementsByTagName("a")[0];
+    txtValue = a.textContent || a.innerText;
+    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+      li[i].style.display = "";
+    } else {
+      li[i].style.display = "none";
+    }
+  }
+}
 </script>
 {% endblock script %}
 
@@ -87,16 +104,17 @@ $(document).ready(function()
   <div class="row">
     {% if status == "grade" %}
       {% if users %}
-        <div id="student" class="col-md-3">
-          <ul class="nav nav-pills list-group">
-            {% for user in users %}
-              <li class="nav-item">
-                <a href="{% url 'yaksh:grade_user' quiz_id user.user__id course_id %}" class="list-group-item{% if user.user__id == data.user.id %} active {% endif %}">
-                  {{user.user__first_name}} {{user.user__last_name}}
-                </a>
-              </li>
-            {% endfor %}
-          </ul>
+        <div id="student" class="col-lg-3">
+          <div class="students-list">
+            <select onchange="window.location.href=this.value" class="custom-select">
+              <option value="">Select student</option>
+              {% for user in users %}
+                 <option value="{% url 'yaksh:grade_user' quiz_id user.user__id course_id %}" {% if user.user__id == data.user.id %} selected {% endif %} title="{{user.user__first_name|upper}} {{user.user__last_name|upper}}">
+                   {{user.user__first_name|upper}} {{user.user__last_name|truncatechars:5|upper}}
+                 </option>
+              {% endfor %}
+            </select>
+          </div>
         </div>
       {% else %}
         <div class="col-md-1"></div>
@@ -110,7 +128,7 @@ $(document).ready(function()
       {% endif %}
     {% endif %}
 
-    <div id="paper" class="col-md-9">
+    <div id="paper" class="col-lg-9">
       {% if has_quiz_assignments %}
         <a href="{% url 'yaksh:download_quiz_assignment' quiz_id course_id %}" class="btn btn-outline-info">
           <i class="fa fa-download"></i>&nbsp;Download All Assignments
@@ -128,8 +146,22 @@ $(document).ready(function()
         </div>
         {% endfor %}
       {% endif %}
+      {% if status == "grade" and users %}
+        <input type="text" id="myInput" onkeyup="searchNames()" placeholder="Type to search for names" class="form-control">
+        <ul class="nav nav-pills list-group" style="display: none;" id="myUL">
+          {% for user in users %}
+            <li class="nav-item">
+              <a href="{% url 'yaksh:grade_user' quiz_id user.user__id course_id %}" class="list-group-item">
+                {{user.user__first_name|upper}} {{user.user__last_name|upper}}
+              </a>
+            </li>
+          {% endfor %}
+          <br>
+        </ul>
+      {% endif %}
 
       {% if data %}
+        <hr>
         <div class="card">
           <div class="card-header">
             Student Details