codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-05-02 17:03:42 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make new home page responsive

Browse source
This commit is contained in:
Scott Erickson 2016-02-09 12:07:19 -08:00
parent cb29d7068b
commit c8551a6382
3 changed files with 137 additions and 107 deletions

46
app/styles/new-home-view.sass
View file

@ -88,22 +88,23 @@ $forest: #20572B
.navbar .navbar
background: white background: white
margin-bottom: 0 margin-bottom: 0
white-space: nowrap // prevent home icon from going under brand
a.navbar-brand a.navbar-brand
#logo-img #logo-img
width: 210px width: 230px
height: 65px height: 65px
margin-right: 10px margin-right: 10px
.glyphicon-home
position: relative
top: 4px
color: $burgandy color: $burgandy
&:hover &:hover
color: white color: white
background: $burgandy background: $burgandy
.glyphicon-home
position: relative
top: 3px
.navbar-toggle .navbar-toggle
color: black color: black
margin: 30px 25px 0 margin: 30px 25px 0
@ -123,12 +124,8 @@ $forest: #20572B
#language-dropdown-wrapper #language-dropdown-wrapper
display: inline-block display: inline-block
padding: 30px 20px padding: 30px 10px
.language-dropdown width: 100%
width: 200px
.language-dropdown
width: 250px
@media (max-width: $screen-sm-min) @media (max-width: $screen-sm-min)
.nav > li > a .nav > li > a
@ -189,7 +186,6 @@ $forest: #20572B
.btn-lg .btn-lg
font-size: 18px font-size: 18px
padding: 13px 35px
// Classes // Classes
@ -218,7 +214,7 @@ $forest: #20572B
background-size: 1200px auto background-size: 1200px auto
.container .container
min-height: 750px min-height: 720px
background-repeat: no-repeat background-repeat: no-repeat
.btn .btn
@ -228,7 +224,7 @@ $forest: #20572B
color: white color: white
margin-top: 130px margin-top: 130px
@media (max-width: $screen-md-min) @media (max-width: $screen-md-min)
margin-top: 170px margin-top: 60px
font-size: 33px font-size: 33px
line-height: 45px line-height: 45px
@ -241,6 +237,8 @@ $forest: #20572B
margin-top: 10px margin-top: 10px
#learn-to-code-header #learn-to-code-header
margin-top: 80px margin-top: 80px
@media (max-width: $screen-md-min)
margin-top: 320px
#learn-more-row #learn-more-row
margin-top: 80px margin-top: 80px
@ -250,13 +248,20 @@ $forest: #20572B
margin-top: 10px margin-top: 10px
a:hover a:hover
text-decoration: none text-decoration: none
@media (max-width: $screen-md-min)
margin-top: 10px
&.alt-image &.alt-image
background-image: url("/images/pages/home/student_jumbotron.png") background-image: url("/images/pages/home/student_jumbotron.png")
background-position: 60% 35% background-position: 60% 35%
.well
@media (max-width: $screen-md-min)
margin-top: 0px
.container h1 .container h1
margin-top: 420px margin-top: 420px
margin-bottom: 20px
@media (max-width: $screen-md-min) @media (max-width: $screen-md-min)
margin-top: 380px margin-top: 380px
@media (max-width: $screen-sm-min) @media (max-width: $screen-sm-min)
@ -311,6 +316,7 @@ $forest: #20572B
padding: 30px 40px padding: 30px 40px
position: relative position: relative
min-height: 250px min-height: 250px
margin-bottom: 20px
h2 h2
color: white color: white
@ -385,15 +391,11 @@ $forest: #20572B
#total-hours-header #total-hours-header
margin-top: 10px margin-top: 10px
#courses-container #courses-row
display: flex
flex-wrap: wrap
justify-content: space-between
.media .media
width: 222px width: 222px
margin: 20px 0 0 0 margin: 20px auto 0
border: 1px solid navy border: 1px solid $navy
border-radius: 8px border-radius: 8px
padding: 50px 15px 0 padding: 50px 15px 0
text-align: center text-align: center
@ -458,7 +460,7 @@ $forest: #20572B
width: 100% width: 100%
margin-top: 30px margin-top: 30px
img img
margin-right: 20px margin-bottom: 20px
#footer #footer
background-image: url("/images/pages/home/footer_background.png") background-image: url("/images/pages/home/footer_background.png")

