mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-26 00:58:00 -05:00
Restyle signup/login modal for employer page
This commit is contained in:
Michael Schmatz
parent
fd532145c1
commit
cbd6cacd61
6 changed files with 64 additions and 26 deletions
|
|
@ -18,4 +18,38 @@
|
|||
|
||||
|
||||
#employer-content-area
|
||||
margin: auto
|
||||
margin: auto
|
||||
|
||||
.employer-modal-background-wrapper
|
||||
background-color: white
|
||||
border: 2px #333333 solid
|
||||
border-radius: 4px
|
||||
h1, h2, h3, h4, h5
|
||||
color: black
|
||||
font-family: Arial, Helvetica, sans-serif
|
||||
.input-large
|
||||
font-size: 28px
|
||||
height: 60px
|
||||
border: 2px rgb(231,231,231) solid
|
||||
box-shadow: none
|
||||
width: 70%
|
||||
margin-left: 15%
|
||||
#create-account-button, #contract-agreement-button, #login-button
|
||||
background: #fce232 /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #fce232 0%, #ea8e2b 100%)
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fce232), color-stop(100%,#ea8e2b))
|
||||
background: -webkit-linear-gradient(top, #fce232 0%,#ea8e2b 100%)
|
||||
background: -o-linear-gradient(top, #fce232 0%,#ea8e2b 100%)
|
||||
background: -ms-linear-gradient(top, #fce232 0%,#ea8e2b 100%)
|
||||
background: linear-gradient(to bottom, #fce232 0%,#ea8e2b 100%)
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce232', endColorstr='#ea8e2b',GradientType=0 )
|
||||
height: 60px
|
||||
font-size: 24px
|
||||
color: black
|
||||
.login-link
|
||||
text-decoration: underline
|
||||
#login-button
|
||||
margin-left: 40%
|
||||
width: 20%
|
||||
|
||||
|
||||
|
|
@ -19,12 +19,19 @@ block modal-body-content
|
|||
p(data-i18n="signup.description") It's free. Just need a couple things and you'll be good to go:
|
||||
|
||||
form.form
|
||||
.form-group
|
||||
label.control-label(for="email", data-i18n="general.email") Email
|
||||
input#email.input-large.form-control(name="email", type="email", value=formValues.email)
|
||||
.form-group
|
||||
label.control-label(for="password", data-i18n="general.password") Password
|
||||
input#password.input-large.form-control(name="password", type="password", value=formValues.password)
|
||||
if onEmployersPage
|
||||
.form-group
|
||||
input#email.input-large.form-control(name="email", type="email", value=formValues.email, placeholder="Email")
|
||||
.form-group
|
||||
input#password.input-large.form-control(name="password", type="password", value=formValues.password, placeholder="Password")
|
||||
|
||||
else
|
||||
.form-group
|
||||
label.control-label(for="email", data-i18n="general.email") Email
|
||||
input#email.input-large.form-control(name="email", type="email", value=formValues.email)
|
||||
.form-group
|
||||
label.control-label(for="password", data-i18n="general.password") Password
|
||||
input#password.input-large.form-control(name="password", type="password", value=formValues.password)
|
||||
|
||||
if mode === 'signup'
|
||||
.form-group.checkbox
|
||||
|
|
@ -38,8 +45,11 @@ block modal-body-content
|
|||
a(href="https://en.wikipedia.org/wiki/Children's_Online_Privacy_Protection_Act", data-i18n="signup.coppa_why", target="_blank") (Why?)
|
||||
|
||||
if mode === 'login'
|
||||
input.btn.btn-info.btn-large#login-button(value=translate("login.log_in"), type="submit")
|
||||
.btn.btn-default.btn-large#switch-to-signup-button(data-i18n="login.sign_up") Create Account
|
||||
if onEmployersPage
|
||||
input.btn.btn-info.btn-large#login-button(value=translate("login.log_in"), type="submit")
|
||||
else
|
||||
input.btn.btn-info.btn-large#login-button(value=translate("login.log_in"), type="submit")
|
||||
.btn.btn-default.btn-large#switch-to-signup-button(data-i18n="login.sign_up") Create Account
|
||||
if mode === 'signup'
|
||||
input.btn.btn-info.btn-large#signup-button(value=translate("signup.sign_up"), type="submit")
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ extends /templates/modal/modal_base
|
|||
|
||||
block modal-header-content
|
||||
if userIsAnonymous || !userIsAuthorized
|
||||
h3(data-i18n="employer_signup.title") Sign up to hire CodeCombat players!
|
||||
h3(data-i18n="employer_signup.title") Sign Up to Hire CodeCombat Players
|
||||
else
|
||||
h3 CodeCombat Placement Agreement
|
||||
|
||||
|
|
@ -13,28 +13,17 @@ block modal-body-content
|
|||
else if sentMoreInfoEmail
|
||||
| Thanks! You should receive an email from George shortly.
|
||||
else
|
||||
h4(data-i18n="employer_signup.sub_heading") Let us find your next brilliant developers.
|
||||
p Create an account to get started!
|
||||
.form#signup-form
|
||||
.form-group
|
||||
label.control-label(for="signup-email", data-i18n="general.email") Email
|
||||
input#signup-email.form-control.input-large(name="email",type="email")
|
||||
.form-group
|
||||
label.control-label(for="signup-password", data-i18n="general.password") Password
|
||||
input#signup-password.input-large.form-control(name="password", type="password")
|
||||
input#signup-email.form-control.input-large(name="email",type="email" placeholder="Email")
|
||||
.form-group
|
||||
input#signup-password.input-large.form-control(name="password", type="password" placeholder="Password")
|
||||
.modal-footer.linkedin
|
||||
button.btn.btn-primary(id="create-account-button") Create Account
|
||||
br
|
||||
br
|
||||
| Already have a CodeCombat account?
|
||||
a.login-link(data-toggle="coco-modal", data-target="modal/auth") Log in to continue!
|
||||
h4 Want more information first?
|
||||
p Enter your email and George, our CEO, will contact you shortly.
|
||||
.form
|
||||
.form-group
|
||||
label.control-label(for="more-info-email", data-i18n="general.email") Email
|
||||
input#more-info-email.form-control.input-large(name="more-info-email",type="email")
|
||||
button.btn.btn-primary(id="more-info-button") Send me more information!
|
||||
else if !userIsAuthorized
|
||||
.modal-footer.linkedin
|
||||
p Please sign into your LinkedIn account to verify your identity.
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ module.exports = class EmployersView extends View
|
|||
# $('.nano').nanoScroller({scrollTo: $(window.location.hash)})
|
||||
|
||||
checkForEmployerSignupHash: =>
|
||||
if window.location.hash is '#employerSignupLoggingIn' and not ('employer' in me.get('permissions'))
|
||||
if window.location.hash is '#employerSignupLoggingIn' and not ('employer' in me.get('permissions')) and not me.isAdmin()
|
||||
@openModalView application.router.getView('modal/employer_signup', '_modal')
|
||||
window.location.hash = ''
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@ module.exports = class ModalView extends CocoView
|
|||
|
||||
afterRender: ->
|
||||
super()
|
||||
if Backbone.history.fragment is "employers"
|
||||
$(@$el).find(".background-wrapper").each ->
|
||||
$(this).addClass("employer-modal-background-wrapper").removeClass("background-wrapper")
|
||||
|
||||
if @modalWidthPercent
|
||||
@$el.find('.modal-dialog').css width: "#{@modalWidthPercent}%"
|
||||
@$el.on 'hide.bs.modal', =>
|
||||
|
|
|
|||
|
|
@ -30,8 +30,9 @@ module.exports = class AuthModalView extends View
|
|||
application.tracker.trackEvent 'Started Signup', authModalTitle: c.title, descriptionOn: c.descriptionOn
|
||||
c.mode = @mode
|
||||
c.formValues = @previousFormInputs or {}
|
||||
c.onEmployersPage = Backbone.history.fragment is "employers"
|
||||
c
|
||||
|
||||
|
||||
afterInsert: ->
|
||||
super()
|
||||
_.delay application.router.renderLoginButtons, 500
|
||||
|
|
|
|||
Loading…
Reference in a new issue