From cbd6cacd61e64ab522863cee5e02b9d6680d66a7 Mon Sep 17 00:00:00 2001 From: Michael Schmatz Date: Mon, 7 Jul 2014 22:50:14 -0700 Subject: [PATCH] Restyle signup/login modal for employer page --- app/styles/recruitment_base.sass | 36 ++++++++++++++++++- app/templates/modal/auth.jade | 26 +++++++++----- .../modal/employer_signup_modal.jade | 19 +++------- app/views/employers_view.coffee | 2 +- app/views/kinds/ModalView.coffee | 4 +++ app/views/modal/auth_modal.coffee | 3 +- 6 files changed, 64 insertions(+), 26 deletions(-) diff --git a/app/styles/recruitment_base.sass b/app/styles/recruitment_base.sass index 06bfe815c..f6c6e1062 100644 --- a/app/styles/recruitment_base.sass +++ b/app/styles/recruitment_base.sass @@ -18,4 +18,38 @@ #employer-content-area - margin: auto \ No newline at end of file + 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% + + \ No newline at end of file diff --git a/app/templates/modal/auth.jade b/app/templates/modal/auth.jade index 626ca4827..7edff3fff 100644 --- a/app/templates/modal/auth.jade +++ b/app/templates/modal/auth.jade @@ -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") diff --git a/app/templates/modal/employer_signup_modal.jade b/app/templates/modal/employer_signup_modal.jade index d6a627ddf..8d0429137 100644 --- a/app/templates/modal/employer_signup_modal.jade +++ b/app/templates/modal/employer_signup_modal.jade @@ -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. diff --git a/app/views/employers_view.coffee b/app/views/employers_view.coffee index 050887ed3..8016cdaab 100644 --- a/app/views/employers_view.coffee +++ b/app/views/employers_view.coffee @@ -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 = '' diff --git a/app/views/kinds/ModalView.coffee b/app/views/kinds/ModalView.coffee index ad25b3c09..b2fecf1ce 100644 --- a/app/views/kinds/ModalView.coffee +++ b/app/views/kinds/ModalView.coffee @@ -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', => diff --git a/app/views/modal/auth_modal.coffee b/app/views/modal/auth_modal.coffee index 81edc7dd4..5f486281e 100644 --- a/app/views/modal/auth_modal.coffee +++ b/app/views/modal/auth_modal.coffee @@ -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