commit: 43df35213e80b9b7de69cc80f138882708a05b9b
parent: 6f7c9774c776afeea0d98cbbd30483f4f0c6b938
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 18 Oct 2016 16:37:15 +0200
Improving all forms
Diffstat:
16 files changed, 269 insertions(+), 268 deletions(-)
diff --git a/Dockerfile.neo4j b/Dockerfile.neo4j
@@ -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
diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png
Binary files differ.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -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';
diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
@@ -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;
+ }
+ }
+}
+
diff --git a/app/controllers/xrd_controller.rb b/app/controllers/xrd_controller.rb
@@ -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
diff --git a/app/views/auth/confirmations/new.html.haml b/app/views/auth/confirmations/new.html.haml
@@ -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"
diff --git a/app/views/auth/passwords/edit.html.haml b/app/views/auth/passwords/edit.html.haml
@@ -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"
diff --git a/app/views/auth/passwords/new.html.haml b/app/views/auth/passwords/new.html.haml
@@ -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"
diff --git a/app/views/auth/registrations/edit.html.haml b/app/views/auth/registrations/edit.html.haml
@@ -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"
diff --git a/app/views/auth/registrations/new.html.haml b/app/views/auth/registrations/new.html.haml
@@ -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"
diff --git a/app/views/auth/sessions/new.html.haml b/app/views/auth/sessions/new.html.haml
@@ -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"
diff --git a/app/views/layouts/auth.html.haml b/app/views/layouts/auth.html.haml
@@ -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
diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml
@@ -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"
diff --git a/app/views/settings/profiles/show.html.haml b/app/views/settings/profiles/show.html.haml
@@ -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"
diff --git a/app/views/shared/_error_messages.html.haml b/app/views/shared/_error_messages.html.haml
@@ -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:
diff --git a/config/initializers/simple_form.rb b/config/initializers/simple_form.rb
@@ -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
