codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-11-25 08:38:09 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
codecombat/app/styles/new-home-view.sass

319 lines
6.3 KiB
Sass
Raw Normal View History

Add new home page with test
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"
Add new home page with test
2016-01-26 19:28:29 -05:00
#new-home-view
Fix #3388 Overflow: hidden was cutting of info in the play view. Without it in the new home page, though, infinite banners would expand the size of the page. Tried figuring out a way to not make the new page require hiding overflow but found no obvious solution. Pages with infinite banners will just need to be set to overflow: hidden individually.
2016-02-22 14:12:19 -05:00
overflow: hidden
Add new home page with test
2016-01-26 19:28:29 -05:00
#jumbotron-container-fluid
background-image: url("/images/pages/home/character_jumbotron.png")
background-position: 50% 55%
@media (min-width : 1200px)
background-size: 100% auto
@media (max-width : 1200px)
background-size: 1200px auto
.container
background-repeat: no-repeat
.btn
margin: 10px 0
h1
color: white
@media (max-width: $screen-md-min)
Make new home page responsive
2016-02-09 15:07:19 -05:00
margin-top: 60px
Add new home page with test
2016-01-26 19:28:29 -05:00
font-size: 33px
line-height: 45px
.well
New home page tweaks
2016-02-03 13:59:54 -05:00
border: none
Add new home page with test
2016-01-26 19:28:29 -05:00
border-radius: 8px
background: rgba(255, 255, 255, 0.5)
Try to keep learn more above the fold.
2016-04-26 20:41:26 -04:00
margin-top: 10px
Add new home page with test
2016-01-26 19:28:29 -05:00
#classroom-edition-header
New home page tweaks
2016-02-03 13:59:54 -05:00
margin-top: 10px
New homepage variations.
2016-03-22 18:21:17 -04:00
#educator-header
white-space: nowrap
#students-header
line-height: 25px
margin-top: 40px
margin-bottom: -5px
Add new home page with test
2016-01-26 19:28:29 -05:00
#learn-to-code-header
margin-top: 80px
include iDeal offer for Dutch (nl) users
2016-03-14 11:39:16 -04:00
&#ideal-tickets-well
margin-top: 20px
New homepage variations.
2016-03-22 18:21:17 -04:00
.form-group
text-align: left
label
line-height: 14px
font-size: 12px
Make new home page responsive
2016-02-09 15:07:19 -05:00
@media (max-width: $screen-md-min)
margin-top: 320px
Add new home page with test
2016-01-26 19:28:29 -05:00
#learn-more-row
margin-top: 80px
Try to keep learn more above the fold.
2016-04-26 20:41:26 -04:00
@media (max-height: 700px)
margin-top: 10px
Add new home page with test
2016-01-26 19:28:29 -05:00
h2, h6
color: white
h6
margin-top: 10px
New home page tweaks
2016-02-03 13:59:54 -05:00
a:hover
text-decoration: none
Make new home page responsive
2016-02-09 15:07:19 -05:00
@media (max-width: $screen-md-min)
margin-top: 10px
Add new home page with test
2016-01-26 19:28:29 -05:00
&.alt-image
background-image: url("/images/pages/home/student_jumbotron.png")
background-position: 60% 35%
Make new home page responsive
2016-02-09 15:07:19 -05:00
.well
@media (max-width: $screen-md-min)
margin-top: 0px
Add new home page with test
2016-01-26 19:28:29 -05:00
.container h1
Try to keep learn more above the fold.
2016-04-26 20:41:26 -04:00
margin-top: 260px
Make new home page responsive
2016-02-09 15:07:19 -05:00
margin-bottom: 20px
Add new home page with test
2016-01-26 19:28:29 -05:00
@media (max-width: $screen-md-min)
Try to keep learn more above the fold.
2016-04-26 20:41:26 -04:00
margin-top: 60px
margin-bottom: 60px
Add new home page with test
2016-01-26 19:28:29 -05:00
@media (max-width: $screen-sm-min)
Try to keep learn more above the fold.
2016-04-26 20:41:26 -04:00
margin-top: 60px
Add new home page with test
2016-01-26 19:28:29 -05:00
#classroom-in-box-row
margin: 40px 0
Update request demo Ux Renaming request quote to request demo Changing create class wording to set up class Showing different UI if teacher or not Adding gameplay screenshots to homepage Update request demo email Closes #3449
2016-03-04 15:05:07 -05:00
.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
Add new home page with test
2016-01-26 19:28:29 -05:00
#feature-spread-row
.col-sm-4
padding: 40px
img
margin-bottom: 20px
.testimonials-rows
background: $navy
color: white
position: relative
padding: 60px 0 40px
margin: 100px 0
h3, h6
color: white
.testimonials-filler-left
position: absolute
width: 2000px
left: -2000px
top: 0px
background: $navy
height: 100%
.testimonials-filler-right
position: absolute
width: 2000px
right: -2000px
top: 0px
background: $navy
height: 100%
img
margin: 0 auto 10px
.row
margin: 20px 0
#benefit-row-1, #benefit-row-2, #benefit-row-3
margin: 50px 0
#benefit-graphic-1, #benefit-graphic-2, #benefit-graphic-3
padding: 30px 40px
position: relative
min-height: 250px
Make new home page responsive
2016-02-09 15:07:19 -05:00
margin-bottom: 20px
Add new home page with test
2016-01-26 19:28:29 -05:00
h2
color: white
width: 50%
#benefit-graphic-1
background: $burgandy
img
position: absolute
right: 0
bottom: 0
#benefit-graphic-1-filler
background: $burgandy
height: 100%
width: 2000px
position: absolute
left: 100%
top: 0
#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
#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
Update request demo Ux Renaming request quote to request demo Changing create class wording to set up class Showing different UI if teacher or not Adding gameplay screenshots to homepage Update request demo email Closes #3449
2016-03-04 15:05:07 -05:00
.have-an-account
font-size: 10pt
Add new home page with test
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
New home page tweaks
2016-02-03 13:59:54 -05:00
.request-demo-row
Add new home page with test
2016-01-26 19:28:29 -05:00
margin: 100px 0
.btn
margin: 20px 10px
New home page tweaks
2016-02-03 13:59:54 -05:00
#total-hours-header
margin-top: 10px
Make new home page responsive
2016-02-09 15:07:19 -05:00
#courses-row
Add new home page with test
2016-01-26 19:28:29 -05:00
.media
width: 222px
Make new home page responsive
2016-02-09 15:07:19 -05:00
margin: 20px auto 0
border: 1px solid $navy
Add new home page with test
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
.text-center
width: 100%
margin-top: 30px
img
Make new home page responsive
2016-02-09 15:07:19 -05:00
margin-bottom: 20px
Add new home page with test
2016-01-26 19:28:29 -05:00
Reference in a new issue Copy permalink