diff --git a/app/styles/courses/teacher-courses-view.sass b/app/styles/courses/teacher-courses-view.sass
index c1ce34b6f..d237514d8 100644
--- a/app/styles/courses/teacher-courses-view.sass
+++ b/app/styles/courses/teacher-courses-view.sass
@@ -1,26 +1,81 @@
#teacher-courses-view
margin-bottom: 50px
-
+
+ .active-courses
+ font-size: 12px
+ font-weight: bold
+ text-transform: uppercase
+
+ .class-count
+ font-size: 30px
+
+ .class-name
+ font-size: 20px
+ font-weight: bold
+
+ .course-concept
+ background-color: lightyellow
+ border: 1px dotted green
+ color: purple
+ margin-right: 6px
+
+ .course-enrolled
+ font-size: 12px
+ font-weight: bold
+
+ .course-name
+ font-size: 18px
+ font-weight: bold
+
+ .divider
+ border-bottom: 1px solid black
+ margin-bottom: 20px
+
img.media-object
width: 300px
-
+
.edit-classroom-small
cursor: pointer
&:hover
color: grey
-
+
#fixed-area
position: fixed
bottom: 0
left: 0
right: 0
-
+
.well
margin-bottom: 0
padding: 5px
-
+
.col-sm-5
padding-top: 8px
-
+
.progress
- margin-bottom: 0
\ No newline at end of file
+ margin-bottom: 0
+
+ .no-students
+ font-size: 22px
+ font-style: italic
+ margin: 10px
+ text-align: center
+
+ .section-header
+ border-bottom: 1px solid black
+ font-size: 20px
+ font-weight: bold
+ margin-bottom: 20px
+ text-transform: uppercase
+
+
+ .text-center
+ text-align: center
+
+ .uppercase
+ text-transform: uppercase
+
+ .welcome
+ font-size: 24px
+ font-weight: bold
+ margin-bottom: 20px
diff --git a/app/templates/courses/teacher-courses-view.jade b/app/templates/courses/teacher-courses-view.jade
index 196515000..ab59c8bb6 100644
--- a/app/templates/courses/teacher-courses-view.jade
+++ b/app/templates/courses/teacher-courses-view.jade
@@ -2,188 +2,93 @@ extends /templates/base
block content
- if view.hoc
- h1 Welcome to Hour of Code!
-
- p
- | Thank you for choosing CodeCombat for your students.
- span.spr.spl To get your kids started, simply send them to
- a(href="/hoc") https://codecombat.com/hoc
- span .
-
- p
- | If you'd like to use our courses system to view their progress:
-
- ol
- li Login/create your account if you have not already.
- li Create a classroom on this page.
- li Invite your students to the classroom.
-
- p
- | You can invite your students even if they've already started playing CodeCombat.
-
- p
- span.spr If you have any problems, please email
- a(href="mailto:team@codecombat.com") team@codecombat.com
- span .
+ .text-center
+ if me.isAnonymous() || !me.get('name')
+ .welcome Welcome!
+ else
+ .welcome Welcome, #{me.get('name')}!
+
+
+ .section-header Your Classes
+
+ if view.classrooms.models.length > 0
+ .container-fluid
+ each classroom in view.classrooms.models
+ +classroom(classroom)
+ else
+ .no-students No classes yet!
+
+ .text-center
+ button.btn.btn-lg.btn-success.uppercase create new class
+
+ h3 Available Courses
- if !me.isAnonymous()
- ul.nav.nav-tabs(role='tablist')
- li.active(role='presentation')
- a(href="#courses-tab-pane" aria-controls="courses" role="tab" data-toggle="tab") Courses
- li(role='presentation')
- a(href="#manage-tab-pane" aria-controls="manage" role="tab" data-toggle="tab") Manage
-
- .tab-content
- #courses-tab-pane.tab-pane.well.active
- h3 Your Courses
- - var courseInstances = view.courseInstances.sliceWithMembers();
-
- if me.isAnonymous()
- .alert.alert-info
- strong Please click "Create Account" or "Log In" above to view and manage your courses.
+ for course in view.courses.models
+ .media
+ .pull-left
+ img.media-object(src=course.get('screenshot'))
+ .media-body
+ h3.media-heading
+ span.spr= course.get('name')
+ if course.get('free')
+ em (free!)
+ p= course.get('description')
+ p
+ strong.spr Concepts:
+ each concept in course.get('concepts')
+ span(data-i18n="concepts." + concept)
+ if course.get('concepts').indexOf(concept) !== course.get('concepts').length - 1
+ span.spr ,
+ p
+ strong.spr Length:
+ span #{course.get('duration') || 0} hours
- else if !_.size(courseInstances)
- .alert.alert-info
- span.spr You currently have no students assigned to courses.
- a#manage-tab-link Go to the manage tab to get set up.
-
- else
- table.table
- tr
- th Class
- th Course
- th Size
- th
- for courseInstance in courseInstances
- tr
- td
- - var classroom = view.classrooms.get(courseInstance.get('classroomID'));
- if classroom
- | #{classroom.get('name')}
- td
- - var course = view.courses.get(courseInstance.get('courseID'))
- if course
- | #{course.get('name')}
- td= _.size(courseInstance.get('members'))
- td
- a.btn.btn-primary.btn-sm(href='/courses/#{courseInstance.get("courseID")}/#{courseInstance.id}') Enter
-
- h3 Available Courses
-
- for course in view.courses.models
- .media
- .pull-left
- img.media-object(src=course.get('screenshot'))
- .media-body
- h3.media-heading
- span.spr= course.get('name')
- if course.get('free')
- em (free!)
- p= course.get('description')
- p
- strong.spr Concepts:
- span= (course.get('concepts') || []).join(', ')
- p
- strong.spr Length:
- span #{course.get('duration') || 0} hours
-
-
-
- #manage-tab-pane.tab-pane.well
+block footer
- p Create a class and add students to it.
-
- - var totalRedeemers = view.prepaids.totalRedeemers();
- - var totalMaxRedeemers = view.prepaids.totalMaxRedeemers();
-
- .text-right
- span.spr Used paid seats: #{totalRedeemers}/#{totalMaxRedeemers}
- a.btn.btn-default.btn-xs(href="/courses/purchase") Add
-
- for classroom in view.classrooms.models
- h2
- span.spr= classroom.get('name')
- - var language = (classroom.get('aceConfig') || {}).language || 'python';
- if language === 'python'
- img(src="/images/common/code_languages/python_icon.png")
- if language === 'javascript'
- img(src="/images/common/code_languages/javascript_icon.png")
- small.spl.edit-classroom-small(data-classroom-id=classroom.id)
- span.glyphicon.glyphicon-pencil
-
- - var courseInstances = view.courseInstances.where({classroomID: classroom.id})
-
- if classroom.saving || classroom.filling
- .progress.progress-striped.active
- .progress-bar(style="width: 100%")
-
- else
- - var description = classroom.get('description');
- if description
- p= description
- table.table
- tr
- th Student
- for courseInstance in courseInstances
- th
- if courseInstance.course
- | #{courseInstance.course.get('name')}
-
- if !_.size(classroom.get('members'))
- tr
- td(colspan=1+view.courses.size())
- em No students in this class yet.
-
- for member in classroom.get('members') || []
- - var user = view.members.get(member);
- if !user
- - continue;
- tr
- td= user.get('name')
- for courseInstance in courseInstances
- td
- if _.contains(courseInstance.get('members'), user.id)
- span.glyphicon.glyphicon-ok
- else
- input.course-instance-membership-checkbox(
- type='checkbox'
- data-course-instance-id=courseInstance.id
- data-user-id=user.id
- )
-
- button.add-students-btn.btn.btn-sm(data-classroom-id=classroom.id) Add Students
-
- hr
-
- .row
- .col-sm-3.col-sm-offset-3
- button#create-new-class-btn.btn.btn-default.btn-block Create New Class
- .col-sm-3
- input#new-classroom-name-input.form-control(placeholder='new class name')
-
- #fixed-area
- .container
- .row.well
- if view.state === 'saving-changes'
- p Saving changes
- - var total = view.membershipAdditions.originalSize + view.usersToRedeem.originalSize;
- - var left = view.membershipAdditions.size() + view.usersToRedeem.size();
- - var pct = Math.max(10, (100 * (total - left) / total)).toFixed(1) + '%';
- .progress.progress-striped.active
- .progress-bar(style="width: #{pct}")
- else
- - var seatsLeft = totalMaxRedeemers - totalRedeemers - view.usersToRedeem.size();
- if seatsLeft < 0
- .alert.alert-danger
- span.spr You do not have enough seats to accommodate all students you have selected.
- a(href="/courses/purchase") Buy more seats.
- else
- .col-sm-2
- button#save-changes-btn.btn.btn-primary.btn-block(disabled=!view.numCourseInstancesToAddTo) Save Changes
- .col-sm-5
- | Students to add to courses: #{view.numCourseInstancesToAddTo || 0}
- .col-sm-5
- | Seats to expend: #{view.usersToRedeem.size()} (will have #{seatsLeft} seats left)
-
-block footer
\ No newline at end of file
+mixin classroom(classroom)
+ .row
+ - var classMemberCount = classroom.get('members').length
+ if classMemberCount > 0
+ .col-md-8
+ p
+ span.spr.class-name= classroom.get('name')
+ if classroom.get('aceConfig') && classroom.get('aceConfig').language
+ span.spr (#{classroom.get('aceConfig').language})
+ else
+ span.spr.class-name (Python)
+ a edit class details
+ .active-courses active courses
+ - var courseInstances = view.courseInstances.where({classroomID: classroom.id})
+ each courseInstance in courseInstances
+ +course(courseInstance, classMemberCount)
+ else
+ .col-md-12
+ p
+ span.spr.class-name= classroom.get('name')
+ if classroom.get('aceConfig') && classroom.get('aceConfig').language
+ span.spr (#{classroom.get('aceConfig').language})
+ else
+ span.spr.class-name (Python)
+ a edit class details
+ .no-students No students yet!
+ .text-center
+ a.btn.btn-info.uppercase(href='/courses/#{classroom.id}') add students
+ br
+ if classMemberCount > 0
+ .col-md-4.text-center
+ .class-count= classMemberCount
+ .active-courses(style='margin:6px;') students
+ a.btn.btn-info.uppercase(href='/courses/#{classroom.id}') view/edit
+ .row
+ .col-md-12
+ .divider
+
+mixin course(courseInstance, classMemberCount)
+ - var courseMemberCount = courseInstance.get('members').length
+ if courseMemberCount > 0
+ - var course = view.courses.get(courseInstance.get('courseID'))
+ p
+ .course-name= course.get('name')
+ .course-enrolled #{courseMemberCount} / #{classMemberCount} students enrolled
+ each concept in course.get('concepts')
+ span.spr.course-concept(data-i18n="concepts." + concept)