mirror of https://github.com/mastodon/mastodon
Improving all forms
Eugen Rochko
9 years ago
parent
6f7c9774c7
commit
43df35213e
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@ -0,0 +1,182 @@
|
||||
.form-container {
|
||||
max-width: 400px;
|
||||
padding: 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.input {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.input.file {
|
||||
padding: 15px 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
label {
|
||||
font-family: 'Roboto';
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.fields-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.input.boolean {
|
||||
margin-bottom: 5px;
|
||||
|
||||
label {
|
||||
font-family: 'Roboto';
|
||||
font-size: 14px;
|
||||
color: #9baec8;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
display: inline-block;
|
||||
margin-bottom: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text], input[type=email], input[type=password], textarea {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid #9baec8;
|
||||
padding: 7px 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
font-family: 'Roboto';
|
||||
|
||||
&:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:focus:invalid {
|
||||
border-bottom-color: #df405a;
|
||||
}
|
||||
|
||||
&:required:valid {
|
||||
border-bottom-color: #79bd9a;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
border-bottom-color: #2b90d9;
|
||||
}
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
input[type=text], input[type=email], input[type=password] {
|
||||
border-bottom-color: #df405a;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-weight: 500;
|
||||
color: #df405a;
|
||||
}
|
||||
}
|
||||
|
||||
.prompt {
|
||||
font-size: 16px;
|
||||
color: #9baec8;
|
||||
text-align: center;
|
||||
|
||||
.prompt-highlight {
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
code.copypasteable {
|
||||
display: block;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
margin-top: 20px;
|
||||
background: #282c37;
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 30px;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: #2b90d9;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
outline: 0;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#2b90d9, 5%);
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
background-color: darken(#2b90d9, 5%);
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background: #df405a;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#df405a, 5%);
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
background-color: darken(#df405a, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
background: #282c37;
|
||||
color: #9baec8;
|
||||
border-radius: 4px;
|
||||
padding: 15px 10px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: #9baec8;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #d9e1e8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
- content_for :page_title do
|
||||
Confirmation instructions
|
||||
|
||||
= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
|
||||
= devise_error_messages!
|
||||
= simple_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
|
||||
= render 'shared/error_messages', object: resource
|
||||
|
||||
= f.input :email, autofocus: true, required: true, placeholder: 'E-mail address'
|
||||
|
||||
.field
|
||||
= f.email_field :email, autofocus: true, required: true, placeholder: 'E-mail address'
|
||||
.actions
|
||||
= f.button "Resend confirmation instructions", type: 'submit'
|
||||
= f.button :button, "Resend confirmation instructions", type: :submit
|
||||
|
||||
.form-footer= render "auth/shared/links"
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
- content_for :page_title do
|
||||
Set new password
|
||||
|
||||
= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
|
||||
= devise_error_messages!
|
||||
= f.hidden_field :reset_password_token
|
||||
|
||||
.field
|
||||
= f.password_field :password, autofocus: true, autocomplete: "off", placeholder: 'New password'
|
||||
.field
|
||||
= f.password_field :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
|
||||
= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
|
||||
= render 'shared/error_messages', object: resource
|
||||
= f.input :reset_password_token, as: :hidden
|
||||
|
||||
= f.input :password, autofocus: true, autocomplete: "off", placeholder: 'New password'
|
||||
= f.input :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
|
||||
|
||||
.actions
|
||||
= f.button "Change my password", type: :submit
|
||||
= f.button :button, "Change my password", type: :submit
|
||||
|
||||
= render "devise/shared/links"
|
||||
.form-footer= render "devise/shared/links"
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
- content_for :page_title do
|
||||
Reset password
|
||||
|
||||
= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
|
||||
= devise_error_messages!
|
||||
= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
|
||||
= render 'shared/error_messages', object: resource
|
||||
|
||||
= f.input :email, autofocus: true, required: true, placeholder: 'E-mail address'
|
||||
|
||||
.field
|
||||
= f.email_field :email, autofocus: true, required: true, placeholder: 'E-mail address'
|
||||
.actions
|
||||
= f.button "Reset password", type: 'submit'
|
||||
= f.button :button, "Reset password", type: :submit
|
||||
|
||||
.form-footer= render "auth/shared/links"
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
- content_for :page_title do
|
||||
Change password
|
||||
|
||||
= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f|
|
||||
= devise_error_messages!
|
||||
= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f|
|
||||
= render 'shared/error_messages', object: resource
|
||||
|
||||
.field
|
||||
= f.email_field :email, placeholder: 'E-mail address'
|
||||
.field
|
||||
= f.password_field :password, autocomplete: "off", placeholder: 'New password'
|
||||
.field
|
||||
= f.password_field :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
|
||||
.field
|
||||
= f.password_field :current_password, autocomplete: "off", placeholder: 'Current password'
|
||||
= f.input :email, placeholder: 'E-mail address'
|
||||
= f.input :password, autocomplete: "off", placeholder: 'New password'
|
||||
= f.input :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
|
||||
= f.input :current_password, autocomplete: "off", placeholder: 'Current password'
|
||||
|
||||
.actions
|
||||
= f.button "Save changes", type: 'submit'
|
||||
= f.button :button, "Save changes", type: :submit
|
||||
|
||||
.form-footer= render "settings/shared/links"
|
||||
|
||||
@ -1,20 +1,17 @@
|
||||
- content_for :page_title do
|
||||
Sign up
|
||||
|
||||
= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
|
||||
= devise_error_messages!
|
||||
= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
|
||||
= render 'shared/error_messages', object: resource
|
||||
|
||||
= f.fields_for :account do |ff|
|
||||
.field
|
||||
= ff.text_field :username, autofocus: true, placeholder: 'Username', required: true
|
||||
= f.simple_fields_for :account do |ff|
|
||||
= ff.input :username, autofocus: true, placeholder: 'Username', required: true
|
||||
|
||||
= f.input :email, placeholder: 'E-mail address', required: true
|
||||
= f.input :password, autocomplete: "off", placeholder: 'Password', required: true
|
||||
= f.input :password_confirmation, autocomplete: "off", placeholder: 'Confirm password', required: true
|
||||
|
||||
.field
|
||||
= f.email_field :email, placeholder: 'E-mail address', required: true
|
||||
.field
|
||||
= f.password_field :password, autocomplete: "off", placeholder: 'Password', required: true
|
||||
.field
|
||||
= f.password_field :password_confirmation, autocomplete: "off", placeholder: 'Confirm password', required: true
|
||||
.actions
|
||||
= f.button "Sign up", type: 'submit'
|
||||
= f.button :button, "Sign up", type: :submit
|
||||
|
||||
.form-footer= render "auth/shared/links"
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
- content_for :page_title do
|
||||
Log in
|
||||
|
||||
= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
|
||||
.field
|
||||
= f.email_field :email, autofocus: true, placeholder: 'E-mail address', required: true
|
||||
.field
|
||||
= f.password_field :password, autocomplete: "off", placeholder: 'Password', required: true
|
||||
= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
|
||||
= f.input :email, autofocus: true, placeholder: 'E-mail address', required: true
|
||||
= f.input :password, placeholder: 'Password', required: true
|
||||
|
||||
.actions
|
||||
= f.button "Log in", type: 'submit'
|
||||
= f.button :button, "Log in", type: :submit
|
||||
|
||||
.form-footer= render "auth/shared/links"
|
||||
|
||||
@ -1,22 +1,16 @@
|
||||
- content_for :page_title do
|
||||
Preferences
|
||||
|
||||
= form_for current_user, url: settings_preferences_path, html: { method: :put } do |f|
|
||||
= f.fields_for :notification_emails, current_user.settings(:notification_emails) do |ff|
|
||||
.boolean-field
|
||||
= ff.check_box :follow
|
||||
= ff.label :follow, 'Send e-mail when someone follows you'
|
||||
.boolean-field
|
||||
= ff.check_box :reblog
|
||||
= ff.label :reblog, 'Send e-mail when someone reblogs your status'
|
||||
.boolean-field
|
||||
= ff.check_box :favourite
|
||||
= ff.label :favourite, 'Send e-mail when someone favourites your status'
|
||||
.boolean-field
|
||||
= ff.check_box :mention
|
||||
= ff.label :mention, 'Send e-mail when someone mentions you'
|
||||
= simple_form_for current_user, url: settings_preferences_path, html: { method: :put } do |f|
|
||||
= render 'shared/error_messages', object: current_user
|
||||
|
||||
= f.simple_fields_for :notification_emails, current_user.settings(:notification_emails) do |ff|
|
||||
= ff.input :follow, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone follows you'
|
||||
= ff.input :reblog, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone reblogs your status'
|
||||
= ff.input :favourite, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone favourites your status'
|
||||
= ff.input :mention, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone mentions you'
|
||||
|
||||
.actions
|
||||
= f.button 'Save changes', type: :submit
|
||||
= f.button :button, 'Save changes', type: :submit
|
||||
|
||||
.form-footer= render "settings/shared/links"
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
- content_for :page_title do
|
||||
Edit profile
|
||||
|
||||
= form_for @account, url: settings_profile_path, html: { method: :put } do |f|
|
||||
.field
|
||||
= f.text_field :display_name, placeholder: 'Display name'
|
||||
.field
|
||||
= f.text_area :note, placeholder: 'Bio'
|
||||
.file-field
|
||||
= f.label :avatar
|
||||
= f.file_field :avatar
|
||||
.file-field
|
||||
= f.label :header
|
||||
= f.file_field :header
|
||||
= simple_form_for @account, url: settings_profile_path, html: { method: :put } do |f|
|
||||
= render 'shared/error_messages', object: @account
|
||||
|
||||
= f.input :display_name, placeholder: 'Display name'
|
||||
= f.input :note, placeholder: 'Bio'
|
||||
= f.input :avatar, wrapper: :with_label
|
||||
= f.input :header, wrapper: :with_label
|
||||
|
||||
.actions
|
||||
= f.button 'Save changes', type: :submit
|
||||
= f.button :button, 'Save changes', type: :submit
|
||||
|
||||
.form-footer= render "settings/shared/links"
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
- if object.errors.any?
|
||||
.flash-message#error_explanation
|
||||
%strong
|
||||
Something isn't quite right yet! Please review
|
||||
= pluralize(object.errors.count, 'error')
|
||||
below:
|
||||
Loading…
Reference in New Issue