codecombat/app/styles/home-view.sass

328 lines
6.6 KiB
Sass
Raw Normal View History

2016-01-26 19:28:29 -05: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"
2016-01-26 19:28:29 -05:00
2016-09-01 13:41:00 -04:00
#home-view
overflow: hidden
2016-01-26 19:28:29 -05:00
#jumbotron-container-fluid
background-image: url("/images/pages/home/character_jumbotron.png")
background-position: 50% 55%
2016-01-26 19:28:29 -05:00
@media (min-width : 1200px)
background-size: 100% auto
2016-01-26 19:28:29 -05:00
@media (max-width : 1200px)
background-size: 1200px auto
2016-01-26 19:28:29 -05:00
.container
background-repeat: no-repeat
2016-01-26 19:28:29 -05:00
.btn
margin: 10px 0
.play-btn
background: #f0ac00
// background-image: -webkit-linear-gradient(top, #f2bf19, #e69200)
// background-image: -moz-linear-gradient(top, #f2bf19, #e69200)
// background-image: -ms-linear-gradient(top, #f2bf19, #e69200)
// background-image: -o-linear-gradient(top, #f2bf19, #e69200)
// background-image: linear-gradient(to bottom, #f2bf19, #e69200)
// border: 1px solid #f2bf19
// box-shadow: 0px 0px 5px #ffffff
2016-01-26 19:28:29 -05:00
h1
color: white
@media (max-width: $screen-md-min)
2016-02-09 15:07:19 -05:00
margin-top: 60px
2016-01-26 19:28:29 -05:00
font-size: 33px
line-height: 45px
2016-01-26 19:28:29 -05:00
.well
2016-02-03 13:59:54 -05:00
border: none
2016-01-26 19:28:29 -05:00
border-radius: 8px
background: rgba(255, 255, 255, 0.5)
2016-04-26 20:41:26 -04:00
margin-top: 10px
2016-01-26 19:28:29 -05:00
#classroom-edition-header
2016-02-03 13:59:54 -05:00
margin-top: 10px
2016-03-22 18:21:17 -04:00
#educator-header
white-space: nowrap
#students-header
line-height: 25px
margin-top: 40px
margin-bottom: -5px
2016-01-26 19:28:29 -05:00
#learn-to-code-header
margin-top: 80px
&#ideal-tickets-well
margin-top: 20px
2016-03-22 18:21:17 -04:00
.form-group
text-align: left
label
line-height: 14px
font-size: 12px
2016-02-09 15:07:19 -05:00
@media (max-width: $screen-md-min)
margin-top: 320px
2016-01-26 19:28:29 -05:00
#learn-more-row
margin-top: 80px
2016-04-26 20:41:26 -04:00
@media (max-height: 700px)
margin-top: 10px
2016-01-26 19:28:29 -05:00
h2, h6
color: white
h6
margin-top: 10px
2016-02-03 13:59:54 -05:00
a:hover
text-decoration: none
2016-02-09 15:07:19 -05:00
@media (max-width: $screen-md-min)
margin-top: 10px
2016-01-26 19:28:29 -05:00
&.alt-image
2016-07-07 14:28:02 -04:00
background-image: url("/images/pages/home/student_jumbotron.jpg")
2016-01-26 19:28:29 -05:00
background-position: 60% 35%
2016-02-09 15:07:19 -05:00
.well
@media (max-width: $screen-md-min)
margin-top: 0px
2016-01-26 19:28:29 -05:00
.container h1
2016-04-26 20:41:26 -04:00
margin-top: 260px
2016-02-09 15:07:19 -05:00
margin-bottom: 20px
2016-01-26 19:28:29 -05:00
@media (max-width: $screen-md-min)
2016-04-26 20:41:26 -04:00
margin-top: 60px
margin-bottom: 60px
2016-01-26 19:28:29 -05:00
@media (max-width: $screen-sm-min)
2016-04-26 20:41:26 -04:00
margin-top: 60px
2016-01-26 19:28:29 -05:00
#classroom-in-box-row
margin: 40px 0
.top-screenshots
margin-bottom: 100px
margin-top: 50px
.label
color: black
display: block
.screenshots
text-align: center
.screenshot-grid
img
display: inline-block
margin: 6.5px
width: 800px
border-radius: 8px
.teacher-screenshots
padding: 10px
.label
color: black
display: block
.screenshots
text-align: center
.screenshot-grid
img
display: inline-block
margin: 6.5px
width: 300px
border-radius: 4px
#screenshot-lightbox
.modal-dialog
width: auto
max-width: 1024px
2016-01-26 19:28:29 -05:00
#feature-spread-row
.col-sm-4
padding: 40px
2016-01-26 19:28:29 -05:00
img
margin-bottom: 20px
2016-01-26 19:28:29 -05:00
.testimonials-rows
background: $navy
color: white
position: relative
padding: 60px 0 40px
margin: 100px 0
2016-01-26 19:28:29 -05:00
h3, h6
color: white
2016-01-26 19:28:29 -05:00
.testimonials-filler-left
position: absolute
width: 2000px
left: -2000px
top: 0px
background: $navy
height: 100%
2016-01-26 19:28:29 -05:00
.testimonials-filler-right
position: absolute
width: 2000px
right: -2000px
top: 0px
background: $navy
height: 100%
2016-01-26 19:28:29 -05:00
img
margin: 0 auto 10px
2016-01-26 19:28:29 -05:00
.row
margin: 20px 0
2016-01-26 19:28:29 -05:00
#benefit-row-1, #benefit-row-2, #benefit-row-3
margin: 50px 0
2016-01-26 19:28:29 -05:00
#benefit-graphic-1, #benefit-graphic-2, #benefit-graphic-3
padding: 30px 40px
position: relative
min-height: 250px
2016-02-09 15:07:19 -05:00
margin-bottom: 20px
2016-01-26 19:28:29 -05:00
h2
color: white
width: 50%
#benefit-graphic-1
background: $burgandy
2016-01-26 19:28:29 -05:00
img
position: absolute
right: 0
bottom: 0
2016-01-26 19:28:29 -05:00
#benefit-graphic-1-filler
background: $burgandy
height: 100%
width: 2000px
position: absolute
left: 100%
top: 0
2016-01-26 19:28:29 -05:00
#benefit-graphic-2
background: $navy
h2
float: right
img
position: absolute
left: 0
bottom: 0
#benefit-graphic-2-filler
background: $navy
height: 100%
width: 2000px
position: absolute
right: 100%
top: 0
2016-01-26 19:28:29 -05:00
#benefit-graphic-3
background: $forest
img
position: absolute
right: 0
bottom: 0
#benefit-graphic-3-filler
background: $forest
height: 100%
width: 2000px
position: absolute
left: 100%
top: 0
.have-an-account
font-size: 10pt
2016-01-26 19:28:29 -05:00
#school-level-label
margin: 15px 15px 0 0
display: inline-block
#school-level-dropdown
display: inline-block
width: 250px
2016-02-03 13:59:54 -05:00
.request-demo-row
2016-01-26 19:28:29 -05:00
margin: 100px 0
.btn
margin: 20px 10px
2016-02-03 13:59:54 -05:00
#total-hours-header
margin-top: 10px
2016-02-09 15:07:19 -05:00
#courses-row
2016-01-26 19:28:29 -05:00
.media
width: 222px
2016-02-09 15:07:19 -05:00
margin: 20px auto 0
border: 1px solid $navy
2016-01-26 19:28:29 -05:00
border-radius: 8px
padding: 50px 15px 0
text-align: center
position: relative
height: 350px
color: $navy
&:first-child
border-color: $forest
color: $forest
h6
color: $forest
&.disabled
$disabled-color: rgb(155, 155, 155)
border-color: $disabled-color
color: $disabled-color
h6
color: $disabled-color
.media-object
@include filter(grayscale(100%))
h6
padding: 0 5px
color: $navy
.media-object
width: 147px
height: 147px
border-radius: 74px
background-position: -30px -26px
background-repeat: no-repeat
background-size: 312px auto
margin: 15px auto
position: absolute
left: 38px
left: calc((100% - 147px) / 2)
bottom: 50px
.course-duration
position: absolute
bottom: 25px
width: 192px
width: calc(100% - 30px)
padding: 0
.free-course
background-color: $forest
width: 100%
height: 33px
position: absolute
top: 0
left: 0px
border-top-left-radius: 7px
border-top-right-radius: 7px
h6
margin-top: 6px
color: white
2016-01-26 19:28:29 -05:00
.text-center
width: 100%
margin-top: 30px
img
2016-02-09 15:07:19 -05:00
margin-bottom: 20px