tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improving all forms

Browse Source
This commit is contained in:
Eugen Rochko
2016-10-18 16:37:15 +02:00
parent 6f7c9774c7
commit 43df35213e
16 changed files with 268 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Dockerfile.neo4j
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.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

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
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 {
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
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
View File

@@ -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

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

@@ -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"

17
app/views/auth/passwords/edit.html.haml
View File

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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

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

@@ -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"

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

@@ -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
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
View File

@@ -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