feat: scoreboard top, bottom, teacher, student

game/forms.py

@@ -5,7 +5,7 @@
 
 from django import forms
 
-from .models import Level
+from .models import Episode
 
 
 class ShareLevelPerson(forms.Form):
@@ -47,18 +47,18 @@ def __init__(self, *args, **kwargs):
         # Each tuple in choices has two elements, id and name of each level
         # First element is the actual value set on the model
         # Second element is the string displayed on the drop down menu
-        choice_list = (
-            (level.id, str(level)) for level in Level.objects.sorted_levels()
+        episodes_choices = (
+            (episode.id, episode.name) for episode in Episode.objects.all()
         )
-        self.fields["levels"] = forms.MultipleChoiceField(
-            choices=itertools.chain(choice_list), widget=forms.CheckboxSelectMultiple()
+        self.fields["episodes"] = forms.MultipleChoiceField(
+            choices=itertools.chain(episodes_choices), widget=forms.CheckboxSelectMultiple()
         )
 
         def validate(self):
             cleaned_data = super(ScoreboardForm, self).clean()
             classes = cleaned_data.get("classes")
-            levels = cleaned_data.get("levels")
-            return classes and levels
+            episodes = cleaned_data.get("episodes")
+            return classes and episodes
 
 
 class LevelModerationForm(forms.Form):

game/static/game/css/dataTables.fixedColumns.css

@@ -1,25 +1,54 @@
-
-
 /* Block out what is behind the fixed column's header and footer */
 table.DTFC_Cloned thead,
 table.DTFC_Cloned tfoot {
-	background-color: white;
+  background-color: white;
 }
 
 /* Block out the gap above the scrollbar on the right, when there is a fixed
  * right column
  */
 div.DTFC_Blocker {
-	background-color: white;
+  background-color: white;
 }
 
 div.DTFC_LeftWrapper table.dataTable,
 div.DTFC_RightWrapper table.dataTable {
-	margin-bottom: 0;
-	z-index: 2;
+  margin-bottom: 0;
+  z-index: 2;
 }
 
 div.DTFC_LeftWrapper table.dataTable.no-footer,
 div.DTFC_RightWrapper table.dataTable.no-footer {
-	border-bottom: none;
+  border-bottom: none;
+}
+
+div.DTFC_LeftBodyLiner {
+  padding-right: 0;
+  width: inherit;
+}
+
+#scoreboardTable tbody td,
+#scoreboardTable_wrapper tbody td,
+#improvementTable_wrapper td,
+#improvementTable_wrapper tbody td {
+  border-right: 1px solid white;
+  border-top: 1px solid white;
+}
+
+.DTFC_ScrollWrapper th,
+.DTFC_ScrollWrapper td,
+#scoreboardTable th,
+#scoreboardTable td {
+  height: 34px;
+  min-width: 30px;
+}
+
+.DTFC_LeftHeadWrapper,
+.DTFC_LeftBodyWrapper {
+  box-shadow: 4px 0 10px 0 rgba(0, 0, 0, 0.5);
+}
+
+.DTFC_RightHeadWrapper,
+.DTFC_RightBodyWrapper {
+  box-shadow: -4px 0 10px 0 rgba(0, 0, 0, 0.5);
 }

game/static/game/css/jquery.dataTables.css

