Improve help UI page

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/pages/ui_dev_kit.scss

@@ -3,4 +3,15 @@
     margin: 35px 0 20px;
     font-weight: bold;
   }
+
+  .example {
+    &:before {
+      content: "Example";
+      color: #BBB;
+    }
+
+    padding: 15px;
+    border: 1px dashed #ddd;
+    margin-bottom: 15px;
+  }
 }

app/views/help/ui.html.haml

@@ -31,10 +31,25 @@
 
   %h2#blocks Blocks
 
-  %h4
+  .lead
+    Content block separated with botton border
+    %code .content-block
+
+  .example
+    .content-block
+      %h4 Normal block inside content
+      = lorem
+
+    .content-block
+      %h4 Second block
+      = lorem
+
+  .lead
+    Gray content block with side padding using
     %code .gray-content-block
 
-  .gray-content-block.middle-block
+  .example
+    .gray-content-block
       %h4 Normal block inside content
       = lorem
 
@@ -43,9 +58,10 @@
       = lorem
 
 
-  %h4
+  .lead
+    Cover block for profile page with avatar, name and description
     %code .cover-block
-  %br
+  .example
     .cover-block
       .avatar-holder
         = image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: ''
@@ -68,6 +84,7 @@
     Simple list using
     %code .content-list
 
+  .example
     %ul.content-list
       %li
         One item
@@ -80,6 +97,7 @@
     List with avatar, title and description using
     %code .content-list
 
+  .example
     %ul.content-list
       %li
         = image_tag 'no_avatar.png', class: 'avatar s40'
@@ -94,8 +112,10 @@
         .title Title
         .description Description
 
-  %h4
+  .lead
+    List with hover effect
     %code .well-list
+  .example
     %ul.well-list
       %li
         One item
@@ -104,9 +124,9 @@
       %li
         One item
 
-  %h4
-    %code .panel .well-list
-
+  .lead
+    List inside panel
+  .example
     .panel.panel-default
       .panel-heading Your list
       %ul.well-list
@@ -117,18 +137,6 @@
         %li
           One item
 
-  %h4
-    %code .bordered-list
-  %ul.bordered-list
-    %li
-      One item
-    %li
-      One item
-    %li
-      One item
-
-
-
   %h2#tables Tables
 
   .example
@@ -158,9 +166,9 @@
 
   %h2#navs Navigation
 
-  %h4
+  .lead
+    Holder for top page navigation. Includes navigation, search field, sorting and button
     %code .top-area
-  %p Holder for top page navigation. Includes navigation, search field, sorting and button
 
   .example
     .top-area
@@ -181,9 +189,9 @@
 
         = link_to 'New issue', '#', class: 'btn btn-new'
 
-  %h4
+  .lead
+    Only nav links without button and search
     %code .nav-links
-  %p Only nav links without button and search
   .example
     %ul.nav-links
       %li.active
@@ -248,9 +256,11 @@
 
   %h2#forms Forms
 
-  %h4
+  .lead
+    Horizontal form when label rendered inline with input
     %code form.horizontal-form
 
+  .example
     %form.form-horizontal
       .form-group
         %label.col-sm-2.control-label{:for => "inputEmail3"} Email
@@ -270,9 +280,11 @@
         .col-sm-offset-2.col-sm-10
           %button.btn.btn-default{:type => "submit"} Sign in
 
-  %h4
+  .lead
+    Form when label rendered above input
     %code form
 
+  .example
     %form
       .form-group
         %label{:for => "exampleInputEmail1"} Email address