On 08/14/2012 07:15 PM, Matt Wagner wrote:
On Tue, Aug 14, 2012 at 05:32:19PM +0200, Jaromír Coufal wrote:
One more "hello" :)
another thing I have designed is a layout and behavior of forms - you
can check it here:
http://codepen.io/coufalj/pen/qiEkH
Still working on responsive, but it is not that important in this
stage. What do you think about this concept of forms used across our
whole application?
Hi Jarda,
Looks good, as usual!
A few nits, though I think they're largely personal opinion:
- I think the "?" for tooltips should be closer to the input. Maybe on
the other side of the label? Or maybe on the right of the input? It's
just where I would look for it.
- While using a "*" to mark required inputs has a lot of precedent, it's
also sometimes used to denote fine print or a footnote. Would it be
clearer if we used bold text for required fields, maybe?
I wonder about the markup, though. Will a developer building a form need
to deal with creating a .control_group that contains a .left_column and a
.right_column? It seems like this could be error-prone. Or will the form
library we discussed automate this?
I played with simple_form to get an idea of how difficult the markup is
to implement.
Step 1: Created a new wrapper. You can find the code here:
https://gist.github.com/bf366db929ee55af7e82
Step 2: Created a new simple_form component for other fields e.g.
'note': https://gist.github.com/3358420
Step 3: Change the default wrapper for simple_form in the initializer:
config.default_wrapper = :conductor
After these steps, implementing a form is pretty easy:
= simple_form_for(@post) do |f|
= f.input :title, :placeholder => 'placeholder',
:hint => 'hint',
:note => 'note'
The added benefit of simple_form is that you will automatically get the
require/optional class for the inputs for free based on the validations
of the model (You can override them via options if necessary). The same
applies for the maxlength attribute of the input field. Developers won't
need to implement the markup Jarda created, but using a simple api call
would do the magic.
Imre
The Date input does not work in my browser.
Overall, this is great, though. It looks both aesthetically pleasing and
intuitive.
-- Matt
