diff --git a/.scss-lint.yml b/.scss-lint.yml index 1fc197bb9..5e5e45316 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -70,7 +70,7 @@ linters: enabled: true IdSelector: - enabled: true + enabled: false ImportantRule: enabled: true diff --git a/app/assets/javascripts/app/pages/registration.js b/app/assets/javascripts/app/pages/registration.js deleted file mode 100644 index fec226363..000000000 --- a/app/assets/javascripts/app/pages/registration.js +++ /dev/null @@ -1,10 +0,0 @@ -// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later -app.pages.Registration = Backbone.View.extend({ - initialize: function() { - $("input#user_email").popover({ - placement: "left", - trigger: "focus" - }).popover("show"); - } -}); -// @license-end diff --git a/app/assets/javascripts/app/router.js b/app/assets/javascripts/app/router.js index f7bd8a440..e9dc48ef6 100644 --- a/app/assets/javascripts/app/router.js +++ b/app/assets/javascripts/app/router.js @@ -173,10 +173,6 @@ app.Router = Backbone.Router.extend({ }); }, - registration: function() { - app.page = new app.pages.Registration(); - }, - settings: function() { app.page = new app.pages.Settings(); }, diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index adb868f5c..5566860ec 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -24,6 +24,9 @@ // font overrides @import 'typography'; +// New design, can be used adding the .modern-design class to a
around the page which is ported +@import 'modern-design'; + // layout @import 'sidebar'; diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss index 7ee53069e..8ba52becf 100644 --- a/app/assets/stylesheets/mobile/mobile.scss +++ b/app/assets/stylesheets/mobile/mobile.scss @@ -21,6 +21,10 @@ @import 'typography'; +// New design, can be used adding the .modern-design class to a
around the page which is ported +@import 'modern-design'; +@import 'registration'; + a { color: #2489ce; text-decoration: none; diff --git a/app/assets/stylesheets/modern-design.scss b/app/assets/stylesheets/modern-design.scss new file mode 100644 index 000000000..c3a39a1c0 --- /dev/null +++ b/app/assets/stylesheets/modern-design.scss @@ -0,0 +1,66 @@ +$breakpoint: 700px; + +$subtle: $text-dark-grey; + +$default-size: 16px; +$smaller: .9em; + +$default-margin: 16px; // Will be 1rem once the default-size will be set on +$double-margin: $default-margin * 2; +$triple-margin: $default-margin * 3; + +$radius: 4px; + + +.modern-design { + font-size: $default-size; + + // Style + h1 { + font-size: 3em; + margin: $double-margin 0; + + @media screen and (max-width: $breakpoint) { + font-size: 2em; + margin: $default-margin 0; + } + } + + section { + margin-bottom: $double-margin; + } + + section:last-child { + margin-bottom: 0; + } + + .advice { + color: $subtle; + font-size: $smaller; + font-style: italic; + } + // End of style + + // Layout + // This cleans the famous children "margin-top" problem + .small-container::before, + .small-container::after { + content: ' '; + display: table; + } + + .small-container { + margin: auto; + max-width: 800px; + + @media screen and (max-width: $breakpoint) { + padding: 10px; + } + } + + .flex-container { + display: flex; + justify-content: space-between; + } + // End of layout +} diff --git a/app/assets/stylesheets/registration.scss b/app/assets/stylesheets/registration.scss index 6fd755464..346a190c3 100644 --- a/app/assets/stylesheets/registration.scss +++ b/app/assets/stylesheets/registration.scss @@ -1,54 +1,79 @@ .page-registrations { + // For the mobile version which doesn't have the same global CSS + background: $body-bg; + + #app { + margin: -10px; + margin-bottom: 10px; + } + // End specific mobile + + // Overriding bootstrap + .form-control { + display: inline-block; + width: 320px; + } + // End Overriding bootstrap + + .fields { + margin: $triple-margin 0; + + @media screen and (max-width: $breakpoint) { + flex-direction: column-reverse; + margin: $double-margin 0; + } + + section { + border-left: solid 3px $brand-primary; + padding-left: 10px; + } + } + + .advice { + max-width: 450px; + } + + .captcha { + align-items: center; + display: flex; + + .captcha-img { + margin-left: 5px; + order: 2; + } + } + + .import-and-ball-container { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .import-instructions { + align-self: flex-start; + background-color: lighten($brand-primary, 40); + border: 2px solid lighten($brand-primary, 20); + border-radius: $radius; + font-size: $smaller; + margin-left: $default-margin; + padding: $default-margin; + width: 240px; + + @media screen and (max-width: $breakpoint) { + margin-bottom: $double-margin; + margin-left: 0; + width: 100%; + } + } + .ball { background: image-url('branding/ball.png') no-repeat; background-size: contain; - height: 633px; - max-width: 100%; - } + height: 250px; + width: 250px; - .v-center { - display: table; - height: 633px; - } - - @media (max-width: $screen-xs-max) { - .v-center { - height: auto; + @media screen and (max-width: $breakpoint) { + display: none; } } - - .content { - display: table-cell; - vertical-align: middle; - - h1 { - font-size: 35px; - margin: 12px 0; - } - } - - form { - max-width: 500px; - } - - .captcha-img { - left: 10px; - position: absolute; - top: 169px; - width: 120px; - } - - .form-control.captcha-input { - border-bottom: 1px solid $input-border; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - box-sizing: border-box; - line-height: $line-height-base; - padding-left: 130px; - } - - .terms > a { - color: inherit; - text-decoration: underline; - } } diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml index e9667dbbe..b33a30c24 100644 --- a/app/views/layouts/application.mobile.haml +++ b/app/views/layouts/application.mobile.haml @@ -17,7 +17,7 @@ %meta{name: "MobileOptimized", content: "320"}/ %meta{"http-equiv" => "cleartype", :content => "on"}/ - %body + %body{class: "page-#{controller_name} action-#{action_name}"} #app = render "layouts/header" - if user_signed_in? diff --git a/app/views/registrations/_form.haml b/app/views/registrations/_form.haml deleted file mode 100644 index 5f3198881..000000000 --- a/app/views/registrations/_form.haml +++ /dev/null @@ -1,81 +0,0 @@ -= form_for(resource, url: registration_path(resource_name), html: {class: "form-horizontal block-form", autocomplete: "off"}) do |f| - - %fieldset - - if mobile - %legend - = image_tag("branding/logos/header-logo2x.png", height: 40, width: 40) - = AppConfig.settings.pod_name - - - if mobile - = f.label :email, t("registrations.new.email"), class: "control-label", id: "emailLabel" - - else - = f.label :email, t("registrations.new.email"), class: "sr-only control-label", id: "emailLabel" - %i.entypo-mail - = f.email_field :email, - autofocus: true, - class: "input-block-level form-control", - data: {content: t("users.edit.your_email_private")}, - placeholder: t("registrations.new.email"), - required: true, - title: t("registrations.new.enter_email"), - aria: {labelledby: "emailLabel"} - - - if mobile - %label.control-label#usernameLabel{for: "user_username"} - = t("registrations.new.username") - - else - %label.sr-only.control-label#usernameLabel{for: "user_username"} - = t("registrations.new.username") - %i.entypo-user - = f.text_field :username, - class: "input-block-level form-control", - placeholder: t("registrations.new.username"), - title: t("registrations.new.enter_username"), - required: true, - pattern: "[A-Za-z0-9_.\\-]+", - aria: {labelledby: "usernameLabel"} - - - if mobile - %label.control-label#passwordLabel{for: "user_password"} - = t("registrations.new.password") - - else - %label.sr-only.control-label#passwordLabel{for: "user_password"} - = t("registrations.new.password") - %i.entypo-lock - = f.password_field :password, - class: "input-block-level form-control", - placeholder: t("registrations.new.password"), - title: t("registrations.new.enter_password"), - required: true, - pattern: "......+", - aria: {labelledby: "passwordLabel"} - - - if mobile - %label.control-label#passwordConfirmationLabel{for: "user_password_confirmation"} - = t("registrations.new.password_confirmation") - - else - %label.sr-only.control-label#passwordConfirmationLabel{for: "user_password_confirmation"} - = t("registrations.new.password_confirmation") - %i.entypo-lock - = f.password_field :password_confirmation, - class: "input-block-level form-control", - placeholder: t("registrations.new.password_confirmation"), - title: t("registrations.new.enter_password_again"), - required: true, - pattern: "......+", - aria: {labelledby: "passwordConfirmationLabel"} - - - if AppConfig.settings.captcha.enable? - = show_simple_captcha object: "user", - code_type: "numeric", - class: "simple-captcha-image", - input_html: {class: "form-control captcha-input"} - - = invite_hidden_tag(invite) - - - if AppConfig.settings.terms.enable? - %p.terms.text-center#terms - = t('registrations.new.terms', terms_link: link_to(t('registrations.new.terms_link'), terms_path, target: "_blank")).html_safe - - = f.submit t("registrations.new.sign_up"), class: "btn btn-block btn-large btn-primary", - data: {disable_with: t("registrations.new.submitting")} diff --git a/app/views/registrations/_new.erb b/app/views/registrations/_new.erb new file mode 100644 index 000000000..b0d621842 --- /dev/null +++ b/app/views/registrations/_new.erb @@ -0,0 +1,77 @@ +
+
+
+

<%= t("registrations.new.title") %>

+

<%= t("registrations.new.subtitle", podname: AppConfig.settings.pod_name, tutorials_link: link_to(t('registrations.new.tutorials_link_label'), "https://diasporafoundation.org/getting_started/sign_up", target: "_blank")).html_safe %>

+
+ <%= form_for(resource, url: registration_path(resource_name)) do |f| %> +
+
+
+

+ +

+

+ @<%= AppConfig.pod_uri.host %> +

+

<%= t("registrations.new.username_advice") %>

+
+
+

+ +

+

+ +

+

<%= t("registrations.new.email_advice") %>

+
+
+

+ +

+

+ +

+
+
+

+ +

+

+ +

+
+ <% if AppConfig.settings.captcha.enable? %> +
+

+ +

+
+ <%= show_simple_captcha object: "user", code_type: "numeric", class: "simple-captcha-image", input_html: {class: "form-control captcha-input"} %> +
+
+ <% end %> + <%= invite_hidden_tag(invite) %> +
+
+ <% if false %> +
+ <%= t("registrations.new.import_indication", podname: AppConfig.settings.pod_name) %> +
+ <% end %> +
+
+
+
+ <% if AppConfig.settings.terms.enable? %> +

+ <%= t('registrations.new.terms', terms_link: link_to(t('registrations.new.terms_link'), terms_path, target: "_blank")).html_safe %> +

+ <% end %> +

+ +

+
+ <% end %> +
+
\ No newline at end of file diff --git a/app/views/registrations/new.haml b/app/views/registrations/new.haml index bf034f9da..0cf033bde 100644 --- a/app/views/registrations/new.haml +++ b/app/views/registrations/new.haml @@ -1,11 +1 @@ -#registration - .container - .row - .col-sm-6.hidden-xs - .ball - .col-sm-6.col-xs-12.v-center - .content.text-center - %h1#pod-name - = AppConfig.settings.pod_name - - = render partial: "form", locals: {mobile: false} += render partial: "new" diff --git a/app/views/registrations/new.mobile.haml b/app/views/registrations/new.mobile.haml index 7837a875d..e5e6d00bc 100644 --- a/app/views/registrations/new.mobile.haml +++ b/app/views/registrations/new.mobile.haml @@ -2,15 +2,12 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. -.stream#main-stream - - flash.each do |name, msg| - .expose#flash-container - .flash-message{class: "message alert alert-#{flash_class name}", role: "alert"} - = msg +- flash.each do |name, msg| + .expose#flash-container + .flash-message{class: "message alert alert-#{flash_class name}", role: "alert"} + = msg - .login-form - .login-container - = render partial: "form", locals: {mobile: true} += render partial: "new", locals: {mobile: true} %footer.footer %ul diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index d9890580a..78ff360cd 100644 --- a/config/locales/diaspora/en.yml +++ b/config/locales/diaspora/en.yml @@ -1099,18 +1099,20 @@ en: registrations: new: - enter_email: "Enter your email address" - enter_username: "Pick a username (only letters, numbers, and underscores)" - enter_password: "Enter a password (six character minimum)" - enter_password_again: "Enter the same password as before" + title: "Join the diaspora* community!" + subtitle: "You're about to create an account on %{podname}. A single account is enough to reach the whole diaspora* network. You don't need to create a new account here if you already have one on another pod.
Need help? Check %{tutorials_link}." + tutorials_link_label: "the tutorials" sign_up: "Create account" email: "Email" + email_advice: "Your e-mail will never be shared with anyone and will only be used to enable you to recover your account and to send notifications." username: "Username" + username_advice: "Your username is unique and allows others to find you in the network. It can't be changed once set. Only letters, numbers, \".\", \"_\" and \"-\"." password: "Password" password_confirmation: "Password confirmation" submitting: "Submitting..." terms: "By creating an account you accept the %{terms_link}." terms_link: "terms of service" + import_indication: "Do you want to migrate an existing diaspora* account to %{podname}? If so, sign up first and then go to the user settings page to import your previous account." create: success: "You’ve joined diaspora*!" closed: @@ -1423,7 +1425,7 @@ en: simple_captcha: placeholder: "Enter the image value" - label: "Enter the code in the box:" + label: "Captcha" message: default: "The secret code did not match with the image" user: "The secret image and code were different"