195
app/templates/new-home-view.jade
View file

@ -1,77 +1,95 @@
.container-fluid.text-center .container-fluid.text-center
.alert.alert-danger.lt-ie9 .alert.alert-danger.lt-ie9
strong(data-i18n="home.no_ie") CodeCombat does not run in Internet Explorer 8 or older. Sorry! strong(data-i18n="home.no_ie") The CodeCombat game does not run in Internet Explorer 8 or older. Sorry!
if view.isIPadBrowser() || view.isMobile() if view.isIPadBrowser() || view.isMobile()
.alert.alert-danger.mobile .alert.alert-danger.mobile
strong(data-i18n="home.no_mobile") CodeCombat wasn't designed for mobile devices and may not work! strong(data-i18n="home.no_mobile") CodeCombat gameplay was not designed for mobile devices and may not work!
else if view.isOldBrowser() else if view.isOldBrowser()
.alert.alert-danger.old-browser .alert.alert-danger.old-browser
strong(data-i18n="home.old_browser") Uh oh, your browser is too old to run CodeCombat. Sorry! strong(data-i18n="home.old_browser") Uh oh, your browser is too old to play CodeCombat. Sorry!
br br
span(data-i18n="home.old_browser_suffix") You can try anyway, but it probably won't work. span(data-i18n="home.old_browser_suffix") You can try anyway, but it probably won't work.
nav.navbar.navbar-default nav.navbar.navbar-default
.container-fluid .container
.navbar-header .row
button.navbar-toggle.collapsed(data-toggle='collapse', data-target='#navbar-collapse' aria-expanded='false') .col-md-3.col-sm-4
span.sr-only Toggle navigation .navbar-header
span.icon-bar button.navbar-toggle.collapsed(data-toggle='collapse', data-target='#navbar-collapse' aria-expanded='false')
span.icon-bar span.sr-only Toggle navigation
span.icon-bar span.icon-bar
a.navbar-brand(href="/") span.icon-bar
img#logo-img(src="/images/pages/base/logo.png") span.icon-bar
span.glyphicon.glyphicon-home a.navbar-brand(href="/")
img#logo-img(src="/images/pages/base/logo.png")
#navbar-collapse.collapse.navbar-collapse span.glyphicon.glyphicon-home
ul.nav.navbar-nav
li .col-md-9.col-sm-8
a(href="/about") About #navbar-collapse.collapse.navbar-collapse
li ul.nav.navbar-nav.pull-left
a(href="/courses") Courses li
li a(href="/about") About
a(href="/courses/teachers") Teachers li
li a(href="/courses") Courses
a(href="https://discourse.codecombat.com/") Forum li
if me.isAnonymous() a(href="/courses/teachers") Teachers
li li
a#create-account-link.signup-button Create Account a(href="https://discourse.codecombat.com/") Forum
li if me.isAnonymous()
a#login-link.login-button Login
else
li.dropdown
a.dropdown-toggle(href="#", data-toggle="dropdown" role="button" aroa-haspopup="true" aria-expanded="false")
span.spr My Account
ul.dropdown-menu
li.user-dropdown-header.text-center
span.user-level= me.level()
a(href="/user/#{me.getSlugOrID()}")
img.img-circle(src=me.getPhotoURL())
h5=me.displayName()
li li
a(href="/user/#{me.getSlugOrID()}" data-i18n="nav.profile") a#create-account-link.signup-button Create Account
li li
a(href="/account/settings", data-i18n="play.settings") a#login-link.login-button Login
li else
a(href="/account/payments", data-i18n="account.payments") li.dropdown
li a.dropdown-toggle(href="#", data-toggle="dropdown" role="button" aroa-haspopup="true" aria-expanded="false")
a(href="/account/subscription", data-i18n="account.subscription") span.spr My Account
li ul.dropdown-menu
a(href="/account/prepaid", data-i18n="account.prepaid_codes") Prepaid Codes li.user-dropdown-header.text-center
li span.user-level= me.level()
a#logout-button(data-i18n="login.log_out") a(href="/user/#{me.getSlugOrID()}")
img.img-circle(src=me.getPhotoURL())
#language-dropdown-wrapper.pull-right.hidden-xs.hidden-sm h5=me.displayName()
select.language-dropdown.form-control li
a(href="/user/#{me.getSlugOrID()}" data-i18n="nav.profile")
li
a(href="/account/settings", data-i18n="play.settings")
li
a(href="/account/payments", data-i18n="account.payments")
li
a(href="/account/subscription", data-i18n="account.subscription")
li
a(href="/account/prepaid", data-i18n="account.prepaid_codes") Prepaid Codes
li
a#logout-button(data-i18n="login.log_out")
li
#language-dropdown-wrapper
select.language-dropdown.form-control
.container-fluid#jumbotron-container-fluid(class=view.jumbotron === 'student' ? 'alt-image' : '') .container-fluid#jumbotron-container-fluid(class=view.jumbotron === 'student' ? 'alt-image' : '')
.container .container
.row .row
.col-lg-7.col-md-8.col-sm-8.col-xs-6 .col-lg-7.col-md-8
h1 The most engaging game for learning programming. h1 The most engaging game for learning programming.
.col-lg-3.col-lg-offset-2.col-md-4.col-sm-4.col-xs-6 .col-lg-3.col-lg-offset-2.col-md-4
.well.text-center .well.text-center.hidden-md.hidden-lg
.row
.col-xs-8
h6 Classroom Edition:
.col-xs-4
h6 Learn to code:
.row
.col-xs-4
button#teacher-btn.btn.btn-primary.btn-lg.btn-block Teacher
.col-xs-4
a.btn.btn-forest.btn-lg.btn-block(href="/courses") Student
.col-xs-4
a.btn.btn-gold.btn-lg.btn-block(href=view.playURL) Play Now
.well.text-center.hidden-xs.hidden-sm
h6#classroom-edition-header Classroom Edition: h6#classroom-edition-header Classroom Edition:
div div
button#teacher-btn.btn.btn-primary.btn-lg.btn-block I'm a Teacher button#teacher-btn.btn.btn-primary.btn-lg.btn-block I'm a Teacher
@ -136,19 +154,25 @@ nav.navbar.navbar-default
.small Director of Technology, Tilton School .small Director of Technology, Tilton School
.row .row
.col-lg-2.col-sm-3.col-lg-offset-1.text-center .col-lg-7.col-sm-8.col-sm-push-4.col-lg-push-3
blockquote
h3 Coding is something I've always wanted to do, and I never thought I would be able to learn it in school.
.col-lg-2.col-sm-3.col-lg-offset-1.text-center.col-sm-pull-8.col-lg-pull-7
img.img-circle(src="/images/pages/home/dylan.png") img.img-circle(src="/images/pages/home/dylan.png")
h6 Dylan h6 Dylan
.small 3rd Grader .small 3rd Grader
.col-lg-7.col-sm-8
blockquote
h3 Coding is something I've always wanted to do, and I never thought I would be able to learn it in school.
h3.text-center Why is learning through games important? h3.text-center Why is learning through games important?
#benefit-row-1.row #benefit-row-1.row
.col-sm-5 #benefit-graphic-1.col-sm-6.col-sm-offset-1.col-sm-push-6
h2 Games reward the productive struggle.
img(src="/images/pages/home/G1_reward.png")
#benefit-graphic-1-filler
.col-sm-5.col-sm-pull-6
p p
| Gaming is a medium that encourages interaction, discovery, and trial-and-error. | Gaming is a medium that encourages interaction, discovery, and trial-and-error.
| A good game challenges the player to master skills over time, | A good game challenges the player to master skills over time,
@ -160,13 +184,10 @@ nav.navbar.navbar-default
a(href="http://www.gamesandlearning.org/2014/06/09/teachers-on-using-games-in-class/" target="_blank") motivating a(href="http://www.gamesandlearning.org/2014/06/09/teachers-on-using-games-in-class/" target="_blank") motivating
| , not tedious. | , not tedious.
.col-sm-6.col-sm-offset-1#benefit-graphic-1
h2 Games reward the productive struggle.
img(src="/images/pages/home/G1_reward.png")
#benefit-graphic-1-filler
#benefit-row-2.row #benefit-row-2.row
.col-sm-6#benefit-graphic-2 #benefit-graphic-2.col-sm-6
h2 Studies suggest gaming is good for children’s brains. (it’s true!) h2 Studies suggest gaming is good for children’s brains. (it’s true!)
img(src="/images/pages/home/G2_brains.png") img(src="/images/pages/home/G2_brains.png")
#benefit-graphic-2-filler #benefit-graphic-2-filler
@ -182,16 +203,17 @@ nav.navbar.navbar-default
| Games also provide real-time feedback that allows students to adjust their solution path and understand concepts more holistically, instead of being limited to just “correct” or “incorrect” answers. | Games also provide real-time feedback that allows students to adjust their solution path and understand concepts more holistically, instead of being limited to just “correct” or “incorrect” answers.
#benefit-row-3.row #benefit-row-3.row
.col-sm-5 #benefit-graphic-3.col-sm-6.col-sm-offset-1.col-sm-push-6
h2 A real game, played with real coding.
img(src="/images/pages/home/G3_game.png")
#benefit-graphic-3-filler
.col-sm-5.col-sm-pull-6
p p
| A great game is more than just badges and achievements - it’s about a player’s journey, well-designed puzzles, and the ability to tackle challenges with agency and confidence. | A great game is more than just badges and achievements - it’s about a player’s journey, well-designed puzzles, and the ability to tackle challenges with agency and confidence.
p p
| CodeCombat is a game that gives players that agency and confidence with our robust typed code engine, which helps beginner and advanced students alike write proper, valid code. | CodeCombat is a game that gives players that agency and confidence with our robust typed code engine, which helps beginner and advanced students alike write proper, valid code.
.col-sm-6.col-sm-offset-1#benefit-graphic-3
h2 A real game, played with real coding.
img(src="/images/pages/home/G3_game.png")
#benefit-graphic-3-filler
.request-demo-row.text-center .request-demo-row.text-center
h3 Curious? Request a demo and we'll show you the ropes h3 Curious? Request a demo and we'll show you the ropes
@ -219,7 +241,7 @@ nav.navbar.navbar-default
h5.text-center#total-hours-header h5.text-center#total-hours-header
span.spr Total curriculum hours: span.spr Total curriculum hours:
span#semester-duration span#semester-duration
#courses-container #courses-row.row
- var conceptsSeen = {}; - var conceptsSeen = {};
- var lastScreenshot = ""; - var lastScreenshot = "";
for course, courseIndex in view.courses.models for course, courseIndex in view.courses.models
@ -231,13 +253,19 @@ nav.navbar.navbar-default
.media-body(title=course.get('description')) .media-body(title=course.get('description'))
h6.course-name= course.get('name') + ':' h6.course-name= course.get('name') + ':'
p.small p.small
- var pastFirstConcept = false; - var total = 0;
each concept in course.get('concepts') each concept in course.get('concepts')
- if (conceptsSeen[concept]) continue; - if (conceptsSeen[concept]) continue;
- conceptsSeen[concept] = true; - conceptsSeen[concept] = true;
if pastFirstConcept if total === 3
- total += 1;
span ...
- continue;
else if total > 3
- continue;
else if total > 0
span.spr , span.spr ,
- pastFirstConcept = true; - total += 1;
span(data-i18n="concepts." + concept) span(data-i18n="concepts." + concept)
img.media-object(src="/images/pages/home/course"+(courseIndex+1)+".png") img.media-object(src="/images/pages/home/course"+(courseIndex+1)+".png")
- lastScreenshot = course.get('screenshot'); - lastScreenshot = course.get('screenshot');
@ -252,15 +280,12 @@ nav.navbar.navbar-default
h6.course-name= upcomingCourse + ':' h6.course-name= upcomingCourse + ':'
p.small Coming soon! p.small Coming soon!
img.media-object(src="/images/pages/home/inprogress.png") img.media-object(src="/images/pages/home/inprogress.png")
h6.course-duration
span.spr Lesson time:
span.course-hours 5
span.spl(data-i18n="units.hours")
.clearfix
.text-center .text-center
h4 h4
img(src="/images/pages/home/course_languages.png") img(src="/images/pages/home/course_languages.png")
| Courses are available in JavaScript, Python, and Java (coming soon!) div Courses are available in JavaScript, Python, and Java (coming soon!)
.testimonials-rows .testimonials-rows
.testimonials-filler-left .testimonials-filler-left
@ -276,14 +301,14 @@ nav.navbar.navbar-default
.small opensource.com .small opensource.com
.row .row
.col-lg-2.col-sm-3.col-lg-offset-1.text-center .col-lg-7.col-sm-8.col-sm-push-4.col-lg-push-3
blockquote
h3 A winning combination of RPG gameplay and programming homework that pulls off making kid-friendly education legitimately enjoyable.
.col-lg-2.col-sm-3.col-lg-offset-1.text-center.col-sm-pull-8.col-lg-pull-7
img.img-circle(src="/images/pages/home/pcmag.png") img.img-circle(src="/images/pages/home/pcmag.png")
h6 PC Mag h6 PC Mag
.small pcmag.com .small pcmag.com
.col-lg-7.col-sm-8
blockquote
h3 A winning combination of RPG gameplay and programming homework that pulls off making kid-friendly education legitimately enjoyable.
.request-demo-row.text-center .request-demo-row.text-center
@ -354,7 +379,9 @@ nav.navbar.navbar-default
#final-footer.small.text-center #final-footer.small.text-center
| Copyright ©2016 CodeCombat. All Rights Reserved. | Copyright ©2016 CodeCombat. All Rights Reserved.
br.hidden-lg.hidden-md
img(src="/images/pages/base/logo.png" alt="CodeCombat") img(src="/images/pages/base/logo.png" alt="CodeCombat")
br.hidden-lg.hidden-md
span.spr Need help? Email span.spr Need help? Email
a(href="mailto:team@codecombat.com") team@codecombat.com a(href="mailto:team@codecombat.com") team@codecombat.com
span.spl and we'll get in touch! span.spl and we'll get in touch!

3
app/views/NewHomeView.coffee
View file

@ -2,6 +2,7 @@ RootView = require 'views/core/RootView'
template = require 'templates/new-home-view' template = require 'templates/new-home-view'
CocoCollection = require 'collections/CocoCollection' CocoCollection = require 'collections/CocoCollection'
Course = require 'models/Course' Course = require 'models/Course'
utils = require 'core/utils'
# TODO: auto margin feature paragraphs # TODO: auto margin feature paragraphs
@ -17,7 +18,7 @@ module.exports = class NewHomeView extends RootView
'click #learn-more-link': 'onClickLearnMoreLink' 'click #learn-more-link': 'onClickLearnMoreLink'
initialize: (options) -> initialize: (options) ->
@jumbotron = options.jumbotron or 'student' # or 'characters' @jumbotron = options.jumbotron or utils.getQueryVariable('jumbotron') or 'student' # or 'characters'
@courses = new CocoCollection [], {url: "/db/course", model: Course} @courses = new CocoCollection [], {url: "/db/course", model: Course}
@supermodel.loadCollection(@courses, 'courses') @supermodel.loadCollection(@courses, 'courses')