codeninjasllc/codecombat
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update /courses/teachers

Browse source 
Still incomplete: edit class modal, create new class modal, updated
available courses list UI
This commit is contained in:
Matt Lott 2015-11-30 14:39:46 -08:00
parent 5e733d1517
commit e8fc90de23
2 changed files with 149 additions and 189 deletions
app
styles/courses
teacher-courses-view.sass
templates/courses
teacher-courses-view.jade

69
app/styles/courses/teacher-courses-view.sass
View file

@ -1,26 +1,81 @@
#teacher-courses-view #teacher-courses-view
margin-bottom: 50px 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 img.media-object
width: 300px width: 300px
.edit-classroom-small .edit-classroom-small
cursor: pointer cursor: pointer
&:hover &:hover
color: grey color: grey
#fixed-area #fixed-area
position: fixed position: fixed
bottom: 0 bottom: 0
left: 0 left: 0
right: 0 right: 0
.well .well
margin-bottom: 0 margin-bottom: 0
padding: 5px padding: 5px
.col-sm-5 .col-sm-5
padding-top: 8px padding-top: 8px
.progress .progress
margin-bottom: 0 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

269
app/templates/courses/teacher-courses-view.jade
View file

@ -2,188 +2,93 @@ extends /templates/base
block content block content
if view.hoc .text-center
h1 Welcome to Hour of Code! if me.isAnonymous() || !me.get('name')
.welcome Welcome!
p else
| Thank you for choosing CodeCombat for your students. .welcome Welcome, #{me.get('name')}!
span.spr.spl To get your kids started, simply send them to
a(href="/hoc") https://codecombat.com/hoc
span . .section-header Your Classes
p if view.classrooms.models.length > 0
| If you'd like to use our courses system to view their progress: .container-fluid
each classroom in view.classrooms.models
ol +classroom(classroom)
li Login/create your account if you have not already. else
li Create a classroom on this page. .no-students No classes yet!
li Invite your students to the classroom.
.text-center
p button.btn.btn-lg.btn-success.uppercase create new class
| You can invite your students even if they've already started playing CodeCombat.
h3 Available Courses
p
span.spr If you have any problems, please email
a(href="mailto:team@codecombat.com") team@codecombat.com
span .
if !me.isAnonymous() for course in view.courses.models
ul.nav.nav-tabs(role='tablist') .media
li.active(role='presentation') .pull-left
a(href="#courses-tab-pane" aria-controls="courses" role="tab" data-toggle="tab") Courses img.media-object(src=course.get('screenshot'))
li(role='presentation') .media-body
a(href="#manage-tab-pane" aria-controls="manage" role="tab" data-toggle="tab") Manage h3.media-heading
span.spr= course.get('name')
.tab-content if course.get('free')
#courses-tab-pane.tab-pane.well.active em (free!)
h3 Your Courses p= course.get('description')
- var courseInstances = view.courseInstances.sliceWithMembers(); p
strong.spr Concepts:
if me.isAnonymous() each concept in course.get('concepts')
.alert.alert-info span(data-i18n="concepts." + concept)
strong Please click "Create Account" or "Log In" above to view and manage your courses. 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) block footer
.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
p Create a class and add students to it. mixin classroom(classroom)
.row
- var totalRedeemers = view.prepaids.totalRedeemers(); - var classMemberCount = classroom.get('members').length
- var totalMaxRedeemers = view.prepaids.totalMaxRedeemers(); if classMemberCount > 0
.col-md-8
.text-right p
span.spr Used paid seats: #{totalRedeemers}/#{totalMaxRedeemers} span.spr.class-name= classroom.get('name')
a.btn.btn-default.btn-xs(href="/courses/purchase") Add if classroom.get('aceConfig') && classroom.get('aceConfig').language
span.spr (#{classroom.get('aceConfig').language})
for classroom in view.classrooms.models else
h2 span.spr.class-name (Python)
span.spr= classroom.get('name') a edit class details
- var language = (classroom.get('aceConfig') || {}).language || 'python'; .active-courses active courses
if language === 'python' - var courseInstances = view.courseInstances.where({classroomID: classroom.id})
img(src="/images/common/code_languages/python_icon.png") each courseInstance in courseInstances
if language === 'javascript' +course(courseInstance, classMemberCount)
img(src="/images/common/code_languages/javascript_icon.png") else
small.spl.edit-classroom-small(data-classroom-id=classroom.id) .col-md-12
span.glyphicon.glyphicon-pencil p
span.spr.class-name= classroom.get('name')
- var courseInstances = view.courseInstances.where({classroomID: classroom.id}) if classroom.get('aceConfig') && classroom.get('aceConfig').language
span.spr (#{classroom.get('aceConfig').language})
if classroom.saving || classroom.filling else
.progress.progress-striped.active span.spr.class-name (Python)
.progress-bar(style="width: 100%") a edit class details
.no-students No students yet!
else .text-center
- var description = classroom.get('description'); a.btn.btn-info.uppercase(href='/courses/#{classroom.id}') add students
if description br
p= description if classMemberCount > 0
table.table .col-md-4.text-center
tr .class-count= classMemberCount
th Student .active-courses(style='margin:6px;') students
for courseInstance in courseInstances a.btn.btn-info.uppercase(href='/courses/#{classroom.id}') view/edit
th .row
if courseInstance.course .col-md-12
| #{courseInstance.course.get('name')} .divider
if !_.size(classroom.get('members')) mixin course(courseInstance, classMemberCount)
tr - var courseMemberCount = courseInstance.get('members').length
td(colspan=1+view.courses.size()) if courseMemberCount > 0
em No students in this class yet. - var course = view.courses.get(courseInstance.get('courseID'))
p
for member in classroom.get('members') || [] .course-name= course.get('name')
- var user = view.members.get(member); .course-enrolled #{courseMemberCount} / #{classMemberCount} students enrolled
if !user each concept in course.get('concepts')
- continue; span.spr.course-concept(data-i18n="concepts." + concept)
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