BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit f930cf84 by Dmitriy Zaporozhets
Options

Merge branch 'dev-ui' into 'master'

GitLab UI development kit and UI guide help section Page with UI elements get generated from current css so you can immediately check how your css changes affects common ui elements. Because it requires GitLab runnning I cannot put it to documentation so I just put link to localhost from development section cc @developers @sabba @sytse See merge request !1653
parents a3e18d87 f3d78ee3
Showing with 246 additions and 15 deletions
app/assets/stylesheets/generic/markdown_area.scss
......@@ -77,3 +77,13 @@
}
}
}
.markdown-area {
background: #FFF;
border: 1px solid #ddd;
min-height: 100px;
padding: 5px;
font-size: 14px;
box-shadow: none;
width: 100%;
}
app/assets/stylesheets/pages/markdown_area.scss deleted 100644 → 0
.markdown-area {
background: #FFF;
border: 1px solid #ddd;
min-height: 100px;
padding: 5px;
font-size: 14px;
box-shadow: none;
width: 100%;
}
app/assets/stylesheets/pages/ui_dev_kit.scss 0 → 100644
.gitlab-ui-dev-kit {
> h2 {
font-size: 27px;
border-bottom: 1px solid #CCC;
color: #666;
margin: 30px 0;
font-weight: bold;
}
}
app/controllers/help_controller.rb
......@@ -15,4 +15,7 @@ class HelpController < ApplicationController
def shortcuts
end
def ui
end
end
app/views/help/ui.html.haml 0 → 100644
- 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 'Buttons', '#buttons'
%li
= link_to 'Panels', '#panels'
%li
= link_to 'Alerts', '#alerts'
%li
= link_to 'Forms', '#forms'
%li
= link_to 'Markdown', '#markdown'
%h2#blocks Blocks
%h3
%code .well
.well
%h4 Something
= lorem
%h2#lists Lists
%h3
%code .well-list
%ul.well-list
%li
One item
%li
One item
%li
One item
%h3
%code .panel .well-list
.panel.panel-default
.panel-heading My list
%ul.well-list
%li
One item
%li
One item
%li
One item
%h3
%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#buttons Buttons
.example
%button.btn.btn-default{:type => "button"} Default
%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
%h3
%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
%h3
%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#markdown Markdown
%h3
%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")}.
config/routes.rb
......@@ -7,9 +7,8 @@ Gitlab::Application.routes.draw do
authorized_applications: 'oauth/authorized_applications',
authorizations: 'oauth/authorizations'
end
#
# Search
#
get 'search' => 'search#show'
get 'search/autocomplete' => 'search#autocomplete', as: :search_autocomplete
......@@ -33,13 +32,11 @@ Gitlab::Application.routes.draw do
receive_pack: Gitlab.config.gitlab_shell.receive_pack
}), at: '/', constraints: lambda { |request| /[-\/\w\.]+\.git\//.match(request.path_info) }, via: [:get, :post]
#
# Help
#
get 'help' => 'help#index'
get 'help/:category/:file' => 'help#show', as: :help_page
get 'help/shortcuts'
get 'help/ui' => 'help#ui'
#
# Global snippets
......@@ -73,7 +70,7 @@ Gitlab::Application.routes.draw do
get :callback
get :jobs
end
resource :gitorious, only: [:create, :new], controller: :gitorious do
get :status
get :callback
......
doc/development/README.md
......@@ -5,3 +5,4 @@
- [Rake tasks](rake_tasks.md) for development
- [CI setup](ci_setup.md) for testing GitLab
- [Sidekiq debugging](sidekiq_debugging.md)
- [UI guide](ui_guide.md) for building GitLab with existing css styles and elements
doc/development/ui_guide.md 0 → 100644
# UI Guide for building GitLab
## Best practices for creating new pages in GitLab
TODO: write some best practices when develop GitLab features.
## GitLab UI development kit
We created a page inside GitLab where you can check commonly used html and css elements.
When you run GitLab instance locally - just visit http://localhost:3000/help/ui page to see UI examples
you can use during GitLab development.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment