diff --git a/app/core/urls.coffee b/app/core/urls.coffee index 09687210a..6069d9e56 100644 --- a/app/core/urls.coffee +++ b/app/core/urls.coffee @@ -3,3 +3,7 @@ module.exports = shareURL = "#{window.location.origin}/play/#{level.get('type')}-level/#{level.get('slug')}/#{session.id}" shareURL += "?course=#{course.id}" if course return shareURL + + courseArenaLadder: ({level, courseInstance}) -> + "/play/ladder/#{level.get('slug')}/course/#{courseInstance.id}" + diff --git a/app/locale/en.coffee b/app/locale/en.coffee index 2e9117ddf..3dc753fd7 100644 --- a/app/locale/en.coffee +++ b/app/locale/en.coffee @@ -1504,6 +1504,9 @@ status_enrolled: "Expires on {{date}}" select_all: "Select All" projects: "Projects" + project: "Project" + view_student_project: "View Student Project" + view_arena_ladder: "View Arena Ladder" sharing: game: "Game" diff --git a/app/styles/courses/teacher-class-view.sass b/app/styles/courses/teacher-class-view.sass index c00336e24..efd6757e9 100644 --- a/app/styles/courses/teacher-class-view.sass +++ b/app/styles/courses/teacher-class-view.sass @@ -257,19 +257,26 @@ .progress-dot display: inline-block margin-right: 6px - width: 34px + min-width: 34px height: 34px - border-radius: 50% + border-radius: 16px + padding: 0 10px // margin-top: 23px // margin-bottom: 23px background: $gray-light position: relative + a + text-decoration: none + .dot-label padding-top: 2px .dot-label-inner font-size: 11px font-weight: bold color: white + + .progress-dot-lg .dot-label .dot-label-inner + font-size: 13px .progress-dot.forest background: $forest @@ -286,6 +293,14 @@ border-color: $navy .tooltip-arrow border-top-color: $navy + + .progress-dot.navy + background: $navy + .tooltip-inner + color: $navy + border-color: $navy + .tooltip-arrow + border-top-color: $navy // Code copying buttons diff --git a/app/templates/courses/teacher-class-view.jade b/app/templates/courses/teacher-class-view.jade index 03c73f95f..3bf78c3be 100644 --- a/app/templates/courses/teacher-class-view.jade +++ b/app/templates/courses/teacher-class-view.jade @@ -122,13 +122,6 @@ block content li(class=(activeTab === "#enrollment-status-tab" ? 'active' : '')) a.course-progress-tab-btn(href='#enrollment-status-tab') .small-details.text-center(data-i18n='teacher.enrollment_status') - // TODO: Move projects into course progress tab - //- var courses = view.classroom.get('courses').map(function(c) { return view.courses.get(c._id); }); - //if _.find(courses, function(c) { return /dev/.test(c.get('slug')); }) - // .tab-spacer - // li(class=(activeTab === "#student-projects-tab" ? 'active' : '')) - // a.course-progress-tab-btn(href='#student-projects-tab') - // .small-details.text-center(data-i18n='teacher.projects') .tab-filler .tab-content @@ -138,8 +131,6 @@ block content +courseProgressTab else if activeTab === '#enrollment-status-tab' +enrollmentStatusTab - else - +studentProjectsTab else .text-center.m-t-5.m-b-5 @@ -334,6 +325,7 @@ mixin studentLevelsRow(student) - var progress = state.get('progressData').get({ classroom: view.classroom, course: course, level: level, user: student }) - var levelNumber = view.classroom.getLevelNumber(level.get('original'), index + 1) +studentLevelProgressDot(progress, level, levelNumber) + mixin studentCourseProgressDot(progress, levelsTotal, level, label) //- TODO: Refactor with TeacherClassesView jade @@ -347,16 +339,59 @@ mixin allStudentsLevelProgressDot(progress, level, levelNumber) - dotClass = progress.completed ? 'forest' : (progress.started ? 'gold' : ''); - levelName = i18n(level.attributes, 'name') - context = _.merge(progress, { levelName: levelName, levelNumber: levelNumber, numStudents: view.students.length }) + - link = null; + - labelText = levelNumber; + if level.isLadder() + - var course = view.state.get('selectedCourse'); + - var courseInstance = course && view.classroom ? view.courseInstances.findWhere({ courseID: course.id, classroomID: view.classroom.id }) : null; + if courseInstance + - link = view.urls.courseArenaLadder({level: level, courseInstance: courseInstance}); + - labelText = translate('teacher.view_arena_ladder'); + else + - labelText = translate('courses.arena'); + - dotClass = 'navy progress-dot-lg'; + else if level.isProject() + - labelText = translate('teacher.project') + - dotClass += ' progress-dot-lg'; + .progress-dot.level-progress-dot(class=dotClass, data-html='true', data-title=view.allStudentsLevelProgressDotTemplate(context)) - +progressDotLabel(levelNumber) + if link + a(href=link) + +progressDotLabel(labelText) + else + +progressDotLabel(labelText) + mixin studentLevelProgressDot(progress, level, levelNumber) //- TODO: Refactor with TeacherClassesView jade - dotClass = progress.completed ? 'forest' : (progress.started ? 'gold' : ''); - levelName = i18n(level.attributes, 'name') - context = _.merge(progress, { levelName: levelName, levelNumber: levelNumber, moment: moment }) + - link = null; + - labelText = levelNumber; + if level.isLadder() + - var course = view.state.get('selectedCourse'); + - var courseInstance = view.courseInstances.findWhere({ courseID: course.id, classroomID: view.classroom.id }); + if courseInstance + - link = view.urls.courseArenaLadder({level: level, courseInstance: courseInstance}); + - labelText = translate('courses.arena'); + else + - labelText = translate('courses.arena'); + - dotClass += ' progress-dot-lg'; + else if level.isProject() + if progress.started + - link = view.urls.playDevLevel({level: level, session: progress.session, course: view.state.get('selectedCourse')}); + - labelText = translate('teacher.view_student_project'); + - dotClass = 'navy'; + else + - labelText = translate('teacher.project'); + - dotClass += ' progress-dot-lg'; .progress-dot.level-progress-dot(class=dotClass, data-html='true', data-title=view.singleStudentLevelProgressDotTemplate(context)) - +progressDotLabel(levelNumber) + if link + a(href=link) + +progressDotLabel(labelText) + else + +progressDotLabel(labelText) mixin progressDotLabel(label) .dot-label.text-center @@ -439,37 +474,3 @@ mixin enrollmentStatusTab td.enroll-col if status !== 'enrolled' button.enroll-student-button.btn.btn-navy(data-i18n="teacher.enroll_student", data-user-id=student.id, data-event-action="Teachers Class Enrollment Enroll Student") - -mixin studentProjectsTab - #student-projects-tab.m-t-3 - if state.get('progressData') - .render-on-course-sync - .student-levels-table - +sortButtons - each student in state.get('students').models - +studentProjectsRow(student) - -mixin studentProjectsRow(student) - .row.student-levels-row.alternating-background - div.student-info.col-sm-3 - div.student-name= student.broadName() - div.student-email.small-details= student.get('email') - div.student-levels-progress.col-sm-9 - each trimCourse in view.classroom.get('courses') - - var course = view.courses.get(trimCourse._id); - - var levels = view.classroom.getLevels({courseID: course.id, projectLevels: true}).models - each level in levels - - var progress = state.get('progressData').get({ classroom: view.classroom, course: course, level: level, user: student }) - - var levelNumber = view.classroom.getLevelNumber(level.get('original'), index + 1) - +studentProjectLink(progress, level, levelNumber, course) - -mixin studentProjectLink(progress, level, levelNumber, course) - - var colorClass = progress.completed ? 'btn-primary' : (progress.started ? 'btn-warning' : 'btn-primary'); - - var levelName = i18n(level.attributes, 'name') - - var context = _.merge(progress, { levelName: levelName, levelNumber: levelNumber, moment: moment }) - - var title = view.singleStudentLevelProgressDotTemplate(context); - if context.session - - var url = '/play/' + level.get('type') + '-level/' + level.get('slug') + '/' + context.session.id + '?course=' + course.id; - a(class="btn btn-lg btn-view-project-level " + colorClass, href=url, data-title=title)= levelName - else - btn(class="btn btn-lg btn-view-project-level " + colorClass, data-title=title, disabled=true)= levelName diff --git a/app/views/courses/TeacherClassView.coffee b/app/views/courses/TeacherClassView.coffee index 4b48bee11..8dec7245a 100644 --- a/app/views/courses/TeacherClassView.coffee +++ b/app/views/courses/TeacherClassView.coffee @@ -73,6 +73,7 @@ module.exports = class TeacherClassView extends RootView @singleStudentCourseProgressDotTemplate = require 'templates/teachers/hovers/progress-dot-single-student-course' @singleStudentLevelProgressDotTemplate = require 'templates/teachers/hovers/progress-dot-single-student-level' @allStudentsLevelProgressDotTemplate = require 'templates/teachers/hovers/progress-dot-all-students-single-level' + @urls = require('core/urls') @debouncedRender = _.debounce @render