Finalise "swallow the key" illustration and layout

customize.dist/pages/register.js

@@ -21,41 +21,43 @@ define([
                 h('div.row.cp-page-title', h('h1', Msg.register_header)),
                 h('div.row.cp-register-det', [
                 h('div#data.hidden.col-md-6', [
-                    h('img.img-fluid', {
-                        src: '/customize/images/illustration-swallow-the-key.png?' + urlArgs
-                    }),
                     h('h2', Msg.register_notes_title),
                     Pages.setHTML(h('div.cp-register-notes'), Msg.register_notes)
                 ]),
-                h('div#userForm.form-group.hidden.col-md-6', [
+                h('div.cp-reg-form.col-md-6', [
-                    h('a', {
+                    h('img.img-fluid', {
-                        href: '/features.html'
+                        src: '/customize/images/swallow-the-key.png?' + urlArgs
-                    }, Msg.register_whyRegister),
-                    h('input.form-control#username', {
-                        type: 'text',
-                        autocomplete: 'off',
-                        autocorrect: 'off',
-                        autocapitalize: 'off',
-                        spellcheck: false,
-                        placeholder: Msg.login_username,
-                        autofocus: true,
-                    }),
-                    h('input.form-control#password', {
-                        type: 'password',
-                        placeholder: Msg.login_password,
-                    }),
-                    h('input.form-control#password-confirm', {
-                        type: 'password',
-                        placeholder: Msg.login_confirm,
                     }),
-                    h('div.checkbox-container', [
+                    h('div#userForm.form-group.hidden', [
-                        UI.createCheckbox('import-recent', Msg.register_importRecent, true)
+                        h('a', {
-                    ]),
+                            href: '/features.html'
-                    h('div.checkbox-container', [
+                        }, Msg.register_whyRegister),
-                        $(UI.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0]
+                        h('input.form-control#username', {
-                    ]),
+                            type: 'text',
-                    h('button#register', Msg.login_register)
+                            autocomplete: 'off',
-                ])
+                            autocorrect: 'off',
+                            autocapitalize: 'off',
+                            spellcheck: false,
+                            placeholder: Msg.login_username,
+                            autofocus: true,
+                        }),
+                        h('input.form-control#password', {
+                            type: 'password',
+                            placeholder: Msg.login_password,
+                        }),
+                        h('input.form-control#password-confirm', {
+                            type: 'password',
+                            placeholder: Msg.login_confirm,
+                        }),
+                        h('div.checkbox-container', [
+                            UI.createCheckbox('import-recent', Msg.register_importRecent, true)
+                        ]),
+                        h('div.checkbox-container', [
+                            $(UI.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0]
+                        ]),
+                        h('button#register', Msg.login_register)
+                    ])
+                ]),
                 ]),
             ]),
 

customize.dist/src/less2/pages/page-register.less

@@ -56,10 +56,19 @@
                 margin-bottom: 1em;
             }
         }
+        .cp-reg-form {
+            img {
+                margin-top: 0px;
+                position: relative;
+                z-index: 0;
+            }
+        }
         #userForm {
             padding: 15px;
             background-color: white;
-            height: min-content; // XXX why does the form expand without this?
+            position: relative;
+            z-index: 2;
+            margin-bottom: 100px;
             .cp-shadow();
             .form-control {
                 border-radius: 0;