gitlab-org--gitlab-foss/app/views/help/ui.html.haml

- 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')
       
      = 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")}.