Add some styling

This commit is contained in:
benji 2015-09-09 17:06:39 +02:00
parent 18ccda6e6e
commit 1d6ab0f6eb
8 changed files with 79 additions and 7 deletions

View file

@ -16,3 +16,6 @@
*= require_self
*= require purecss
*/
body {
padding: 30px;
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -6,5 +6,5 @@
= f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %>
<%- end -%>
.form-actions
.pure-controlls
= f.button :submit