From 13f8847ca000d1dcefc65e6a35134f9a6214f096 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sun, 11 Aug 2013 14:05:52 +0300 Subject: [PATCH] #28 Create forms page - Many form variations were added. --- .../stylesheets/_bootstrap_overrides.css.sass | 5 +- .../assets/stylesheets/application.css.sass | 14 +- source/forms.html.haml | 179 ++++++++++++++++-- source/partials/_breadcrumb.haml | 2 +- 4 files changed, 175 insertions(+), 25 deletions(-) diff --git a/source/assets/stylesheets/_bootstrap_overrides.css.sass b/source/assets/stylesheets/_bootstrap_overrides.css.sass index 45aba60..6d7d72c 100755 --- a/source/assets/stylesheets/_bootstrap_overrides.css.sass +++ b/source/assets/stylesheets/_bootstrap_overrides.css.sass @@ -56,6 +56,5 @@ .btn padding: 6px 12px -// Forms -.form-control - height: 34px +.radio, .checkbox + margin-top: 0 diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 0537b33..1d4c21e 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -12,6 +12,16 @@ body.main .sprite-image background-image: url(../images/sprite.png) +form + .form-actions + background-color: lighten($panel-heading-bg, 3) + margin: 15px -15px -15px + padding: 15px + +border-bottom-left-radius(4px) + +border-bottom-right-radius(4px) + a.btn:hover + color: lighten($base-color, 10) + #navbar .navbar-brand font-size: $brand-font-size @@ -140,10 +150,12 @@ body.main margin-left: 80px #breadcrumb - font-weight: 800 +border-radius(0) padding: 15px 20px 15px 20px border-bottom: 1px solid #ddd + .title + font-weight: 800 + color: $base-color #toolbar margin-top: -70px diff --git a/source/forms.html.haml b/source/forms.html.haml index 4569a21..03abf9c 100755 --- a/source/forms.html.haml +++ b/source/forms.html.haml @@ -7,20 +7,133 @@ .panel-body %form + %fieldset - %legend Legend + %legend Default Inputs + .form-group - %label{:for => "exampleInputEmail"} Email address - %input#exampleInputEmail.form-control{:placeholder => "Enter email", :type => "text"}/ - .form-group.has-error - %label{:for => "exampleInputPassword"} Password - %input#exampleInputPassword.form-control{:placeholder => "Password", :type => "password"}/ + %label.control-label Text field + %input.form-control{placeholder: 'Enter username', type: 'text'}/ + + .form-group + %label.control-label Password field + %input.form-control{placeholder: 'Enter password', type: 'password'}/ + + .form-group + %label.control-label Input field with help + %input.form-control{placeholder: '.help-block'}/ %p.help-block Example block-level help text here. + + .form-group + %label.control-label Disabled field + %input.form-control{placeholder: 'This is field is disabled!', disabled: true}/ + + .form-group + %label.control-label Tooltip field + %input.form-control{data: {toggle: 'tooltip'}, title: 'Input tips here', placeholder: 'This is field is disabled!'}/ + + .form-group + %label.control-label Textarea field + %textarea.form-control{rows: 4} + .form-group - %label{:for => "exampleInputFile"} File input - %input#exampleInputFile{:type => "file"}/ + %label.control-label File input + %input{type: 'file'} + + .form-group + %label.control-label Large field + %input.form-control.input-lg{type: 'text', placeholder: '.input-lg'}/ + + .form-group + %label.control-label Small field + %input.form-control.input-sm{type: 'text', placeholder: '.input-sm'}/ + + .form-group.row + .col-lg-2 + %label.control-label Column sizing + %input.form-control{type: 'text', placeholder: '.col-lg-2'}/ + .col-lg-3 + %label.control-label Column sizing + %input.form-control{type: 'text', placeholder: '.col-lg-3'}/ + .col-lg-7 + %label.control-label Column sizing + %input.form-control{type: 'text', placeholder: '.col-lg-7'}/ + + %fieldset + %legend Input Validation States + + .form-group.has-warning + %label.control-label Input field with help + %input.form-control{placeholder: '.has-warning'}/ + %p.help-block Example block-level help text here. + + .form-group.has-error + %label.control-label Input field with help + %input.form-control{placeholder: '.has-error'}/ + %p.help-block Example block-level help text here. + + .form-group.has-success + %label.control-label Input field with help + %input.form-control{placeholder: '.has-success'}/ %p.help-block Example block-level help text here. - %button.btn.btn-default{:type => "submit"} Submit + + %fieldset + %legend Checkboxes and radios + + .form-group + %label.control-label Checkbox + .checkbox + %input{type: 'checkbox', value: ''}/ + Option one is this and that—be sure to include why it's great + + .form-group + %label.control-label Inline checkbox + %br/ + .checkbox-inline + %input{type: 'checkbox', value: ''}/ + 1 + .checkbox-inline + %input{type: 'checkbox', value: ''}/ + 2 + .checkbox-inline + %input{type: 'checkbox', value: ''}/ + 3 + + .form-group + %label.control-label Radio + .radio + %input{type: 'radio', name:'options_radio', value: 'option1', checked: true} + Option one is this and that—be sure to include why it's great + + %br/ + + %input{type: 'radio', name:'options_radio', value: 'option2', checked: true} + Option two can be something else and selecting it will deselect option one + + %fieldset + %legend Selects + + .form-group + %label.control-label Single select + %select.form-control + %option 1 + %option 2 + %option 3 + %option 4 + %option 5 + + .form-group + %label.control-label Multiple select + %select.form-control{multiple: true} + %option 1 + %option 2 + %option 3 + %option 4 + %option 5 + + .form-actions + %button.btn.btn-default{:type => 'submit'} Submit + %a.btn{href: '#'} Cancel .panel .panel-heading @@ -30,17 +143,43 @@ %form.form-horizontal - .form-group.has-warning - %label.col-lg-2.control-label{for: 'inputEmail'} Email - .col-lg-10 - %input#inputEmail.form-control{placeholder: 'Email', type: 'text'}/ + %fieldset + %legend Default inputs - .form-group.has-error - %label.col-lg-2.control-label{for: 'inputPassword'} Password - .col-lg-10 - %input#inputPassword.form-control{placeholder: 'Password', type: 'password'}/ + .form-group + %label.col-lg-2.control-label Text field + .col-lg-10 + %input.form-control{placeholder: 'Enter username', type: 'text'}/ + + .form-group + %label.col-lg-2.control-label Password field + .col-lg-10 + %input.form-control{placeholder: 'Enter password', type: 'password'}/ + + .form-group + %label.col-lg-2.control-label Input field with help + .col-lg-10 + %input.form-control{placeholder: '.help-block'}/ + %p.help-block Example block-level help text here.%fieldset + + %legend Validation inputs + + .form-group.has-warning + %label.col-lg-2.control-label Text field + .col-lg-10 + %input.form-control{placeholder: 'Enter username', type: 'text'}/ + + .form-group.has-error + %label.col-lg-2.control-label Password field + .col-lg-10 + %input.form-control{placeholder: 'Enter password', type: 'password'}/ - .form-group - .col-lg-12 - %button.btn.btn-default{type: 'submit'} Sign in + .form-group.has-success + %label.col-lg-2.control-label Input field with help + .col-lg-10 + %input.form-control{placeholder: '.help-block'}/ + %p.help-block Example block-level help text here. + .form-actions + %button.btn.btn-default{:type => 'submit'} Save + %a.btn{href: '#'} Cancel \ No newline at end of file diff --git a/source/partials/_breadcrumb.haml b/source/partials/_breadcrumb.haml index bc520d2..e4b31e9 100755 --- a/source/partials/_breadcrumb.haml +++ b/source/partials/_breadcrumb.haml @@ -1,3 +1,3 @@ %ul#breadcrumb.breadcrumb - %li Dashboard + %li.title Dashboard %li.active Reports \ No newline at end of file