Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
iv
gitlab-ce
Commits
421aa858
Commit
421aa858
authored
Feb 26, 2016
by
Dmitriy Zaporozhets
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Improve help UI page
Signed-off-by:
Dmitriy Zaporozhets
<
dmitriy.zaporozhets@gmail.com
>
parent
012ea64d
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
127 additions
and
104 deletions
+127
-104
app/assets/stylesheets/pages/ui_dev_kit.scss
app/assets/stylesheets/pages/ui_dev_kit.scss
+11
-0
app/views/help/ui.html.haml
app/views/help/ui.html.haml
+116
-104
No files found.
app/assets/stylesheets/pages/ui_dev_kit.scss
View file @
421aa858
...
@@ -3,4 +3,15 @@
...
@@ -3,4 +3,15 @@
margin
:
35px
0
20px
;
margin
:
35px
0
20px
;
font-weight
:
bold
;
font-weight
:
bold
;
}
}
.example
{
&
:before
{
content
:
"Example"
;
color
:
#BBB
;
}
padding
:
15px
;
border
:
1px
dashed
#ddd
;
margin-bottom
:
15px
;
}
}
}
app/views/help/ui.html.haml
View file @
421aa858
...
@@ -31,36 +31,52 @@
...
@@ -31,36 +31,52 @@
%h2
#blocks
Blocks
%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
%code
.gray-content-block
.gray-content-block.middle-block
.example
%h4
Normal block inside content
.gray-content-block
=
lorem
%h4
Normal block inside content
=
lorem
.gray-content-block.second-block
.gray-content-block.second-block
%h4
Second block
%h4
Second block
=
lorem
=
lorem
%h4
.lead
Cover block for profile page with avatar, name and description
%code
.cover-block
%code
.cover-block
%br
.example
.cover-block
.cover-block
.avatar-holder
.avatar-holder
=
image_tag
avatar_icon
(
'admin@example.com'
,
90
),
class:
"avatar s90"
,
alt:
''
=
image_tag
avatar_icon
(
'admin@example.com'
,
90
),
class:
"avatar s90"
,
alt:
''
.cover-title
.cover-title
John Smith
John Smith
.cover-desc
=
lorem
.cover-controls
.cover-desc
=
link_to
'#'
,
class:
'btn btn-gray'
do
=
lorem
=
icon
(
'pencil'
)
.cover-controls
=
link_to
'#'
,
class:
'btn btn-gray'
do
=
link_to
'#'
,
class:
'btn btn-gray'
do
=
icon
(
'rss'
)
=
icon
(
'pencil'
)
=
link_to
'#'
,
class:
'btn btn-gray'
do
=
icon
(
'rss'
)
%h2
#lists
Lists
%h2
#lists
Lists
...
@@ -68,47 +84,38 @@
...
@@ -68,47 +84,38 @@
Simple list using
Simple list using
%code
.content-list
%code
.content-list
%ul
.content-list
.example
%li
%ul
.content-list
One item
%li
%li
One item
One item
%li
%li
One item
One item
%li
One item
.lead
.lead
List with avatar, title and description using
List with avatar, title and description using
%code
.content-list
%code
.content-list
%ul
.content-list
.example
%li
%ul
.content-list
=
image_tag
'no_avatar.png'
,
class:
'avatar s40'
%li
.title
Title
=
image_tag
'no_avatar.png'
,
class:
'avatar s40'
.description
Description
.title
Title
%li
.description
Description
=
image_tag
'no_avatar.png'
,
class:
'avatar s40'
%li
.title
Title
=
image_tag
'no_avatar.png'
,
class:
'avatar s40'
.description
Description
.title
Title
%li
.description
Description
=
image_tag
'no_avatar.png'
,
class:
'avatar s40'
%li
.title
Title
=
image_tag
'no_avatar.png'
,
class:
'avatar s40'
.description
Description
.title
Title
.description
Description
%h4
.lead
List with hover effect
%code
.well-list
%code
.well-list
%ul
.well-list
.example
%li
One item
%li
One item
%li
One item
%h4
%code
.panel .well-list
.panel.panel-default
.panel-heading
Your list
%ul
.well-list
%ul
.well-list
%li
%li
One item
One item
...
@@ -117,17 +124,18 @@
...
@@ -117,17 +124,18 @@
%li
%li
One item
One item
%h4
.lead
%code
.bordered-list
List inside panel
%ul
.bordered-list
.example
%li
.panel.panel-default
One item
.panel-heading
Your list
%li
%ul
.well-list
One item
%li
%li
One item
One item
%li
One item
%li
One item
%h2
#tables
Tables
%h2
#tables
Tables
...
@@ -158,9 +166,9 @@
...
@@ -158,9 +166,9 @@
%h2
#navs
Navigation
%h2
#navs
Navigation
%h4
.lead
Holder for top page navigation. Includes navigation, search field, sorting and button
%code
.top-area
%code
.top-area
%p
Holder for top page navigation. Includes navigation, search field, sorting and button
.example
.example
.top-area
.top-area
...
@@ -181,9 +189,9 @@
...
@@ -181,9 +189,9 @@
=
link_to
'New issue'
,
'#'
,
class:
'btn btn-new'
=
link_to
'New issue'
,
'#'
,
class:
'btn btn-new'
%h4
.lead
Only nav links without button and search
%code
.nav-links
%code
.nav-links
%p
Only nav links without button and search
.example
.example
%ul
.nav-links
%ul
.nav-links
%li
.active
%li
.active
...
@@ -248,43 +256,47 @@
...
@@ -248,43 +256,47 @@
%h2
#forms
Forms
%h2
#forms
Forms
%h4
.lead
Horizontal form when label rendered inline with input
%code
form.horizontal-form
%code
form.horizontal-form
%form
.form-horizontal
.example
.form-group
%form
.form-horizontal
%label
.col-sm-2.control-label
{
:for
=>
"inputEmail3"
}
Email
.form-group
.col-sm-10
%label
.col-sm-2.control-label
{
:for
=>
"inputEmail3"
}
Email
%input
#inputEmail3
.form-control
{
:placeholder
=>
"Email"
,
:type
=>
"email"
}
/
.col-sm-10
.form-group
%input
#inputEmail3
.form-control
{
:placeholder
=>
"Email"
,
:type
=>
"email"
}
/
%label
.col-sm-2.control-label
{
:for
=>
"inputPassword3"
}
Password
.form-group
.col-sm-10
%label
.col-sm-2.control-label
{
:for
=>
"inputPassword3"
}
Password
%input
#inputPassword3
.form-control
{
:placeholder
=>
"Password"
,
:type
=>
"password"
}
/
.col-sm-10
.form-group
%input
#inputPassword3
.form-control
{
:placeholder
=>
"Password"
,
:type
=>
"password"
}
/
.col-sm-offset-2.col-sm-10
.form-group
.checkbox
.col-sm-offset-2.col-sm-10
%label
.checkbox
%input
{
:type
=>
"checkbox"
}
/
%label
Remember me
%input
{
:type
=>
"checkbox"
}
/
.form-group
Remember me
.col-sm-offset-2.col-sm-10
.form-group
%button
.btn.btn-default
{
:type
=>
"submit"
}
Sign in
.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
%code
form
%form
.example
.form-group
%form
%label
{
:for
=>
"exampleInputEmail1"
}
Email address
.form-group
%input
#exampleInputEmail1
.form-control
{
:placeholder
=>
"Enter email"
,
:type
=>
"email"
}
/
%label
{
:for
=>
"exampleInputEmail1"
}
Email address
.form-group
%input
#exampleInputEmail1
.form-control
{
:placeholder
=>
"Enter email"
,
:type
=>
"email"
}
/
%label
{
:for
=>
"exampleInputPassword1"
}
Password
.form-group
%input
#exampleInputPassword1
.form-control
{
:placeholder
=>
"Password"
,
:type
=>
"password"
}
/
%label
{
:for
=>
"exampleInputPassword1"
}
Password
.checkbox
%input
#exampleInputPassword1
.form-control
{
:placeholder
=>
"Password"
,
:type
=>
"password"
}
/
%label
.checkbox
%input
{
:type
=>
"checkbox"
}
/
%label
Remember me
%input
{
:type
=>
"checkbox"
}
/
%button
.btn.btn-default
{
:type
=>
"submit"
}
Sign in
Remember me
%button
.btn.btn-default
{
:type
=>
"submit"
}
Sign in
%h2
#file
File
%h2
#file
File
%h4
%h4
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment