@ -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 | - 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| | |||||
= 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 | .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" |
@ -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| | |||||
= 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 | .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 | - 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| | |||||
= 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 | .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" |
@ -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| | |||||
= 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 | .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" |
@ -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| | |||||
= 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 | .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" |
@ -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| | |||||
.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 | .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" |
@ -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| | |||||
= 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 | .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" |
@ -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| | |||||
.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 | .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" |
@ -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: |