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