MetuFSS
/
metu.life
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improving all forms

Browse Source
master
Eugen Rochko 8 years ago
parent 6f7c9774c7
commit 43df35213e
16 changed files with 269 additions and 268 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      Dockerfile.neo4j
  2. BIN
      app/assets/images/logo.png
  3. 187
      app/assets/stylesheets/application.scss
  4. 182
      app/assets/stylesheets/forms.scss
  5. 9
      app/controllers/xrd_controller.rb
  6. 10
      app/views/auth/confirmations/new.html.haml
  7. 19
      app/views/auth/passwords/edit.html.haml
  8. 10
      app/views/auth/passwords/new.html.haml
  9. 18
      app/views/auth/registrations/edit.html.haml
  10. 21
      app/views/auth/registrations/new.html.haml
  11. 11
      app/views/auth/sessions/new.html.haml
  12. 7
      app/views/layouts/auth.html.haml
  13. 24
      app/views/settings/preferences/show.html.haml
  14. 20
      app/views/settings/profiles/show.html.haml
  15. 6
      app/views/shared/_error_messages.html.haml
  16. 10
      config/initializers/simple_form.rb

3
Dockerfile.neo4j
Unescape View File

@ -12,3 +12,6 @@ com.graphaware.module.NR.maxTopRankNodes=10\n\
com.graphaware.module.NR.dampingFactor=0.85\n\ com.graphaware.module.NR.dampingFactor=0.85\n\
com.graphaware.module.NR.propertyKey=nodeRank\n'\ com.graphaware.module.NR.propertyKey=nodeRank\n'\
>> /var/lib/neo4j/conf/neo4j.conf >> /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

BIN
app/assets/images/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

187
app/assets/stylesheets/application.scss
Unescape View File

@ -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 { .no-list {
list-style: none; list-style: none;
@ -415,6 +229,7 @@ body {
} }
} }
@import 'forms';
@import 'accounts'; @import 'accounts';
@import 'stream_entries'; @import 'stream_entries';
@import 'components'; @import 'components';

182
app/assets/stylesheets/forms.scss
Unescape View 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;
}
}
}

9
app/controllers/xrd_controller.rb
Unescape View File

@ -1,5 +1,6 @@
class XrdController < ApplicationController 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 def host_meta
@webfinger_template = "#{webfinger_url}?resource={uri}" @webfinger_template = "#{webfinger_url}?resource={uri}"
@ -24,7 +25,11 @@ class XrdController < ApplicationController
private 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? request.format = 'json' if request.headers["HTTP_ACCEPT"].nil? && params[:format].nil?
end end

10
app/views/auth/confirmations/new.html.haml
Unescape View File

@ -1,12 +1,12 @@
- content_for :page_title do - content_for :page_title do
Confirmation instructions Confirmation instructions
= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| = simple_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
= devise_error_messages! = 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 .actions
= f.button "Resend confirmation instructions", type: 'submit' = f.button :button, "Resend confirmation instructions", type: :submit
.form-footer= render "auth/shared/links" .form-footer= render "auth/shared/links"

19
app/views/auth/passwords/edit.html.haml
Unescape View File

@ -1,15 +1,14 @@
- content_for :page_title do - content_for :page_title do
Set new password Set new password
= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| = simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
= devise_error_messages! = render 'shared/error_messages', object: resource
= f.hidden_field :reset_password_token = f.input :reset_password_token, as: :hidden
.field = f.input :password, autofocus: true, autocomplete: "off", placeholder: 'New password'
= f.password_field :password, autofocus: true, autocomplete: "off", placeholder: 'New password' = f.input :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
.field
= f.password_field :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
.actions .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"

10
app/views/auth/passwords/new.html.haml
Unescape View File

@ -1,12 +1,12 @@
- content_for :page_title do - content_for :page_title do
Reset password Reset password
= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| = simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
= devise_error_messages! = 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 .actions
= f.button "Reset password", type: 'submit' = f.button :button, "Reset password", type: :submit
.form-footer= render "auth/shared/links" .form-footer= render "auth/shared/links"

18
app/views/auth/registrations/edit.html.haml
Unescape View File

@ -1,19 +1,15 @@
- content_for :page_title do - content_for :page_title do
Change password Change password
= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| = simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f|
= devise_error_messages! = render 'shared/error_messages', object: resource
.field = f.input :email, placeholder: 'E-mail address'
= f.email_field :email, placeholder: 'E-mail address' = f.input :password, autocomplete: "off", placeholder: 'New password'
.field = f.input :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
= f.password_field :password, autocomplete: "off", placeholder: 'New password' = f.input :current_password, autocomplete: "off", placeholder: 'Current password'
.field
= f.password_field :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
.field
= f.password_field :current_password, autocomplete: "off", placeholder: 'Current password'
.actions .actions
= f.button "Save changes", type: 'submit' = f.button :button, "Save changes", type: :submit
.form-footer= render "settings/shared/links" .form-footer= render "settings/shared/links"

