From 2f1401cfa443f113afc17e77d8d0da22eead81ad Mon Sep 17 00:00:00 2001 From: "nogafam.es Admin" Date: Thu, 21 Oct 2021 20:41:08 +0200 Subject: [PATCH] Improved UX of registration form * Make checkboxes bigger * Change messages to adapt to "Instante"'s needs * Add custom placeholder on username depending on language + region It replaces the previous js implementation, which is just worse Hopefully it's more clear now --- app/javascript/styles/mastodon/forms.scss | 21 ++++++++++++++++++--- app/views/auth/registrations/new.html.haml | 21 +-------------------- config/locales/simple_form.es-AR.yml | 5 +++-- config/locales/simple_form.es-MX.yml | 5 +++-- config/locales/simple_form.es.yml | 5 +++-- 5 files changed, 28 insertions(+), 29 deletions(-) diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 7459e2f17..02bf2c0e7 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -536,10 +536,27 @@ code { position: relative; } + input#user_account_attributes_username { + padding-left: 1.5em; + } + + input[type="checkbox"] { + margin: 0; + width: 1.5em; + height: 1.5em; + cursor: pointer; + } + + &__append.left { + right: initial !important; + padding: 10px 0; + padding-left: 10px; + } + &__append { position: absolute; right: 3px; - top: 1px; + top: .2em; padding: 10px; padding-bottom: 9px; font-size: 16px; @@ -547,7 +564,6 @@ code { font-family: inherit; pointer-events: none; cursor: default; - max-width: 140px; white-space: nowrap; overflow: hidden; @@ -559,7 +575,6 @@ code { right: 0; bottom: 1px; width: 5px; - background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%)); } } } diff --git a/app/views/auth/registrations/new.html.haml b/app/views/auth/registrations/new.html.haml index f1a71745a..9ea4e159a 100644 --- a/app/views/auth/registrations/new.html.haml +++ b/app/views/auth/registrations/new.html.haml @@ -14,7 +14,7 @@ = f.simple_fields_for :account do |ff| .fields-group - = ff.input :username, wrapper: :with_label, autofocus: true, label: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', pattern: '[a-zA-Z0-9_]+', maxlength: 30, onkeyup: "return window.playWithHandle(this)"}, append: "pablo@#{site_hostname}", hint: false + = ff.input :username, wrapper: :with_label, autofocus: true, label: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', pattern: '[a-zA-Z0-9_]+', maxlength: 20, placeholder: t('simple_form.labels.defaults.username_placeholder') || 'username' }, append: "@#{site_hostname}
@", hint: false .fields-group = f.input :email, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }, hint: false @@ -41,23 +41,4 @@ .actions = f.button :button, @invite.present? ? t('auth.register') : sign_up_message, type: :submit -:javascript - var originalHandle = null; - function playWithHandle(e) { - const inputValue = e.value.trim(); - const placeHolder = e.parentElement.querySelector('.label_input__append'); - var placeHolderStr = placeHolder.innerHTML.trim(); - if (originalHandle === null) - originalHandle = placeHolderStr; - if (inputValue === '') { - if (originalHandle === null) - return; - placeHolder.innerHTML = originalHandle; - console.log('empty'); - } else if (placeHolderStr.substr(0,1) !== '@') { - placeHolderStr = placeHolderStr.substr(placeHolderStr.indexOf('@')); - placeHolder.innerHTML = placeHolderStr; - } - } - .form-footer= render 'auth/shared/links' diff --git a/config/locales/simple_form.es-AR.yml b/config/locales/simple_form.es-AR.yml index a4f81068b..251df99ce 100644 --- a/config/locales/simple_form.es-AR.yml +++ b/config/locales/simple_form.es-AR.yml @@ -71,7 +71,7 @@ es-AR: imports: data: Archivo CSV exportado desde otro servidor de Instante invite_request: - text: Esto nos ayudará a revisar tu solicitud + text: Nos ayudará a decidir sobre tu solicitud ip_block: comment: Opcional. Acordate por qué agregaste esta regla. expires_in: Las direcciones IP son un recurso finito, a veces se comparten y cambian de personas frecuentemente. Por esta razón, no se recomiendan bloqueos indefinidos de direcciones IP. @@ -175,6 +175,7 @@ es-AR: sign_in_token_attempt: Código de seguridad type: Tipo de importación username: Nombre de usuario + username_placeholder: pabloO_32 username_or_email: Nombre de usuario o correo electrónico whole_word: Palabra entera email_domain_block: @@ -188,7 +189,7 @@ es-AR: invite: comment: Comentar invite_request: - text: "¿Por qué querés unirte?" + text: "¿Cómo conocistes Instante?" ip_block: comment: Comentario ip: Dirección IP diff --git a/config/locales/simple_form.es-MX.yml b/config/locales/simple_form.es-MX.yml index f1b0ef978..3ae3f4863 100644 --- a/config/locales/simple_form.es-MX.yml +++ b/config/locales/simple_form.es-MX.yml @@ -70,7 +70,7 @@ es-MX: imports: data: Archivo CSV exportado desde otra instancia de Instante invite_request: - text: Esto nos ayudará a revisar su aplicación + text: Nos ayudará a decidir sobre tu solicitud ip_block: comment: Opcional. Recuerda por qué has añadido esta regla. expires_in: Las direcciones IP son un recurso finito, a veces se comparten y a menudo cambian de manos. Por esta razón, no se recomiendan bloqueos de IP indefinida. @@ -175,6 +175,7 @@ es-MX: type: Importar tipo username: Nombre de usuario username_or_email: Usuario o Email + username_placeholder: juan_N54 whole_word: Toda la palabra email_domain_block: with_dns_records: Incluye los registros MX y las IP del dominio @@ -187,7 +188,7 @@ es-MX: invite: comment: Comentar invite_request: - text: "¿Por qué quiere unirse usted?" + text: "¿Cómo conociste Instante?" ip_block: comment: Comentario ip: IP diff --git a/config/locales/simple_form.es.yml b/config/locales/simple_form.es.yml index 93570f979..0f9e200da 100644 --- a/config/locales/simple_form.es.yml +++ b/config/locales/simple_form.es.yml @@ -71,7 +71,7 @@ es: imports: data: Archivo CSV exportado desde otra instancia de Instante invite_request: - text: Esto nos ayudará a revisar su aplicación + text: Nos ayudará a decidir sobre tu solicitud ip_block: comment: Opcional. Recuerda por qué has añadido esta regla. expires_in: Las direcciones IP son un recurso finito, a veces se comparten y a menudo cambian de manos. Por esta razón, no se recomiendan bloqueos de IP indefinida. @@ -175,6 +175,7 @@ es: sign_in_token_attempt: Código de seguridad type: Importar tipo username: Nombre de usuario + username_placeholder: martaA_94 username_or_email: Usuario o Email whole_word: Toda la palabra email_domain_block: @@ -188,7 +189,7 @@ es: invite: comment: Comentar invite_request: - text: "¿Por qué quiere unirse usted?" + text: "¿Cómo conociste Instante?" ip_block: comment: Comentario ip: IP