mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-03 20:31:29 -05:00
8223122a6b
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
488 lines
10 KiB
Sass
488 lines
10 KiB
Sass
@import "app/styles/bootstrap/variables"
|
|
@import "app/styles/mixins"
|
|
@import "app/styles/style-flat-variables"
|
|
|
|
// TODO: Move flat style into probably several files and Bootstrap variables
|
|
|
|
body[lang='ru'], body[lang='uk'], body[lang='bg'], body[lang^='mk'], body[lang='sr']
|
|
// Google Fonts version of Arvo only has Latin glyphs, not Cyrillic
|
|
// TODO: figure out font fallbacks for other languages not covered by Arvo
|
|
//$headline-font: 'Open Sans', serif // Doesn't work
|
|
h1, .text-h1, h3, .text-h3, h5, .text-h5
|
|
font-family: 'Open Sans', serif
|
|
|
|
.style-flat
|
|
background: white
|
|
color: black
|
|
|
|
// Fonts
|
|
h1, h2, h3, h4, h5, h6, .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6
|
|
// Unsetting game styles
|
|
font-variant: normal
|
|
color: black
|
|
margin: 0
|
|
|
|
h1, .text-h1
|
|
font-family: $headline-font
|
|
font-weight: normal
|
|
font-size: 46px
|
|
line-height: 62px
|
|
|
|
h2, .text-h2
|
|
font-family: $body-font
|
|
font-weight: lighter
|
|
font-size: 30px
|
|
line-height: 42px
|
|
|
|
h3, .text-h3
|
|
font-family: $headline-font
|
|
font-weight: normal
|
|
font-size: 33px
|
|
line-height: 45px
|
|
|
|
h4, .text-h4
|
|
font-family: $body-font
|
|
font-weight: lighter
|
|
font-size: 22px
|
|
line-height: 32px
|
|
|
|
h5, .text-h5
|
|
font-family: $headline-font
|
|
font-weight: bold
|
|
font-size: 20px
|
|
line-height: 31px
|
|
|
|
h6, .text-h6
|
|
font-family: $body-font
|
|
font-weight: bold
|
|
font-size: 14px
|
|
line-height: 20px
|
|
|
|
p
|
|
color: black
|
|
margin: 0 0 14px
|
|
|
|
.small
|
|
font-weight: normal
|
|
font-size: 14px
|
|
line-height: 20px
|
|
|
|
.semibold, .student-name
|
|
font-weight: 600
|
|
|
|
.small-details
|
|
font: $headline-font
|
|
font-size: 15px
|
|
line-height: 26px
|
|
|
|
font-family: $body-font
|
|
font-size: 18px
|
|
line-height: 29px
|
|
|
|
blockquote
|
|
border: none
|
|
|
|
&:before
|
|
font-family: "Monaco"
|
|
content: "\201C"
|
|
position: absolute
|
|
left: 0px
|
|
top: 20px
|
|
font-size: 40px
|
|
opacity: 0.5
|
|
|
|
// Navbar
|
|
|
|
#main-nav.navbar
|
|
background: white
|
|
margin-bottom: 0
|
|
white-space: nowrap // prevent home icon from going under brand
|
|
|
|
a.navbar-brand
|
|
#logo-img
|
|
width: 230px
|
|
height: 65px
|
|
margin-right: 10px
|
|
|
|
color: $burgandy
|
|
&:hover
|
|
color: white
|
|
background: $burgandy
|
|
|
|
.glyphicon-home
|
|
position: relative
|
|
top: 3px
|
|
|
|
.navbar-toggle
|
|
color: black
|
|
margin: 30px 25px 0
|
|
|
|
@media (min-width: $screen-lg-min)
|
|
#navbar-collapse
|
|
float: right
|
|
|
|
#navbar-collapse
|
|
max-height: none
|
|
|
|
.nav > li > a
|
|
// TODO: Move this to bootstrap variables for navbars
|
|
font-weight: bold
|
|
font-family: $body-font
|
|
font-size: 16px
|
|
line-height: 31px
|
|
padding: 32px 15px 0
|
|
height: 95px
|
|
color: $burgandy
|
|
text-shadow: 0 0 0
|
|
|
|
&:hover
|
|
background: $burgandy
|
|
color: white
|
|
|
|
.nav > li.disabled > a
|
|
color: black
|
|
&:hover
|
|
background: white
|
|
color: black
|
|
cursor: default
|
|
|
|
#language-dropdown-wrapper
|
|
display: inline-block
|
|
padding: 30px 10px
|
|
width: 100%
|
|
|
|
@media (max-width: $screen-lg-min)
|
|
.nav > li > a
|
|
padding: 10px 20px
|
|
height: 45px
|
|
#language-dropdown-wrapper
|
|
display: inline-block
|
|
padding: 10px 10px
|
|
.language-dropdown
|
|
width: 150px
|
|
|
|
.img-circle
|
|
border: $gold 8px solid
|
|
width: 98px
|
|
height: 98px // Includes the border
|
|
|
|
.img-circle-small
|
|
border: $gold 3px solid
|
|
width: 33px
|
|
height: 33px
|
|
|
|
// For teacher avatars
|
|
.border-burgandy
|
|
border-color: $burgandy
|
|
|
|
.border-navy
|
|
border-color: $navy
|
|
|
|
.user-level
|
|
position: absolute
|
|
top: 76px
|
|
right: 42px
|
|
color: $gold
|
|
text-shadow: 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black
|
|
|
|
// Wells
|
|
|
|
.well
|
|
padding: 8px
|
|
background-color: transparent
|
|
border: thin solid lightgray
|
|
border-radius: 0
|
|
|
|
|
|
// Buttons
|
|
|
|
.btn
|
|
border: none
|
|
border-radius: 5px
|
|
font-family: $body-font
|
|
font-weight: normal
|
|
background-image: none // overrides legacy buttons
|
|
.disabled
|
|
opacity: 50%
|
|
|
|
.btn ~ .btn
|
|
margin-left: 12px
|
|
|
|
.btn-primary, .btn-navy
|
|
background-color: $navy
|
|
color: white
|
|
|
|
.btn-primary-alt, .btn-navy-alt
|
|
background-color: white
|
|
border: 1px solid $navy
|
|
color: $navy
|
|
|
|
.btn-forest
|
|
background-color: $forest
|
|
color: white
|
|
|
|
.btn-forest-alt
|
|
background-color: white
|
|
border: 1px solid $forest
|
|
color: $forest
|
|
|
|
.btn-gold
|
|
background-color: $gold
|
|
color: white
|
|
|
|
.btn-gold-alt
|
|
background-color: white
|
|
border: 1px solid $gold
|
|
color: $gold
|
|
|
|
.btn-purple
|
|
background-color: $purple
|
|
color: white
|
|
|
|
.btn-gold-alt
|
|
background-color: white
|
|
border: 1px solid $purple
|
|
color: $purple
|
|
|
|
.btn-burgandy
|
|
background-color: $burgandy
|
|
color: white
|
|
|
|
.btn-lg
|
|
font-size: 18px
|
|
|
|
.btn-gplus
|
|
color: white
|
|
background-color: #DD4B39
|
|
img
|
|
height: 22px
|
|
|
|
.btn-facebook
|
|
color: white
|
|
background-color: #3B5998
|
|
img
|
|
height: 22px
|
|
|
|
// Dropdowns
|
|
select
|
|
height: 33px
|
|
background-color: white
|
|
border: 1px solid $navy
|
|
color: $navy
|
|
// TODO: Font size 18? Inconsistent with buttons on teacher-class-view bulk assign
|
|
|
|
// Tooltips
|
|
.tooltip.in
|
|
opacity: 1
|
|
|
|
.tooltip .tooltip-arrow::after
|
|
// Create a duplicate tooltip arrow which will cover the main arrow and make it seem like a line rather than filled
|
|
content: ' '
|
|
position: absolute
|
|
width: 0
|
|
height: 0
|
|
border-color: transparent
|
|
border-style: solid
|
|
|
|
// For each arrow position: make color gray-dark, make arrow larger, and position duplicate arrow
|
|
.tooltip.top .tooltip-arrow
|
|
margin-left: -10px
|
|
border-width: 5px 10px 0
|
|
border-top-color: $gray-dark
|
|
&::after
|
|
top: -6px
|
|
left: 50%
|
|
margin-left: -10px
|
|
border-width: 5px 10px 0
|
|
border-top-color: white
|
|
|
|
.tooltip.right .tooltip-arrow
|
|
border-right-color: $gray-dark
|
|
border-width: 5px 6px 5px 0
|
|
|
|
&::after
|
|
top: 50%
|
|
left: 1px
|
|
margin-top: -5px
|
|
border-width: 5px 6px 5px 0
|
|
border-right-color: white
|
|
|
|
.tooltip.left .tooltip-arrow
|
|
border-right-color: $gray-dark
|
|
border-width: 5px 0 5px 6px
|
|
|
|
&::after
|
|
top: 50%
|
|
right: 1px
|
|
margin-top: -5px
|
|
border-width: 5px 0 5px 6px
|
|
border-left-color: white
|
|
|
|
.tooltip.bottom .tooltip-arrow
|
|
border-bottom-color: $gray-dark
|
|
margin-left: -10px
|
|
border-width: 0 10px 5px
|
|
&::after
|
|
top: 1px
|
|
left: 50%
|
|
margin-left: -10px
|
|
border-width: 0 10px 5px
|
|
border-bottom-color: white
|
|
|
|
.tooltip-inner
|
|
padding: 10px 20px
|
|
border: 1px solid $gray-dark
|
|
color: black
|
|
background: white
|
|
border-radius: 20px
|
|
min-width: 150px
|
|
max-width: 600px
|
|
|
|
|
|
// Checkboxes
|
|
// Note: You have to use this structure in your jade:
|
|
// .checkbox-flat
|
|
// input(type='checkbox' id='some-id')
|
|
// label.checkmark(for='some-id')
|
|
|
|
.checkbox-flat
|
|
position: relative
|
|
background: white
|
|
border: thin solid #979797
|
|
width: 20px
|
|
height: 20px
|
|
|
|
input
|
|
visibility: hidden
|
|
|
|
label
|
|
position: absolute
|
|
width: 18px
|
|
height: 18px
|
|
left: 1px
|
|
top: 1px
|
|
|
|
label:after
|
|
opacity: 0
|
|
content: ''
|
|
position: absolute
|
|
width: 14px
|
|
height: 7px
|
|
background: transparent
|
|
top: 3px
|
|
left: 1px
|
|
border: 2px solid black
|
|
border-top: none
|
|
border-right: none
|
|
transform: rotate(-45deg)
|
|
|
|
label:hover::after
|
|
opacity: 0.3
|
|
|
|
input:checked + label:after
|
|
opacity: 1
|
|
|
|
|
|
// Classes
|
|
|
|
.text-navy
|
|
color: $navy
|
|
|
|
.bg-navy
|
|
background-color: $navy
|
|
color: white
|
|
h1, h2, h3, h4, h5, h6, a
|
|
color: white
|
|
a.btn-primary-alt
|
|
color: $navy
|
|
|
|
// Spacing
|
|
// Copied spacing classes in bootstrap v4 alpha 2
|
|
// http://v4-alpha.getbootstrap.com/components/utilities/#spacing
|
|
|
|
$spacer: 1rem !default
|
|
$spacer-x: $spacer !default
|
|
$spacer-y: $spacer !default
|
|
$spacers: ( 0: ( x: 0, y: 0 ), 1: ( x: $spacer-x, y: $spacer-y ), 2: ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), 3: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ), 4: ( x: ($spacer-x * 4), y: ($spacer-y * 4) ), 5: ( x: ($spacer-x * 5), y: ($spacer-y * 5) ) ) !default
|
|
|
|
.m-x-auto
|
|
margin-right: auto !important
|
|
margin-left: auto !important
|
|
|
|
@each $prop, $abbrev in (margin: m, padding: p)
|
|
@each $size, $lengths in $spacers
|
|
$length-x: map-get($lengths, x)
|
|
$length-y: map-get($lengths, y)
|
|
|
|
.#{$abbrev}-a-#{$size}
|
|
#{$prop}: $length-y $length-x !important // a = All sides
|
|
.#{$abbrev}-t-#{$size}
|
|
#{$prop}-top: $length-y !important
|
|
.#{$abbrev}-r-#{$size}
|
|
#{$prop}-right: $length-x !important
|
|
.#{$abbrev}-b-#{$size}
|
|
#{$prop}-bottom: $length-y !important
|
|
.#{$abbrev}-l-#{$size}
|
|
#{$prop}-left: $length-x !important
|
|
|
|
// Axes
|
|
.#{$abbrev}-x-#{$size}
|
|
#{$prop}-right: $length-x !important
|
|
#{$prop}-left: $length-x !important
|
|
|
|
.#{$abbrev}-y-#{$size}
|
|
#{$prop}-top: $length-y !important
|
|
#{$prop}-bottom: $length-y !important
|
|
|
|
// base-flat.jade
|
|
|
|
#footer
|
|
background-image: url("/images/pages/home/footer_background.png")
|
|
height: 229px
|
|
margin: -22px auto 0
|
|
color: white
|
|
|
|
@media (max-width: $screen-sm-min)
|
|
background-color: #201a15
|
|
background-image: none
|
|
height: auto
|
|
|
|
ul
|
|
margin: 30px
|
|
li:first-child
|
|
border-bottom: 1px solid white
|
|
margin-bottom: 10px
|
|
a
|
|
color: white
|
|
|
|
#final-footer
|
|
position: absolute
|
|
left: 0
|
|
right: 0
|
|
height: 60px
|
|
color: white
|
|
background-color: #463a2c
|
|
@media (max-width: $screen-sm-min)
|
|
position: inherit
|
|
padding: 20px
|
|
height: auto
|
|
|
|
a
|
|
color: white
|
|
|
|
img
|
|
width: 150px
|
|
margin: 0 10px
|
|
|
|
|
|
// modal-base-flat.jade
|
|
|
|
&.modal-content
|
|
padding: 10px
|
|
border-radius: 0
|
|
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5)
|
|
|
|
.button.close
|
|
position: absolute
|
|
top: 10px
|
|
left: 10px
|