Improved style of settings page

This commit is contained in:
Eugen Rochko 2016-09-25 15:48:20 +02:00
parent e9bc4a4a08
commit 693383234c
4 changed files with 35 additions and 13 deletions

View File

@ -34,8 +34,8 @@ const ActionBar = React.createClass({
} }
return ( return (
<div style={{ borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', padding: '10px', lineHeight: '36px' }}> <div style={{ borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', padding: '10px', lineHeight: '36px', overflow: 'hidden', flex: '0 0 auto' }}>
{actionButton} <span style={{ color: '#616b86', fontWeight: '500', textTransform: 'uppercase' }}>{infoText}</span> {actionButton} <span style={{ color: '#616b86', fontWeight: '500', textTransform: 'uppercase', float: 'right', display: 'block' }}>{infoText}</span>
</div> </div>
); );
}, },

View File

@ -127,7 +127,23 @@ body {
margin-bottom: 15px; margin-bottom: 15px;
} }
input[type=text], input[type=email], input[type=password] { .file-field {
padding: 15px 0;
label {
font-family: 'Roboto';
font-size: 16px;
color: #fff;
width: 100px;
display: inline-block;
}
input[type=file] {
width: 280px;
}
}
input[type=text], input[type=email], input[type=password], textarea {
background: transparent; background: transparent;
border: 0; border: 0;
border-bottom: 2px solid #9baec8; border-bottom: 2px solid #9baec8;
@ -137,6 +153,7 @@ body {
display: block; display: block;
width: 100%; width: 100%;
outline: 0; outline: 0;
font-family: 'Roboto';
&:invalid { &:invalid {
box-shadow: none; box-shadow: none;

View File

@ -1,4 +1,6 @@
class SettingsController < ApplicationController class SettingsController < ApplicationController
layout 'auth'
before_action :authenticate_user! before_action :authenticate_user!
before_action :set_account before_action :set_account

View File

@ -1,14 +1,17 @@
- content_for :page_title do - content_for :page_title do
Edit profile Edit profile
= simple_form_for @account, url: settings_path, method: :put do |f| = form_for @account, url: settings_path, html: { method: :put } do |f|
= f.error_notification .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
.form-inputs .actions
= f.input :display_name = f.button 'Save changes', type: :submit
= f.input :note
= f.input :avatar
= f.input :header
.form-actions
= f.button :submit, 'Save changes'