diff options
| author | Simon Knox <psimyn@gmail.com> | 2017-06-29 21:52:12 +1000 |
|---|---|---|
| committer | Simon Knox <psimyn@gmail.com> | 2017-06-29 21:52:12 +1000 |
| commit | 6fa25b9f0fbf30716a71d7257f650c114d4e97f6 (patch) | |
| tree | 62c4f2c970f60ac62bf3badfb03d5663b78377c5 | |
| parent | eb175d5fe08aeefe615f39e7359d62788af8b43a (diff) | |
| download | gitlab-ce-29000-style-captcha.tar.gz | |
scale reCAPTCHA to be full width of the register form29000-style-captcha
| -rw-r--r-- | app/assets/stylesheets/pages/login.scss | 20 | ||||
| -rw-r--r-- | app/views/devise/shared/_signup_box.html.haml | 6 | ||||
| -rw-r--r-- | changelogs/unreleased/29000-style-captcha.yml | 4 |
3 files changed, 27 insertions, 3 deletions
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 3cbe8dededb..3406653f796 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -231,6 +231,26 @@ height: 100%; } +.recaptcha-responsive-wrapper { + @function recaptcha-scale($container-width) { + $recaptcha-width: 304px; + @return $container-width / $recaptcha-width; + } + + margin-bottom: 8px; + transform: scale(recaptcha-scale(260px)); + transform-origin: 0 0; + + @media (min-width: $screen-sm-min) { + transform: scale(recaptcha-scale(252.5px)); + } + + @media (min-width: $screen-md-min) { + transform: scale(recaptcha-scale(340px)); + margin-bottom: 28px; + } +} + // Fixes footer container to bottom of viewport .devise-layout-html body { // offset height of fixed header + 1 to avoid scroll diff --git a/app/views/devise/shared/_signup_box.html.haml b/app/views/devise/shared/_signup_box.html.haml index d696577278d..8d5f3d1c8f5 100644 --- a/app/views/devise/shared/_signup_box.html.haml +++ b/app/views/devise/shared/_signup_box.html.haml @@ -22,9 +22,9 @@ = f.label :password = f.password_field :password, class: "form-control bottom", required: true, pattern: ".{#{@minimum_password_length},}", title: "Minimum length is #{@minimum_password_length} characters." %p.gl-field-hint Minimum length is #{@minimum_password_length} characters - %div - - if Gitlab::Recaptcha.enabled? - = recaptcha_tags + .recaptcha-responsive-wrapper + - if Gitlab::Recaptcha.enabled? + = recaptcha_tags %div = f.submit "Register", class: "btn-register btn" .clearfix.submit-container diff --git a/changelogs/unreleased/29000-style-captcha.yml b/changelogs/unreleased/29000-style-captcha.yml new file mode 100644 index 00000000000..e5cf1a07f13 --- /dev/null +++ b/changelogs/unreleased/29000-style-captcha.yml @@ -0,0 +1,4 @@ +--- +title: responsive recaptcha on register form +merge_request: +author: |