21
app/views/auth/registrations/new.html.haml
Unescape View File

@ -1,20 +1,17 @@
- content_for :page_title do - content_for :page_title do
Sign up Sign up
= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| = simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
= devise_error_messages! = render 'shared/error_messages', object: resource
= f.fields_for :account do |ff| = f.simple_fields_for :account do |ff|
.field = ff.input :username, autofocus: true, placeholder: 'Username', required: true
= ff.text_field :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 .actions
= f.button "Sign up", type: 'submit' = f.button :button, "Sign up", type: :submit
.form-footer= render "auth/shared/links" .form-footer= render "auth/shared/links"

11
app/views/auth/sessions/new.html.haml
Unescape View File

@ -1,12 +1,11 @@
- content_for :page_title do - content_for :page_title do
Log in Log in
= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| = simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
.field = f.input :email, autofocus: true, placeholder: 'E-mail address', required: true
= f.email_field :email, autofocus: true, placeholder: 'E-mail address', required: true = f.input :password, placeholder: 'Password', required: true
.field
= f.password_field :password, autocomplete: "off", placeholder: 'Password', required: true
.actions .actions
= f.button "Log in", type: 'submit' = f.button :button, "Log in", type: :submit
.form-footer= render "auth/shared/links" .form-footer= render "auth/shared/links"

7
app/views/layouts/auth.html.haml
Unescape View File

@ -4,14 +4,15 @@
%h1 %h1
= link_to root_path do = link_to root_path do
= image_tag 'logo.png' = image_tag 'logo.png'
%small= Rails.configuration.x.local_domain
.form-container .form-container
- if flash[:notice] - if flash[:notice]
.flash-message.notice= flash[:notice] .flash-message.notice
%strong= flash[:notice]
- if flash[:alert] - if flash[:alert]
.flash-message.alert= flash[:alert] .flash-message.alert
%strong= flash[:alert]
= yield = yield

24
app/views/settings/preferences/show.html.haml
Unescape View File

@ -1,22 +1,16 @@
- content_for :page_title do - content_for :page_title do
Preferences Preferences
= form_for current_user, url: settings_preferences_path, html: { method: :put } do |f| = simple_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| = render 'shared/error_messages', object: current_user
.boolean-field
= ff.check_box :follow = f.simple_fields_for :notification_emails, current_user.settings(:notification_emails) do |ff|
= ff.label :follow, 'Send e-mail when someone follows you' = ff.input :follow, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone follows you'
.boolean-field = ff.input :reblog, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone reblogs your status'
= ff.check_box :reblog = ff.input :favourite, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone favourites your status'
= ff.label :reblog, 'Send e-mail when someone reblogs your status' = ff.input :mention, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone mentions you'
.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'
.actions .actions
= f.button 'Save changes', type: :submit = f.button :button, 'Save changes', type: :submit
.form-footer= render "settings/shared/links" .form-footer= render "settings/shared/links"

20
app/views/settings/profiles/show.html.haml
Unescape View File

@ -1,19 +1,15 @@
- content_for :page_title do - content_for :page_title do
Edit profile Edit profile
= form_for @account, url: settings_profile_path, html: { method: :put } do |f| = simple_form_for @account, url: settings_profile_path, html: { method: :put } do |f|
.field = render 'shared/error_messages', object: @account
= f.text_field :display_name, placeholder: 'Display name'
.field = f.input :display_name, placeholder: 'Display name'
= f.text_area :note, placeholder: 'Bio' = f.input :note, placeholder: 'Bio'
.file-field = f.input :avatar, wrapper: :with_label
= f.label :avatar = f.input :header, wrapper: :with_label
= f.file_field :avatar
.file-field
= f.label :header
= f.file_field :header
.actions .actions
= f.button 'Save changes', type: :submit = f.button :button, 'Save changes', type: :submit
.form-footer= render "settings/shared/links" .form-footer= render "settings/shared/links"

6
app/views/shared/_error_messages.html.haml
Unescape View 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:

10
config/initializers/simple_form.rb
Unescape View File

@ -40,7 +40,7 @@ SimpleForm.setup do |config|
b.optional :readonly b.optional :readonly
## Inputs ## Inputs
b.use :label_input b.use :input
b.use :hint, wrap_with: { tag: :span, class: :hint } b.use :hint, wrap_with: { tag: :span, class: :hint }
b.use :error, wrap_with: { tag: :span, class: :error } 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 } # b.use :full_error, wrap_with: { tag: :span, class: :error }
end 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. # The default wrapper to be used by the FormBuilder.
config.default_wrapper = :default config.default_wrapper = :default

Write Preview
Loading…
Cancel
Save