From 9871050f948a626a3811de1d89fca54f1b5e2415 Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Mon, 13 Aug 2012 15:20:06 -0400
Subject: [PATCH] started gradebook
---
lms/static/sass/course/_gradebook.scss | 123 ++++++++++++++++++++++++-
lms/templates/gradebook.html | 94 +++++++++++--------
2 files changed, 179 insertions(+), 38 deletions(-)
diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss
index b94f5de1785..f10900b2353 100644
--- a/lms/static/sass/course/_gradebook.scss
+++ b/lms/static/sass/course/_gradebook.scss
@@ -4,8 +4,129 @@ div.gradebook-wrapper {
section.gradebook-content {
@extend .content;
+ .student-table {
+ float: left;
+ width: 265px;
+ border-radius: 3px 0 0 3px;
+ color: #3c3c3c;
+
+ th {
+ height: 50px;
+ }
+
+ tr:first-child td {
+ border-top-width: 1px;
+ }
+
+ td {
+ height: 50px;
+ padding-left: 20px;
+ border: 1px solid #e9e9e9;
+ border-width: 0 1px 1px 1px;
+ background: #f6f6f6;
+ font-size: 13px;
+ line-height: 50px;
+ }
+
+ tr:nth-child(even) td {
+ background-color: #fbfbfb;
+ }
+ }
+
+ .grades {
+ position: relative;
+ float: left;
+ width: 800px;
+ height: 712px;
+ overflow: hidden;
+ }
+
+ .grade-table {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1000px;
+ cursor: move;
+ -webkit-transition: left .7s ease-in-out;
+ -webkit-user-select: none;
+ user-select: none;
+
+ td,
+ th {
+ width: 50px;
+ text-align: center;
+ }
+
+ thead th {
+ height: 50px;
+ background: -webkit-linear-gradient(top, #e9e9e9, #e2e2e2);
+ font-size: 10px;
+ line-height: 10px;
+ font-weight: bold;
+ text-align: center;
+ box-shadow: 0 1px 0 #c8c8c8 inset, 0 2px 0 rgba(255, 255, 255, .7) inset;
+
+ &:after {
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 9999;
+ width: 1px;
+ height: 50px;
+ @includ linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+ }
+
+ &:first-child {
+ border-radius: 3px 0 0 0;
+ box-shadow: 1px 1px 0 #c8c8c8 inset, 1px 2px 0 rgba(255, 255, 255, .7) inset;
+ }
+
+ &:last-child {
+ border-radius: 0 3px 0 0;
+ box-shadow: -1px 1px 0 #c8c8c8 inset, -1px 2px 0 rgba(255, 255, 255, .7) inset;
+ }
+
+ .assignment {
+ margin: 9px 0;
+ }
+
+ .type,
+ .number,
+ .max {
+ display: block;
+ }
+
+ .max {
+ height: 12px;
+ background: -webkit-linear-gradient(top, #c6c6c6, #bababa);
+ font-size: 9px;
+ line-height: 12px;
+ color: #fff;
+ }
+ }
+
+ tr:first-child td {
+ border-top: 1px solid #e9e9e9;
+ }
+
+ td {
+ height: 50px;
+ border-bottom: 1px solid #e9e9e9;
+ background: #f6f6f6;
+ font-size: 13px;
+ line-height: 50px;
+ }
+
+ tr:nth-child(even) td {
+ background-color: #fbfbfb;
+ }
+ }
+
h1 {
@extend .top-header;
}
}
-}
\ No newline at end of file
+}
+
+
diff --git a/lms/templates/gradebook.html b/lms/templates/gradebook.html
index a4a81a68689..02d32ba865f 100644
--- a/lms/templates/gradebook.html
+++ b/lms/templates/gradebook.html
@@ -6,6 +6,7 @@
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.stack.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.symbol.js')}"></script>
+ <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.symbol.js')}"></script>
</%block>
<%block name="headextra">
@@ -28,49 +29,68 @@
<section class="gradebook-content">
<h1>Gradebook</h1>
- %if len(students) > 0:
- <table>
- <%
- templateSummary = students[0]['grade_summary']
- %>
+ <table class="student-table">
+ <thead>
+ <tr>
+ <th><input type="search" /></th>
+ </tr>
+ </thead>
+ <tbody>
+ %for student in students:
+ <tr>
+ <td>
+ <a href="${reverse('student_profile', kwargs=dict(course_id=course_id, student_id=student['id']))}">${student['username']}</a>
+ </td>
+ </tr>
+ %endfor
+ </tbody>
+ </table>
- <tr> <!-- Header Row -->
- <th>Student</th>
- %for section in templateSummary['section_breakdown']:
- <th>${section['label']}</th>
- %endfor
- <th>Total</th>
- </tr>
- <%def name="percent_data(fraction)">
+ %if len(students) > 0:
+ <div class="grades">
+ <table class="grade-table">
<%
- letter_grade = 'None'
- if fraction > 0:
- letter_grade = 'F'
- for grade in ['A', 'B', 'C']:
- if fraction >= course.grade_cutoffs[grade]:
- letter_grade = grade
- break
-
- data_class = "grade_" + letter_grade
+ templateSummary = students[0]['grade_summary']
%>
- <td class="${data_class}" data-percent="${fraction}">${ "{0:.0f}".format( 100 * fraction ) }</td>
- </%def>
+ <thead>
+ <tr> <!-- Header Row -->
+ %for section in templateSummary['section_breakdown']:
+ <th>${section['label']}</th>
+ %endfor
+ <th>Total</th>
+ </tr>
+ </thead>
+
+ <%def name="percent_data(fraction)">
+ <%
+ letter_grade = 'None'
+ if fraction > 0:
+ letter_grade = 'F'
+ for grade in ['A', 'B', 'C']:
+ if fraction >= course.grade_cutoffs[grade]:
+ letter_grade = grade
+ break
+
+ data_class = "grade_" + letter_grade
+ %>
+ <td class="${data_class}" data-percent="${fraction}">${ "{0:.0f}".format( 100 * fraction ) }</td>
+ </%def>
+
+ <tbody>
+ %for student in students:
+ <tr>
+ %for section in student['grade_summary']['section_breakdown']:
+ ${percent_data( section['percent'] )}
+ %endfor
+ <th>${percent_data( student['grade_summary']['percent'])}</th>
+ </tr>
+ %endfor
+ </tbody>
+ </table>
+ </div>
- %for student in students:
- <tr>
- <td><a href="${reverse('student_profile',
- kwargs=dict(course_id=course_id,
- student_id=student['id']))}">
- ${student['username']}</a></td>
- %for section in student['grade_summary']['section_breakdown']:
- ${percent_data( section['percent'] )}
- %endfor
- <th>${percent_data( student['grade_summary']['percent'])}</th>
- </tr>
- %endfor
- </table>
%endif
</section>
</div>
--
GitLab