UI updates to the Open Ended Problems page

lms/static/sass/course.scss

@@ -44,6 +44,8 @@
 @import "course/gradebook";
 @import "course/tabs";
 @import "course/staff_grading";
+@import "course/open_ended_grading";
+
 
 // instructor
 @import "course/instructor/instructor";

lms/static/sass/course/_open_ended_grading.scss

@@ -0,0 +1,17 @@
+.open-ended-problems,
+.combined-notifications
+{
+    padding: 40px;
+    .problem-list
+    {
+        table-layout: auto;
+        margin-top: 10px;
+        width:70%;
+        text-align: center;
+        td, th
+        {
+            padding: 7px;
+        }
+    }
+
+}

lms/templates/open_ended_problems/open_ended_problems.html

@@ -23,14 +23,27 @@
             You have not attempted any open ended problems yet.
         </div>
         %else:
-        <ul class="problem-list">
+        <table class="problem-list">
+            <tr>
+                <th>Problem Name</th>
+                <th>Status</th>
+                <th>Grader Type</th>
+            </tr>
             %for problem in problem_list:
-            <li>
-                <a href="${problem['actual_url']}">${problem['problem_name']} (${problem['state']} , ${problem['grader_type']} )</a>
-            </li>
+            <tr>
+                <td>
+                    <a href="${problem['actual_url']}">${problem['problem_name']}</a> 
+                </td>
+                <td>
+                    ${problem['state']} 
+                </td>
+                <td> 
+                    ${problem['grader_type']}
+                </td>
+            </tr>
             %endfor
-        </ul>
+        </table>
         %endif
         %endif
     </div>
-</section>
+</section>