mirror of
https://github.com/mastodon/mastodon.git
synced 2024-11-20 03:25:17 +01:00
Improving all forms
This commit is contained in:
Eugen Rochko
parent
6f7c9774c7
commit
43df35213e
@ -12,3 +12,6 @@ com.graphaware.module.NR.maxTopRankNodes=10\n\
|
||||
com.graphaware.module.NR.dampingFactor=0.85\n\
|
||||
com.graphaware.module.NR.propertyKey=nodeRank\n'\
|
||||
>> /var/lib/neo4j/conf/neo4j.conf
|
||||
RUN echo 'com.graphaware.runtime.stats.disabled=true\n\
|
||||
com.graphaware.server.stats.disabled=true\n'\
|
||||
>> /var/lib/neo4j/conf/neo4j.conf
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@ -189,192 +189,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
|
||||
.field {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.file-field {
|
||||
padding: 15px 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;
|
||||
}
|
||||
|
||||
.boolean-field {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.field_with_error {
|
||||
input[type=text], input[type=email], input[type=password] {
|
||||
border-bottom-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 {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: #9baec8;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #d9e1e8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#error_explanation {
|
||||
background: #282c37;
|
||||
color: #9baec8;
|
||||
border-radius: 4px;
|
||||
padding: 15px 10px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
|
||||
h2 {
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-left: 15px;
|
||||
list-style: circle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-list {
|
||||
list-style: none;
|
||||
|
||||
@ -415,6 +229,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
@import 'forms';
|
||||
@import 'accounts';
|
||||
@import 'stream_entries';
|
||||
@import 'components';
|
||||
|
||||
182
app/assets/stylesheets/forms.scss
Normal file
182
app/assets/stylesheets/forms.scss
Normal file
@ -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,5 +1,6 @@
|
||||
class XrdController < ApplicationController
|
||||
before_action :set_default_format
|
||||
before_action :set_default_format_json, only: :webfinger
|
||||
before_action :set_default_format_xml, only: :host_meta
|
||||
|
||||
def host_meta
|
||||
@webfinger_template = "#{webfinger_url}?resource={uri}"
|
||||
@ -24,7 +25,11 @@ class XrdController < ApplicationController
|
||||
|
||||
private
|
||||
|
||||
def set_default_format
|
||||
def set_default_format_xml
|
||||
request.format = 'xml' if request.headers["HTTP_ACCEPT"].nil? && params[:format].nil?
|
||||
end
|
||||
|
||||
def set_default_format_json
|
||||
request.format = 'json' if request.headers["HTTP_ACCEPT"].nil? && params[:format].nil?
|
||||
end
|
||||
|
||||
|
||||
@ -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
|
||||
= 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'
|
||||
|
||||
.field
|
||||
= f.password_field :password, autofocus: true, autocomplete: "off", placeholder: 'New password'
|
||||
.field
|
||||
= f.password_field :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"
|
||||
|
||||
@ -4,14 +4,15 @@
|
||||
%h1
|
||||
= link_to root_path do
|
||||
= image_tag 'logo.png'
|
||||
%small= Rails.configuration.x.local_domain
|
||||
|
||||
.form-container
|
||||
- if flash[:notice]
|
||||
.flash-message.notice= flash[:notice]
|
||||
.flash-message.notice
|
||||
%strong= flash[:notice]
|
||||
|
||||
- if flash[:alert]
|
||||
.flash-message.alert= flash[:alert]
|
||||
.flash-message.alert
|
||||
%strong= flash[:alert]
|
||||
|
||||
= yield
|
||||
|
||||
|
||||
@ -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"
|
||||
|
||||
6
app/views/shared/_error_messages.html.haml
Normal file
6
app/views/shared/_error_messages.html.haml
Normal file
@ -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:
|
||||
@ -40,7 +40,7 @@ SimpleForm.setup do |config|
|
||||
b.optional :readonly
|
||||
|
||||
## Inputs
|
||||
b.use :label_input
|
||||
b.use :input
|
||||
b.use :hint, wrap_with: { tag: :span, class: :hint }
|
||||
b.use :error, wrap_with: { tag: :span, class: :error }
|
||||
|
||||
@ -51,6 +51,14 @@ SimpleForm.setup do |config|
|
||||
# b.use :full_error, wrap_with: { tag: :span, class: :error }
|
||||
end
|
||||
|
||||
config.wrappers :with_label, class: :input,
|
||||
hint_class: :field_with_hint, error_class: :field_with_errors do |b|
|
||||
b.use :html5
|
||||
b.use :hint, wrap_with: { tag: :span, class: :hint }
|
||||
b.use :error, wrap_with: { tag: :span, class: :error }
|
||||
b.use :label_input
|
||||
end
|
||||
|
||||
# The default wrapper to be used by the FormBuilder.
|
||||
config.default_wrapper = :default
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user