diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 788352b..b951e4c 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -16,3 +16,6 @@ *= require_self *= require purecss */ +body { + padding: 30px; +} diff --git a/app/assets/stylesheets/forms.css.scss b/app/assets/stylesheets/forms.css.scss new file mode 100644 index 0000000..5a6d32d --- /dev/null +++ b/app/assets/stylesheets/forms.css.scss @@ -0,0 +1,22 @@ +.error_panel { + margin-bottom: 1em; + border-radius: 3px; + border: 1px solid #ebccd1; + .error_header { + .error_title { + font-size: 16px; + margin-top: 0; + margin-bottom: 0; + } + padding: 10px 15px; + color: #a94442; + background-color: #f2dede; + } + .error_body { + padding: 15px; + ul { + margin-bottom: 0px; + margin-top: 0px; + } + } +} diff --git a/app/assets/stylesheets/purecss.css b/app/assets/stylesheets/purecss.css index a8615b6..f6647f5 100644 --- a/app/assets/stylesheets/purecss.css +++ b/app/assets/stylesheets/purecss.css @@ -7,3 +7,39 @@ =require purecss/menus =require purecss/tables */ + +/* Alerts */ +.pure-alert { + position: relative; + margin-bottom: 1em; + padding: 1em; + background: #ccc; + border-radius: 3px; +} + +.pure-alert label { + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + *zoom: 1; + white-space: nowrap; +} + +.pure-alert { + background-color: rgb(209, 235, 238); + color: rgb(102, 131, 145); +} +.pure-alert-error { + background-color: #D13C38; + color: #fff; +} + +.pure-alert-warning { + background-color: rgb(250, 191, 103); + color: rgb(151, 96, 13); +} + +.pure-alert-success { + background-color: rgb(83, 180, 79); + color: #fff; +} diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 20d7dea..716c9b4 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -8,6 +8,6 @@ = csrf_meta_tags %body - flash.each do |key, value| - .alert{ :class => "alert-#{key}" } + .pure-alert{ class: "pure-alert-#{key}" } = value = yield diff --git a/app/views/partials/_form_errors.html.haml b/app/views/partials/_form_errors.html.haml new file mode 100644 index 0000000..46a401d --- /dev/null +++ b/app/views/partials/_form_errors.html.haml @@ -0,0 +1,10 @@ +- if object.errors.any? + .error_panel + .error_header + %h3.error_title + This transaction could not be saved. + .error_body + %ul + - object.errors.full_messages.each do |tr| + %li + = tr diff --git a/app/views/transactions/new.html.haml b/app/views/transactions/new.html.haml index 35defe4..742a465 100644 --- a/app/views/transactions/new.html.haml +++ b/app/views/transactions/new.html.haml @@ -1,7 +1,8 @@ -= @transaction.errors.full_messages.join(", ") += render 'partials/form_errors', object: @transaction = simple_form_for @transaction do |f| = f.hidden_field :debtor, value: current_user.name = f.collection_select :creditor, User.all, :name, :name, {}, { class: 'select2-selector' } = f.input :amount = f.input :message, required: true - = f.submit "Send it!" + .pure-controls + = f.button :submit, "Send it!" diff --git a/config/initializers/simple_form.rb b/config/initializers/simple_form.rb index 934487a..bdf2171 100644 --- a/config/initializers/simple_form.rb +++ b/config/initializers/simple_form.rb @@ -5,7 +5,7 @@ SimpleForm.setup do |config| # wrapper, change the order or even add your own to the # stack. The options given below are used to wrap the # whole input. - config.wrappers :default, class: :input, + config.wrappers :default, class: "input pure-control-group", hint_class: :field_with_hint, error_class: :field_with_errors do |b| ## Extensions enabled by default # Any of these extensions can be disabled for a @@ -61,7 +61,7 @@ SimpleForm.setup do |config| config.boolean_style = :nested # Default class for buttons - config.button_class = 'btn' + config.button_class = 'pure-button pure-button-primary' # Method used to tidy up errors. Specify any Rails Array method. # :first lists the first message for each field. @@ -104,7 +104,7 @@ SimpleForm.setup do |config| # You can define the default class to be used on forms. Can be overriden # with `html: { :class }`. Defaulting to none. - # config.default_form_class = nil + config.default_form_class = "pure-form" # You can define which elements should obtain additional classes # config.generate_additional_classes_for = [:wrapper, :label, :input] diff --git a/lib/templates/haml/scaffold/_form.html.haml b/lib/templates/haml/scaffold/_form.html.haml index ac3aa7b..705b47a 100644 --- a/lib/templates/haml/scaffold/_form.html.haml +++ b/lib/templates/haml/scaffold/_form.html.haml @@ -6,5 +6,5 @@ = f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %> <%- end -%> - .form-actions + .pure-controlls = f.button :submit