@@ -21,7 +21,6 @@ table.dataTable tfoot th {
 table.dataTable thead th,
 table.dataTable thead td {
   padding: 10px 18px;
-  border-bottom: 1px solid #111;
 }
 table.dataTable thead th:active,
 table.dataTable thead td:active {
@@ -296,7 +295,7 @@ table.dataTable td {
 .dataTables_wrapper .dataTables_paginate {
   float: right;
   text-align: right;
-  padding-top: 0.25em;
+  padding-top: 0.55em;
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
   box-sizing: border-box;

game/static/game/css/scoreboard.css

@@ -1,155 +1,138 @@
-.form label {
-	width: 200px;
-	float: left;
-	margin: 0 20px 0 0;
+.level_rr_logo {
+  text-align: center;
 }
 
-.form input {
-	width: 200px;
-	border: 1px solid #000;
-	padding: 5px;
+.level_rr_logo img {
+  width: 25%;
 }
 
-.tableWrapper {
-	overflow: auto;
-	width: 100%;
+.dropdown > .button--secondary,
+.row > div > .button--secondary,
+.row > div > .button--primary {
+  margin: 0;
 }
 
-/* tables */
-
-table {
-	width: 99%;
+.input--icon > input[type="text"],
+.input--icon > input[type="text"]:hover,
+.input--icon > input[type="text"]:focus {
+  border: 2px solid #eab502;
 }
 
-/* Needed for keeping the rows aligned after freezing the first column */
-table tbody td {
-	/* To ensure all rows have the same height as wrapping may increases row height */
-	white-space: nowrap;
-	/* The height of the row has to be set in order for the progress bar to fit the row */
-	height: 25px;
-	font-size: 15px
+input[type="checkbox"] {
+  width: 20px;
 }
 
-.ui-progressbar {
-	height: 100%;
+.open > .dropdown-menu {
+  display: flex;
+  flex-direction: column;
 }
 
-/* Colour for the portion of the bar which represents the percentage of levels players finished */
-.ui-progressbar .finished {
-	background: #74B06B;
-}
-/* Colour for the portion of the bar which represents the percentage of levels players finished but under a certain
- * threshold
- */
-.ui-progressbar .attempted {
-	background: #E1B377;
-}
-/* Colour for the portion of the bar which represents the percentage of levels players started but haven't submitted
- * attempts yet
- */
-.ui-progressbar .started {
-	background: #C24563;
+.button--dropdown,
+.dropdown-menu {
+  width: 100%;
+  background-color: #fff;
 }
 
-#scoreboardTable tr td.untouched {
-	background: #d9d9d9;
+.dropdown-menu {
+  overflow-x: hidden;
+  font-style: normal;
+  max-height: 380px;
 }
-/* Used for making the inside of the progress bar to fill up the entire outer container
- * margin and border are set in jquery-ui.structure.css and jquery-ui.css
- * we are overwriting the settings for the following two properties
- */
-.ui-progressbar .ui-progressbar-value{
-	margin: 0px;
-	border: 0px;
+
+.dropdown-menu > ul {
+  font-style: normal;
+  overflow-y: auto;
 }
 
-#scoreboardForm {
-	text-align: center;
+.dropdown-menu > .row {
+  padding: 15px 0 15px 0;
 }
 
-#scoreboardForm .select-list {
-	text-align: left;
-	overflow: scroll;
-	height: 300px;
+.dropdown-menu__option__text {
+  width: 100%;
 }
 
-#scoreboardForm .select-list label {
-	float: none;
+.dropdown-menu__option__text label {
+  align-items: center;
+  display: flex;
+  flex-direction: row-reverse;
+  font-weight: normal;
+  justify-content: space-between;
+  margin: 0;
 }
 
-#scoreboardForm .select-list ul {
-	list-style-type: none;
+.tableWrapper {
+  width: 100%;
 }
 
-#scoreboardForm .select-list li {
-	display: flex;
+div.DTFC_LeftBodyLiner,
+div.DTFC_RightBodyLiner {
+  overflow: hidden;
 }
 
-#scoreboardForm .select-list li label {
-	margin: 0.1rem 0;
-	vertical-align: middle;
-	width: 100%;
-	text-align: left;
-	font-weight: normal;
-	text-decoration: none;
-	font-style: normal;
-	color: #000;
+.dataTables_wrapper .dataTables_length,
+.dataTables_wrapper .dataTables_filter,
+.dataTables_wrapper .dataTables_paginate span,
+.dataTables_wrapper .dataTables_paginate .disabled,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
+  display: none;
 }
 
-#scoreboardForm .all-class {
-	background-color: #ccc;
-	padding: 1rem;
-	margin: 1rem;
+a.next:focus,
+a.previous:focus {
+  outline: none;
 }
 
-#scoreboardForm .all-class.checked {
-	background-color: #6c696c;
-	color: #fff;
+#scoreboardTable_wrapper table,
+#scoreboardTable_wrapper th,
+#scoreboardTable_wrapper td,
+#improvementTable_wrapper table,
+#improvementTable_wrapper th,
+#improvementTable_wrapper td {
+  border: none;
+  border-right: 1px solid white;
 }
 
-#scoreboardForm .class {
-	background-color: #fff;
-	padding: 1rem;
-	margin: 0 1rem;
-	border-bottom: 1px solid #aaa;
+table {
+  width: 99%;
 }
 
-#scoreboardForm .class.checked {
-	background-color: #ccc;
+table tbody td {
+  font-size: 15px;
 }
 
-#scoreboardForm .all-level {
-	background-color: #ccc;
-	padding: 1rem;
-	margin: 1rem;
+table th.fixed-width,
+table td.fixed-width {
+  max-width: 140px;
+  min-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-#scoreboardForm .all-level.checked {
-	background-color: #6c696c;
-	color: #fff;
+#scoreboardTable_wrapper td.scoreboard--started {
+  background: #e0004d;
+  color: white;
 }
 
-#scoreboardForm .episode {
-	background-color: #d2e6ed;
-	padding: 1rem;
-	margin: 0.5rem 1rem;
+#scoreboardTable_wrapper td.scoreboard--completed {
+  color: #eab502;
+  font-size: 24px;
 }
 
-#scoreboardForm .episode.checked {
-	background-color: #0c52a3;
+#scoreboardTable_wrapper td.scoreboard--completed-secondary {
+  color: #fff;
+  font-size: 24px;
 }
 
-#scoreboardForm .level {
-	background-color: #fff;
-	padding: 1rem;
-	margin: 0 1rem 0 5rem;
-	border-bottom: 1px solid #aaa;
+#scoreboardTable_wrapper td.scoreboard--medium-performer {
+  background: #f6a500;
 }
 
-#scoreboardForm .level.checked {
-	background-color: #ccc;
+#scoreboardTable_wrapper td.scoreboard--top-performer {
+  background: #b1ba1d;
 }
 
-#scoreboardForm .expander {
-	color: #000;
+#scoreboardTable_wrapper td.current-student {
+  background: #85ddff; /* $color-tertiary-50 */
 }