From 6fa25b9f0fbf30716a71d7257f650c114d4e97f6 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Thu, 29 Jun 2017 21:52:12 +1000
Subject: scale reCAPTCHA to be full width of the register form

---
 app/assets/stylesheets/pages/login.scss       | 20 ++++++++++++++++++++
 app/views/devise/shared/_signup_box.html.haml |  6 +++---
 changelogs/unreleased/29000-style-captcha.yml |  4 ++++
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 changelogs/unreleased/29000-style-captcha.yml

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:
-- 
cgit v1.2.1