lab2023#28 Create forms page

- Many form variations were added.
frralf · Aug 11, 2013 · 13f8847 · 13f8847
1 parent 7173671
commit 13f8847
Show file tree

Hide file tree

Showing 4 changed files with 175 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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&mdash;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&mdash;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
diff --git 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