codecombat/app/styles/courses/teacher-class-view.sass

310 lines
6.1 KiB
Sass
Raw Normal View History

2016-03-30 16:57:19 -04:00
@import "app/styles/bootstrap/variables"
@import "app/styles/mixins"
Refactor and update teacher-dashboard This updates TeacherClassView and ActivateLicensesModal to use the new state-based rendering system, making it much snappier and less clunky feeling, and improving data consistency. Features also included in this: - Hover details for progress dots in TeacherClassView - ActivateLicensesModal has an "All Students" option and better handling when you switch classrooms in the dropdown - Unenrolled/Unassigned students are shown separately in Course Progress and can be enrolled/assigned from there. Add Back to Classes button on demo-request submitted view Delete temporary patch file Show unenrolled students separately in Course Progress (incomplete) Migrate TeacherClassView to use orchestrator-style events, add unassigned students section, replace bootstrap tabs with state-based tabs Convert missed instance variables to be in @state Fix merge errors (in progress) Convert a bunch of stuff to use state and events (removing student needs fixing) Fix up modal interactions, some bugs Switch state to be a Model, sync up course dropdowns Convert student sorting to use state model Add hover tooltips to TeacherClassView Students tab Don't keep tooltip open when you mouse into it Add dateFirstCompleted and Course Progress tooltips Course Overview progress tooltips Refactor ActivateLicensesModal Refactors: Uses state object for view state Passes back the updated users in 'redeem-users' event instead of modifying given collection Features: Add 'All Students' dropdown option Don't forget checked students if you change classroom from dropdown, but only enroll the ones visible when you click "Enroll (n) Students" Separate enrolled students; improve style Rearrange error text Disable enroll-students button when none are selected Remove console.logs Move style-flat variables to another file This prevents .style-flat from being copied in multiple times to the resulting CSS. Show Unarchive button when on the page for an archived class Move text to en.coffee Only sort students on first classroom sync Fix merge error Handle sessions missing completion date in view logic instead of migration script Listen to classroom sync more than once in case it gets unarchived
2016-04-19 16:44:48 -04:00
@import "app/styles/style-flat-variables"
.nowrap
white-space: nowrap
2016-03-30 16:57:19 -04:00
.alternating-background:nth-child(2n+1)
background-color: #ebebeb
.alternating-background:nth-child(2n)
background-color: $gray-lighter
#teacher-class-view
.breadcrumbs
color: #065e73
a
color: #065e73
h3
display: inline-block
h3 ~ .edit-classroom
color: black
text-decoration: underline
.classroom-details
.small-details
margin-bottom: 4px
2016-03-30 16:57:19 -04:00
.concept
& span
white-space: nowrap
&.forest
color: $forest
&.gold
color: $gold
&+.concept:before
content: ', '
ul.nav-tabs
border: none
.tab-spacer
float: left
width: 15px
height: 48px
border-bottom: thin solid #979797
.tab-filler
// Triggers block formatting context
// http://stackoverflow.com/questions/1260122/expand-a-div-to-take-the-remaining-width
overflow: hidden
height: 48px
border-bottom: thin solid #979797
li > a
margin: 0
border: thin solid #979797
border-bottom: none
background: white
border-radius: 5px 5px 0 0
width: 175px
color: black
font-family: $headline-font
li
border-bottom: thin solid #979797
li.active
border-bottom: none
.bulk-assign-controls
Stuff Partially fix ActivateLicensesModal.spec [IN PROGRESS] Don't display deleted users Move userID to classroom.deletedMembers on user delete (not retroactive) Fix PDF links for course guides, remove old PDFs from repo Remove deprecated SalesView Remove underline for not-yet-linked student names Only show class select when there's more than one Ignore case when sorting student names Use student.broadName instead of name for display and sorting Fix initial load not showing progress after joining a course (hacky) Fix text entry for enrollment number input Fix enrollment statistics Fix enrollment stats completely (and add back in per-class unenrolled count) Add deletedMembers to classroom schema More fixes to enrollment stats (don't count nonmember prepaids) Don't use 0 as implicit false for openSpots Update suggested number of credit to buy automatically Fix classroom edit form ignoring cleared values Add alert text when more users selected than enrollments available Alert user when trying to assign course to unenrolled students Alert user when assigning course to nobody Add some tests for TeacherClassView bulk assign alerts Fix TeacherClassView tests failing without demos Use model/collection.fakeRequests :D Remove unused comment Fix handling of improperly sorted deleted users on clientside Add test for moving deleted users to deletedMembers Add script for moving all deleted classroom members to classroom.deletedMembers Completely rewrite tallying up enrollment statistics Fix some tests to not be dependent on logged-in user Address PR comments Fix default number of enrollments to buy Fix i18n for not enough enrollments Use custom error message for classroom name length
2016-04-07 17:55:42 -04:00
position: relative
2016-03-30 16:57:19 -04:00
float: right
margin-bottom: -9999px
margin-top: 20px
select
margin-left: 7px
.assign-to-selected-students
margin-left: 10px
.enroll-selected-students
margin-left: 56px
Stuff Partially fix ActivateLicensesModal.spec [IN PROGRESS] Don't display deleted users Move userID to classroom.deletedMembers on user delete (not retroactive) Fix PDF links for course guides, remove old PDFs from repo Remove deprecated SalesView Remove underline for not-yet-linked student names Only show class select when there's more than one Ignore case when sorting student names Use student.broadName instead of name for display and sorting Fix initial load not showing progress after joining a course (hacky) Fix text entry for enrollment number input Fix enrollment statistics Fix enrollment stats completely (and add back in per-class unenrolled count) Add deletedMembers to classroom schema More fixes to enrollment stats (don't count nonmember prepaids) Don't use 0 as implicit false for openSpots Update suggested number of credit to buy automatically Fix classroom edit form ignoring cleared values Add alert text when more users selected than enrollments available Alert user when trying to assign course to unenrolled students Alert user when assigning course to nobody Add some tests for TeacherClassView bulk assign alerts Fix TeacherClassView tests failing without demos Use model/collection.fakeRequests :D Remove unused comment Fix handling of improperly sorted deleted users on clientside Add test for moving deleted users to deletedMembers Add script for moving all deleted classroom members to classroom.deletedMembers Completely rewrite tallying up enrollment statistics Fix some tests to not be dependent on logged-in user Address PR comments Fix default number of enrollments to buy Fix i18n for not enough enrollments Use custom error message for classroom name length
2016-04-07 17:55:42 -04:00
.cant-assign-to-unenrolled, .no-students-selected
position: absolute
top: -24px
color: red
font-size: 13px
visibility: hidden
&.visible
visibility: visible
2016-03-30 16:57:19 -04:00
.students-table
width: 100%
.student-info-col
width: 240px
.checkbox-col
width: 75px
.latest-level-col
width: 320px
.view-class-col
width: 20px
th
font-weight: normal
white-space: nowrap
vertical-align: bottom
td
height: 66px
.enroll-student-button
margin-left: 33%
margin-left: calc((100% - 120px - 36px) * 0.6)
.inline-student-list
padding-left: 0
// TODO: Fix highlighted text value
&:before
content: '('
&:after
content: ')'
list-style: none
li
display: inline
.inline-student-name
white-space: nowrap
Stuff Partially fix ActivateLicensesModal.spec [IN PROGRESS] Don't display deleted users Move userID to classroom.deletedMembers on user delete (not retroactive) Fix PDF links for course guides, remove old PDFs from repo Remove deprecated SalesView Remove underline for not-yet-linked student names Only show class select when there's more than one Ignore case when sorting student names Use student.broadName instead of name for display and sorting Fix initial load not showing progress after joining a course (hacky) Fix text entry for enrollment number input Fix enrollment statistics Fix enrollment stats completely (and add back in per-class unenrolled count) Add deletedMembers to classroom schema More fixes to enrollment stats (don't count nonmember prepaids) Don't use 0 as implicit false for openSpots Update suggested number of credit to buy automatically Fix classroom edit form ignoring cleared values Add alert text when more users selected than enrollments available Alert user when trying to assign course to unenrolled students Alert user when assigning course to nobody Add some tests for TeacherClassView bulk assign alerts Fix TeacherClassView tests failing without demos Use model/collection.fakeRequests :D Remove unused comment Fix handling of improperly sorted deleted users on clientside Add test for moving deleted users to deletedMembers Add script for moving all deleted classroom members to classroom.deletedMembers Completely rewrite tallying up enrollment statistics Fix some tests to not be dependent on logged-in user Address PR comments Fix default number of enrollments to buy Fix i18n for not enough enrollments Use custom error message for classroom name length
2016-04-07 17:55:42 -04:00
// text-decoration: underline
2016-03-30 16:57:19 -04:00
li:not(:last-child):after
content: ', '
.student-info
max-width: 200px
line-height: 20px
.student-name, .student-email
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.level-name
white-space: nowrap
overflow: ellipsis
font-weight: bold
// line-height: 20px
.sort-button
border: none
background: none
font-weight: bold
text-decoration: underline
.edit-student-button
color: black
font-weight: bold
text-decoration: underline
.glyphicon
color: $gray-light
Improve student account recovery This adds the ability to verify email addresses of a user, so we know they have access to the email address on their account. Until a user has verified their email address, any teacher of a class they're in can reset their password for them via the Teacher Dashboard. When a user's email address is verified, a teacher may trigger a password recovery email to be sent to the student. Verification links are valid forever, until the user changes the email address they have on file. They are created using a timestamp, with a sha256 of timestamp+salt+userID+email. Currently the hash value is rather long, could be shorter. Squashed commit messages: Add server endpoints for verifying email address Add server endpoints for verifying email address (pt 2) Add Server+Client endpoint for sending verification email Add client view for verification links Add Edit Student Modal for resetting passwords Add specs for EditStudentModal Tweak method name in EditStudentModal Add edit student button to TeacherClassView Fix up frontend for teacher password resetting Add middleware for teacher password resetting Improve button UX in EditStudentModal Add JoinClassModal Add welcome emails, use broad name Use email without domain as fallback instead of full email Fetch user on edit student modal open Don't allow password reset if student email is verified Set role to student on user signup with classCode Tweak interface for joinClassModal Add button to request verification email for yourself Fix verify email template ID Move text to en.coffee Minor tweaks Fix code review comments Fix some tests, disable a broken one Fix misc tests Fix more tests Refactor recovery email sending to auth Fix overbroad sass Add options to refactored recovery email function Rename getByCode to fetchByCode Fix error message Fix up error handling in users middleware Use .get instead of .toObject Use findById Fix more code review comments Disable still-broken test
2016-05-11 17:39:26 -04:00
.edit-student-link, .remove-student-link
display: inline-block
color: $burgandy
font-weight: bold
text-decoration: underline
line-height: 16px
2016-03-30 16:57:19 -04:00
// Course Progress tab
#course-progress-tab
.course-overview-row
margin-top: 50px
border: thin solid gray
border-radius: 8px
.student-levels-table
margin-top: 80px
.sort-buttons
padding-left: 75px
margin-bottom: 5px
.student-levels-row, .course-overview-row
padding-left: 75px
padding-top: 15px
padding-bottom: 30px
.student-levels-progress, .course-overview-progress
max-width: 880px
margin: -5px
margin-top: 5px
.progress-dot
margin: 5px
Refactor and update teacher-dashboard This updates TeacherClassView and ActivateLicensesModal to use the new state-based rendering system, making it much snappier and less clunky feeling, and improving data consistency. Features also included in this: - Hover details for progress dots in TeacherClassView - ActivateLicensesModal has an "All Students" option and better handling when you switch classrooms in the dropdown - Unenrolled/Unassigned students are shown separately in Course Progress and can be enrolled/assigned from there. Add Back to Classes button on demo-request submitted view Delete temporary patch file Show unenrolled students separately in Course Progress (incomplete) Migrate TeacherClassView to use orchestrator-style events, add unassigned students section, replace bootstrap tabs with state-based tabs Convert missed instance variables to be in @state Fix merge errors (in progress) Convert a bunch of stuff to use state and events (removing student needs fixing) Fix up modal interactions, some bugs Switch state to be a Model, sync up course dropdowns Convert student sorting to use state model Add hover tooltips to TeacherClassView Students tab Don't keep tooltip open when you mouse into it Add dateFirstCompleted and Course Progress tooltips Course Overview progress tooltips Refactor ActivateLicensesModal Refactors: Uses state object for view state Passes back the updated users in 'redeem-users' event instead of modifying given collection Features: Add 'All Students' dropdown option Don't forget checked students if you change classroom from dropdown, but only enroll the ones visible when you click "Enroll (n) Students" Separate enrolled students; improve style Rearrange error text Disable enroll-students button when none are selected Remove console.logs Move style-flat variables to another file This prevents .style-flat from being copied in multiple times to the resulting CSS. Show Unarchive button when on the page for an archived class Move text to en.coffee Only sort students on first classroom sync Fix merge error Handle sessions missing completion date in view logic instead of migration script Listen to classroom sync more than once in case it gets unarchived
2016-04-19 16:44:48 -04:00
.unassigned-students
margin-top: 75px
line-height: 45px
.student-name, .student-email, .latest-completed
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
.small-details, .small
line-height: 45px
.latest-completed
white-space: nowrap
.level-name
display: inline
.btn
margin-top: 6.5px
margin-bottom: 6.5px
2016-03-30 16:57:19 -04:00
// Checkboxes
.checkbox-flat
margin: 8px auto
// TODO: Move to style-flat?
.view-class-arrow
float: right
margin-right: 16px
color: $gray-light
// height: 100%
font-size: 35px
line-height: 35px
align-self: center
.view-class-arrow-inner
color: $gray-lighter
&:hover
text-decoration: none
.progress-dot
display: inline-block
margin-right: 6px
width: 34px
height: 34px
border-radius: 50%
// margin-top: 23px
// margin-bottom: 23px
background: $gray-light
position: relative
.dot-label
padding-top: 2px
.dot-label-inner
font-size: 11px
font-weight: bold
color: white
.progress-dot.forest
background: $forest
.tooltip-inner
color: $forest
border-color: $forest
.tooltip-arrow
border-top-color: $forest
.progress-dot.gold
background: $gold
.tooltip-inner
color: $navy
border-color: $navy
.tooltip-arrow
border-top-color: $navy
// Code copying buttons
.copy-button-group
input
height: 50px
width: 220px
background: #fafafa
border: thin solid #979797
text-align: center
button
height: 50px
width: 210px
float: right
.export-student-progress-btn
Refactor and update teacher-dashboard This updates TeacherClassView and ActivateLicensesModal to use the new state-based rendering system, making it much snappier and less clunky feeling, and improving data consistency. Features also included in this: - Hover details for progress dots in TeacherClassView - ActivateLicensesModal has an "All Students" option and better handling when you switch classrooms in the dropdown - Unenrolled/Unassigned students are shown separately in Course Progress and can be enrolled/assigned from there. Add Back to Classes button on demo-request submitted view Delete temporary patch file Show unenrolled students separately in Course Progress (incomplete) Migrate TeacherClassView to use orchestrator-style events, add unassigned students section, replace bootstrap tabs with state-based tabs Convert missed instance variables to be in @state Fix merge errors (in progress) Convert a bunch of stuff to use state and events (removing student needs fixing) Fix up modal interactions, some bugs Switch state to be a Model, sync up course dropdowns Convert student sorting to use state model Add hover tooltips to TeacherClassView Students tab Don't keep tooltip open when you mouse into it Add dateFirstCompleted and Course Progress tooltips Course Overview progress tooltips Refactor ActivateLicensesModal Refactors: Uses state object for view state Passes back the updated users in 'redeem-users' event instead of modifying given collection Features: Add 'All Students' dropdown option Don't forget checked students if you change classroom from dropdown, but only enroll the ones visible when you click "Enroll (n) Students" Separate enrolled students; improve style Rearrange error text Disable enroll-students button when none are selected Remove console.logs Move style-flat variables to another file This prevents .style-flat from being copied in multiple times to the resulting CSS. Show Unarchive button when on the page for an archived class Move text to en.coffee Only sort students on first classroom sync Fix merge error Handle sessions missing completion date in view logic instead of migration script Listen to classroom sync more than once in case it gets unarchived
2016-04-19 16:44:48 -04:00
margin-top: 10px
// Enrollment Status Tab
#search-form-group
position: relative
input
width: auto
.glyphicon
color: $gray
position: absolute
top: 8px
right: 5px
#enrollment-status-table
// These column widths are just to keep the cells from resizing on search
.checkbox-col
width: 75px
.student-info-col
width: 240px
.status-col
width: 300px
.enroll-col
width: 140px
.revoke-col
width: 170px
td
vertical-align: middle