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

Merge branch 'refactor-lists' into 'master'

Browse source 
Refactor html/css for lists and improve help UI page

* dry lists html/css removing a lot of style duplicates
* fix snippets list to match common style
* fix extra bottom margin for groups list
* improve help page ui so it looks clean

Fixes #11873 

See merge request !2977
This commit is contained in:
Dmitriy Zaporozhets 2016-02-26 14:59:32 +00:00
commit cc8b08722d
17 changed files with 175 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/stylesheets/framework/lists.scss
View file

@ -110,7 +110,20 @@ ul.content-list {
> li {
border-color: $table-border-color;
color: $gl-gray;
color: $list-text-color;
font-size: $list-font-size;
.title {
color: $list-title-color;
font-weight: 600;
}
.description {
p {
@include str-truncated;
margin-bottom: 0;
}
}
.avatar {
margin-right: 15px;
@ -127,13 +140,6 @@ ul.content-list {
}
}
.panel > .content-list {
li {
margin: 0;
padding: $gl-padding;
}
}
ul.controls {
padding-top: 1px;
float: right;

2
app/assets/stylesheets/framework/variables.scss
View file

@ -32,6 +32,8 @@ $gl-avatar-size: 40px;
$secondary-text: #7f8fa4;
$error-exclamation-point: #E62958;
$border-radius-default: 3px;
$list-title-color: #333333;
$list-text-color: #555555;
/*
* Color schema

8
app/assets/stylesheets/pages/issues.scss
View file

@ -4,13 +4,7 @@
position: relative;
.issue-title {
margin-bottom: 5px;
font-size: $list-font-size;
font-weight: 600;
}
.issue-info {
color: $gl-gray;
margin-bottom: 2px;
}
.issue-check {

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

@ -148,15 +148,8 @@
position: relative;
.merge-request-title {
margin-bottom: 5px;
font-size: $list-font-size;
font-weight: 600;
margin-bottom: 2px;
}
.merge-request-info {
color: $gl-gray;
}
}
.merge-request-labels {

17
app/assets/stylesheets/pages/projects.scss
View file

@ -397,15 +397,10 @@ pre.light-well {
.project-full-name {
@include str-truncated;
font-weight: 600;
color: #4c4e54;
}
.project-controls {
float: right;
color: $gl-gray;
.controls {
line-height: 40px;
color: #7f8fa4;
a:hover {
text-decoration: none;
@ -415,16 +410,6 @@ pre.light-well {
margin-left: 10px;
}
}
.project-description {
color: #7f8fa4;
p {
@include str-truncated;
margin-bottom: 0;
color: #7f8fa4;
}
}
}
.bottom {

24
app/assets/stylesheets/pages/snippets.scss
View file

@ -2,30 +2,6 @@
padding: 2px;
}
.snippet-row {
.snippet-title {
font-size: 15px;
font-weight: bold;
line-height: 20px;
margin-bottom: 2px;
.monospace {
font-weight: normal;
}
}
.snippet-info {
color: #888;
font-size: 13px;
line-height: 24px;
a {
color: #888;
}
}
}
.snippet-holder {
margin-bottom: -$gl-padding;

11
app/assets/stylesheets/pages/ui_dev_kit.scss
View file

@ -3,4 +3,15 @@
margin: 35px 0 20px;
font-weight: bold;
}
.example {
&:before {
content: "Example";
color: #BBB;
}
padding: 15px;
border: 1px dashed #ddd;
margin-bottom: 15px;
}
}

224
app/views/help/ui.html.haml
View file

@ -31,64 +31,91 @@
%h2#blocks Blocks
%h4
%code .gray-content-block
.lead
Content block separated with botton border
%code .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
.example
.content-block
%h4 Normal block inside content
= lorem
.cover-controls
= link_to '#', class: 'btn btn-gray' do
= icon('pencil')
 
= link_to '#', class: 'btn btn-gray' do
= icon('rss')
.content-block
%h4 Second block
= lorem
.lead
Gray content block with side padding using
%code .gray-content-block
.example
.gray-content-block
%h4 Normal block inside content
= lorem
.gray-content-block.second-block
%h4 Second block
= lorem
.lead
Cover block for profile page with avatar, name and description
%code .cover-block
.example
.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
.lead
Simple list using
%code .content-list
%ul.content-list
%li
One item
%li
One item
%li
One item
%h4
.example
%ul.content-list
%li
One item
%li
One item
%li
One item
.lead
List with avatar, title and description using
%code .content-list
.example
%ul.content-list
%li
= image_tag 'no_avatar.png', class: 'avatar s40'
.title Title
.description Description
%li
= image_tag 'no_avatar.png', class: 'avatar s40'
.title Title
.description Description
%li
= image_tag 'no_avatar.png', class: 'avatar s40'
.title Title
.description Description
.lead
List with hover effect
%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
.example
%ul.well-list
%li
One item
@ -97,17 +124,18 @@
%li
One item
%h4
%code .bordered-list
%ul.bordered-list
%li
One item
%li
One item
%li
One item
.lead
List inside panel
.example
.panel.panel-default
.panel-heading Your list
%ul.well-list
%li
One item
%li
One item
%li
One item
%h2#tables Tables
@ -138,9 +166,9 @@
%h2#navs Navigation
%h4
.lead
Holder for top page navigation. Includes navigation, search field, sorting and button
%code .top-area
%p Holder for top page navigation. Includes navigation, search field, sorting and button
.example
.top-area
@ -161,9 +189,9 @@
= link_to 'New issue', '#', class: 'btn btn-new'
%h4
.lead
Only nav links without button and search
%code .nav-links
%p Only nav links without button and search
.example
%ul.nav-links
%li.active
@ -228,43 +256,47 @@
%h2#forms Forms
%h4
.lead
Horizontal form when label rendered inline with input
%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
.example
%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
.lead
Form when label rendered above input
%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
.example
%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

2
app/views/projects/issues/_issue.html.haml
View file

@ -5,7 +5,7 @@
.issue-title
%span.issue-title-text
= link_to_gfm issue.title, issue_path(issue), class: "row_title"
= link_to_gfm issue.title, issue_path(issue), class: "title"
%ul.controls.light
- if issue.closed?
%li

2
app/views/projects/merge_requests/_merge_request.html.haml
View file

@ -1,7 +1,7 @@
%li{ class: mr_css_classes(merge_request) }
.merge-request-title
%span.merge-request-title-text
= link_to_gfm merge_request.title, merge_request_path(merge_request), class: "row_title"
= link_to_gfm merge_request.title, merge_request_path(merge_request), class: "title"
%ul.controls.light
- if merge_request.merged?
%li

2
app/views/shared/_issues.html.haml
View file

@ -8,7 +8,7 @@
.pull-right
= link_to 'New issue', new_namespace_project_issue_path(project.namespace, project)
%ul.well-list.issues-list
%ul.content-list.issues-list
- group[1].each do |issue|
= render 'projects/issues/issue', issue: issue
= paginate @issues, theme: "gitlab"

2
app/views/shared/_merge_requests.html.haml
View file

@ -8,7 +8,7 @@
.pull-right
= link_to 'New merge request', new_namespace_project_merge_request_path(project.namespace, project)
%ul.well-list.mr-list
%ul.content-list.mr-list
- group[1].each do |merge_request|
= render 'projects/merge_requests/merge_request', merge_request: merge_request
= paginate @merge_requests, theme: "gitlab"

6
app/views/shared/groups/_group.html.haml
View file

@ -22,13 +22,13 @@
= number_with_delimiter(group.users.count)
= image_tag group_icon(group), class: "avatar s40 hidden-xs"
= link_to group, class: 'group-name' do
%span.item-title= group.name
= link_to group, class: 'group-name title' do
= group.name
- if group_member
as
%span #{group_member.human_access}
- if group.description.present?
.light
.description
= markdown(group.description, pipeline: :description)

2
app/views/shared/projects/_list.html.haml
View file

@ -7,7 +7,7 @@
- skip_namespace = false unless local_assigns[:skip_namespace] == true
- show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true
%ul.projects-list
%ul.projects-list.content-list
- if projects.any?
- projects.each_with_index do |project, i|
- css_class = (i >= projects_limit) ? 'hide' : nil

8
app/views/shared/projects/_project.html.haml
View file

@ -19,7 +19,7 @@
= image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
- else
= project_icon(project, alt: '', class: 'avatar project-avatar s40')
%span.project-full-name
%span.project-full-name.title
%span.namespace-name
- if project.namespace && !skip_namespace
= project.namespace.human_name
@ -27,7 +27,7 @@
%span.project-name.filter-title
= project.name
.project-controls
.controls
- if ci_commit
%span
= render_ci_status(ci_commit)
@ -43,9 +43,9 @@
title: "#{visibility_level_label(project.visibility_level)} - #{project_visibility_level_description(project.visibility_level)}"}
= visibility_level_icon(project.visibility_level, fw: false)
- if show_last_commit_as_description
.project-description
.description
= link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
class: "commit-row-message"
- elsif project.description.present?
.project-description
.description
= markdown(project.description, pipeline: :description)

7
app/views/shared/snippets/_snippet.html.haml
View file

@ -1,10 +1,12 @@
%li.snippet-row
= image_tag avatar_icon(snippet.author_email), class: "avatar s40 hidden-xs", alt: ''
.snippet-title
= link_to reliable_snippet_path(snippet) do
= link_to reliable_snippet_path(snippet), class: 'title' do
= truncate(snippet.title, length: 60)
- if snippet.private?
%span.label.label-gray
%i.fa.fa-lock
= icon('lock')
private
%span.monospace.pull-right
= snippet.file_name
@ -15,6 +17,5 @@
.snippet-info
= link_to user_snippets_path(snippet.author) do
= image_tag avatar_icon(snippet.author_email), class: "avatar s24", alt: ''
= snippet.author_name
authored #{time_ago_with_tooltip(snippet.created_at)}

2
app/views/snippets/_snippets.html.haml
View file

@ -1,4 +1,4 @@
%ul.bordered-list
%ul.content-list
= render partial: 'shared/snippets/snippet', collection: @snippets
- if @snippets.empty?
%li