diff options
author | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2016-02-26 17:17:13 +0300 |
---|---|---|
committer | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2016-02-26 17:17:13 +0300 |
commit | 421aa858e1a4363d98ed4b45d37f7d91c7575746 (patch) | |
tree | 1c89d09a63fe08a94b0acc805bbc750335aaf97f | |
parent | 012ea64d0027c3c047448fd5992f0312dac1d525 (diff) |
Improve help UI page
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
-rw-r--r-- | app/assets/stylesheets/pages/ui_dev_kit.scss | 11 | ||||
-rw-r--r-- | app/views/help/ui.html.haml | 220 |
2 files changed, 127 insertions, 104 deletions
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss index 185f3622e64..05fa9312efb 100644 --- a/app/assets/stylesheets/pages/ui_dev_kit.scss +++ b/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; + } } diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml index f3f687eb6d9..a2c0a858930 100644 --- a/app/views/help/ui.html.haml +++ b/app/views/help/ui.html.haml @@ -31,36 +31,52 @@ %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 - %h4 Normal block inside content - = lorem + .example + .gray-content-block + %h4 Normal block inside content + = lorem - .gray-content-block.second-block - %h4 Second block - = lorem + .gray-content-block.second-block + %h4 Second block + = lorem - %h4 + .lead + Cover block for profile page with avatar, name and description %code .cover-block - %br - .cover-block - .avatar-holder - = image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: '' - .cover-title - John Smith - - .cover-desc - = lorem + .example + .cover-block + .avatar-holder + = image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: '' + .cover-title + John Smith - .cover-controls - = link_to '#', class: 'btn btn-gray' do - = icon('pencil') - - = link_to '#', class: 'btn btn-gray' do - = icon('rss') + .cover-desc + = lorem + + .cover-controls + = link_to '#', class: 'btn btn-gray' do + = icon('pencil') + + = link_to '#', class: 'btn btn-gray' do + = icon('rss') %h2#lists Lists @@ -68,47 +84,38 @@ Simple list using %code .content-list - %ul.content-list - %li - One item - %li - One item - %li - One item + .example + %ul.content-list + %li + One item + %li + One item + %li + One item .lead List with avatar, title and description using %code .content-list - %ul.content-list - %li - = image_tag 'no_avatar.png', class: 'avatar s40' - .title Title - .description Description - %li - = image_tag 'no_avatar.png', class: 'avatar s40' - .title Title - .description Description - %li - = image_tag 'no_avatar.png', class: 'avatar s40' - .title Title - .description Description + .example + %ul.content-list + %li + = image_tag 'no_avatar.png', class: 'avatar s40' + .title Title + .description Description + %li + = image_tag 'no_avatar.png', class: 'avatar s40' + .title Title + .description Description + %li + = image_tag 'no_avatar.png', class: 'avatar s40' + .title Title + .description Description - %h4 + .lead + List with hover effect %code .well-list - %ul.well-list - %li - One item - %li - One item - %li - One item - - %h4 - %code .panel .well-list - - .panel.panel-default - .panel-heading Your list + .example %ul.well-list %li One item @@ -117,17 +124,18 @@ %li One item - %h4 - %code .bordered-list - %ul.bordered-list - %li - One item - %li - One item - %li - One item - - + .lead + List inside panel + .example + .panel.panel-default + .panel-heading Your list + %ul.well-list + %li + One item + %li + One item + %li + One item %h2#tables Tables @@ -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,43 +256,47 @@ %h2#forms Forms - %h4 + .lead + Horizontal form when label rendered inline with input %code form.horizontal-form - %form.form-horizontal - .form-group - %label.col-sm-2.control-label{:for => "inputEmail3"} Email - .col-sm-10 - %input#inputEmail3.form-control{:placeholder => "Email", :type => "email"}/ - .form-group - %label.col-sm-2.control-label{:for => "inputPassword3"} Password - .col-sm-10 - %input#inputPassword3.form-control{:placeholder => "Password", :type => "password"}/ - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox - %label - %input{:type => "checkbox"}/ - Remember me - .form-group - .col-sm-offset-2.col-sm-10 - %button.btn.btn-default{:type => "submit"} Sign in + .example + %form.form-horizontal + .form-group + %label.col-sm-2.control-label{:for => "inputEmail3"} Email + .col-sm-10 + %input#inputEmail3.form-control{:placeholder => "Email", :type => "email"}/ + .form-group + %label.col-sm-2.control-label{:for => "inputPassword3"} Password + .col-sm-10 + %input#inputPassword3.form-control{:placeholder => "Password", :type => "password"}/ + .form-group + .col-sm-offset-2.col-sm-10 + .checkbox + %label + %input{:type => "checkbox"}/ + Remember me + .form-group + .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 - %form - .form-group - %label{:for => "exampleInputEmail1"} Email address - %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email"}/ - .form-group - %label{:for => "exampleInputPassword1"} Password - %input#exampleInputPassword1.form-control{:placeholder => "Password", :type => "password"}/ - .checkbox - %label - %input{:type => "checkbox"}/ - Remember me - %button.btn.btn-default{:type => "submit"} Sign in + .example + %form + .form-group + %label{:for => "exampleInputEmail1"} Email address + %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email"}/ + .form-group + %label{:for => "exampleInputPassword1"} Password + %input#exampleInputPassword1.form-control{:placeholder => "Password", :type => "password"}/ + .checkbox + %label + %input{:type => "checkbox"}/ + Remember me + %button.btn.btn-default{:type => "submit"} Sign in %h2#file File %h4 |