kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch 'dev-ui' into 'master'

Browse source 
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
This commit is contained in:
Dmitriy Zaporozhets 2015-03-08 23:18:32 +00:00
commit f930cf8461
8 changed files with 246 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/stylesheets/generic/markdown_area.scss
View file

@ -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%;
}

9
app/assets/stylesheets/pages/markdown_area.scss
View file

@ -1,9 +0,0 @@
.markdown-area {
background: #FFF;
border: 1px solid #ddd;
min-height: 100px;
padding: 5px;
font-size: 14px;
box-shadow: none;
width: 100%;
}

9
app/assets/stylesheets/pages/ui_dev_kit.scss Normal file
View file

@ -0,0 +1,9 @@
.gitlab-ui-dev-kit {
> h2 {
font-size: 27px;
border-bottom: 1px solid #CCC;
color: #666;
margin: 30px 0;
font-weight: bold;
}
}

3
app/controllers/help_controller.rb
View file

@ -15,4 +15,7 @@ class HelpController < ApplicationController
def shortcuts
end
def ui
end
end

208
app/views/help/ui.html.haml Normal file
View file

@ -0,0 +1,208 @@
- 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")}.

9
config/routes.rb
View file

@ -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

1
doc/development/README.md
View file

@ -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

12
doc/development/ui_guide.md Normal file
View file

@ -0,0 +1,12 @@
# 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.