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

@import "app/styles/bootstrap/variables"
@import "app/styles/mixins"
@import "app/styles/style-flat-variables"

#teacher-classes-view
  
  #site-content-area
    margin-bottom: 65px
  
  .access-restricted
    margin-top: 100px
    
  .teacher-account-blurb
    margin-top: 100px
    margin-bottom: 700px
    
  h1
    margin-top: 50px
  
  .language
    display: inline-block
    width: 140px
  
  .student-count
    display: inline-block
    
  .class-links
    a
      font-weight: bold
      color: black
      margin-right: 1rem
      text-decoration: underline
    
  .classes
    margin-top: 20px
    
    .class
      padding: 20px
      display: flex
      
  .class:nth-child(2n+1)
    background-color: #ebebeb

  .class:nth-child(2n)
    background-color: $gray-lighter
    
  .view-class-arrow
    color: $gray-darker
    // height: 100%
    font-size: 35px
    line-height: 35px
    align-self: center
    .view-class-arrow-inner
      color: $gray-light
      &:hover
        text-decoration: none
      
  .progress-col
    display: flex
    align-self: center
    align-items: center
    
  .progress-dot
    display: inline-block
    margin-right: 20px
    width: 62px
    height: 62px
    border-radius: 50%
    margin-top: 23px
    margin-bottom: 23px
    background: $gray-light
    position: relative
    .dot-label
      color: $gray-dark
      position: absolute
      left: 50%
      top: 50%
      .text-h6
        margin-left: -50%
        margin-top: -50%
        color: white
    
  .progress-dot.forest
    background: $forest
    .tooltip-inner
      color: $forest
      border: 1px solid $forest
    .tooltip-arrow
      border-top-color: $forest
    
  .progress-dot.gold
    background: $gold
    .tooltip-inner
      color: $navy
      border: 1px solid $navy
    .tooltip-arrow
      border-top-color: $navy
  
  .add-students
    margin-left: auto
    margin-right: auto

  .create-class
    margin-top: 65px
    margin-bottom: 65px
Implement all of teacher-dashboard 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"`
Implement all of teacher-dashboard 2016-03-30 16:57:19 -04:00
			`#teacher-classes-view`

			`#site-content-area`
			`margin-bottom: 65px`

			`.access-restricted`
			`margin-top: 100px`

			`.teacher-account-blurb`
			`margin-top: 100px`
			`margin-bottom: 700px`

			`h1`
			`margin-top: 50px`

			`.language`
			`display: inline-block`
			`width: 140px`

			`.student-count`
			`display: inline-block`

			`.class-links`
			`a`
			`font-weight: bold`
			`color: black`
			`margin-right: 1rem`
			`text-decoration: underline`

			`.classes`
			`margin-top: 20px`

			`.class`
			`padding: 20px`
			`display: flex`

			`.class:nth-child(2n+1)`
			`background-color: #ebebeb`

			`.class:nth-child(2n)`
			`background-color: $gray-lighter`

			`.view-class-arrow`
			`color: $gray-darker`
			`// height: 100%`
			`font-size: 35px`
			`line-height: 35px`
			`align-self: center`
			`.view-class-arrow-inner`
			`color: $gray-light`
			`&:hover`
			`text-decoration: none`

			`.progress-col`
			`display: flex`
			`align-self: center`
			`align-items: center`

			`.progress-dot`
			`display: inline-block`
			`margin-right: 20px`
			`width: 62px`
			`height: 62px`
			`border-radius: 50%`
			`margin-top: 23px`
			`margin-bottom: 23px`
			`background: $gray-light`
			`position: relative`
			`.dot-label`
			`color: $gray-dark`
			`position: absolute`
			`left: 50%`
			`top: 50%`
			`.text-h6`
			`margin-left: -50%`
			`margin-top: -50%`
			`color: white`

			`.progress-dot.forest`
			`background: $forest`
			`.tooltip-inner`
			`color: $forest`
			`border: 1px solid $forest`
			`.tooltip-arrow`
			`border-top-color: $forest`

			`.progress-dot.gold`
			`background: $gold`
			`.tooltip-inner`
			`color: $navy`
			`border: 1px solid $navy`
			`.tooltip-arrow`
			`border-top-color: $navy`

			`.add-students`
			`margin-left: auto`
			`margin-right: auto`

			`.create-class`
			`margin-top: 65px`
			`margin-bottom: 65px`