gitlab-org--gitlab-foss/app/views/help/ui.html.haml
Dmitriy Zaporozhets 092e093b2c
Small css cleanup and ui dev kit improvements
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
2015-12-02 14:42:43 +01:00

290 lines
5.9 KiB
Text

- page_title "UI Development Kit", "Help"
- lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum nisi sapien, non consequat lectus aliquam ultrices. Suspendisse sodales est euismod nunc condimentum, a consectetur diam ornare."
.gitlab-ui-dev-kit
%h1 GitLab UI development kit
%p.light
Use page inspector in your browser to check element classes and structure
of examples below.
%hr
%ul
%li
= link_to 'Blocks', '#blocks'
%li
= link_to 'Lists', '#lists'
%li
= link_to 'Tables', '#tables'
%li
= link_to 'Nav', '#nav'
%li
= link_to 'Buttons', '#buttons'
%li
= link_to 'Panels', '#panels'
%li
= link_to 'Alerts', '#alerts'
%li
= link_to 'Forms', '#forms'
%li
= link_to 'Files', '#file'
%li
= link_to 'Markdown', '#markdown'
%h2#blocks Blocks
%h4
%code .gray-content-block
.gray-content-block.middle-block
%h4 Normal block inside content
= lorem
.gray-content-block.second-block
%h4 Second block
= lorem
%h4
%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
.cover-controls
= link_to '#', class: 'btn btn-gray' do
= icon('pencil')
&nbsp;
= link_to '#', class: 'btn btn-gray' do
= icon('rss')
%h2#lists Lists
%h4
%code .content-list
%ul.content-list
%li
One item
%li
One item
%li
One item
%h4
%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
%ul.well-list
%li
One item
%li
One item
%li
One item
%h4
%code .bordered-list
%ul.bordered-list
%li
One item
%li
One item
%li
One item
%h2#tables Tables
.example
%table.table
%thead
%tr
%th #
%th First Name
%th Last Name
%th Username
%tbody
%tr
%td 1
%td Mark
%td Otto
%td @mdo
%tr
%td 2
%td Jacob
%td Thornton
%td @fat
%tr
%td 3
%td Larry
%td the Bird
%td @twitter
%h2#navs Navigation
%h4
%code .center-top-menu
.example
%ul.center-top-menu
%li.active
%a Open
%li
%a Closed
%h4
%code .btn-group.btn-group-next
.example
%div.btn-group.btn-group-next
%a.btn.active Open
%a.btn Closed
%h4
%code .nav.nav-tabs
.example
%ul.nav.nav-tabs
%li.active
%a Open
%li
%a Closed
%h2#buttons Buttons
.example
%button.btn.btn-default{:type => "button"} Default
%button.btn.btn-gray{:type => "button"} Gray
%button.btn.btn-primary{:type => "button"} Primary
%button.btn.btn-success{:type => "button"} Success
%button.btn.btn-info{:type => "button"} Info
%button.btn.btn-warning{:type => "button"} Warning
%button.btn.btn-danger{:type => "button"} Danger
%button.btn.btn-link{:type => "button"} Link
%h2#panels Panels
.row
.col-md-6
.panel.panel-success
.panel-heading Success
.panel-body
= lorem
.panel.panel-primary
.panel-heading Primary
.panel-body
= lorem
.panel.panel-info
.panel-heading Info
.panel-body
= lorem
.col-md-6
.panel.panel-warning
.panel-heading Warning
.panel-body
= lorem
.panel.panel-danger
.panel-heading Danger
.panel-body
= lorem
%h2#alert Alerts
.row
.col-md-6
.alert.alert-success
= lorem
.alert.alert-primary
= lorem
.alert.alert-info
= lorem
.col-md-6
.alert.alert-warning
= lorem
.alert.alert-danger
= lorem
%h2#forms Forms
%h4
%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
%h4
%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
%h2#file File
%h4
%code .file-holder
- blob = Snippet.new(content: "Wow\nSuch\nFile")
.example
.file-holder
.file-title
Awesome file
.file-actions
.btn-group
%a.btn Edit
%a.btn.btn-danger Remove
.file-contenta.code
= render 'shared/file_highlight', blob: blob
%h2#markdown Markdown
%h4
%code .md or .wiki and others
Markdown rendering has a bit different css and presented in next UI elements:
%ul
%li comment
%li issue, merge request description
%li wiki page
%li help page
You can check how markdown rendered at #{link_to 'Markdown help page', help_page_path("markdown", "markdown")}.