Commit cc8b0872 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'refactor-lists' into 'master'

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
parents f150b8a5 421aa858
...@@ -110,7 +110,20 @@ ul.content-list { ...@@ -110,7 +110,20 @@ ul.content-list {
> li { > li {
border-color: $table-border-color; 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 { .avatar {
margin-right: 15px; margin-right: 15px;
...@@ -127,13 +140,6 @@ ul.content-list { ...@@ -127,13 +140,6 @@ ul.content-list {
} }
} }
.panel > .content-list {
li {
margin: 0;
padding: $gl-padding;
}
}
ul.controls { ul.controls {
padding-top: 1px; padding-top: 1px;
float: right; float: right;
......
...@@ -32,6 +32,8 @@ $gl-avatar-size: 40px; ...@@ -32,6 +32,8 @@ $gl-avatar-size: 40px;
$secondary-text: #7f8fa4; $secondary-text: #7f8fa4;
$error-exclamation-point: #E62958; $error-exclamation-point: #E62958;
$border-radius-default: 3px; $border-radius-default: 3px;
$list-title-color: #333333;
$list-text-color: #555555;
/* /*
* Color schema * Color schema
......
...@@ -4,13 +4,7 @@ ...@@ -4,13 +4,7 @@
position: relative; position: relative;
.issue-title { .issue-title {
margin-bottom: 5px; margin-bottom: 2px;
font-size: $list-font-size;
font-weight: 600;
}
.issue-info {
color: $gl-gray;
} }
.issue-check { .issue-check {
......
...@@ -148,15 +148,8 @@ ...@@ -148,15 +148,8 @@
position: relative; position: relative;
.merge-request-title { .merge-request-title {
margin-bottom: 5px; margin-bottom: 2px;
font-size: $list-font-size;
font-weight: 600;
} }
.merge-request-info {
color: $gl-gray;
}
} }
.merge-request-labels { .merge-request-labels {
......
...@@ -397,15 +397,10 @@ pre.light-well { ...@@ -397,15 +397,10 @@ pre.light-well {
.project-full-name { .project-full-name {
@include str-truncated; @include str-truncated;
font-weight: 600;
color: #4c4e54;
} }
.project-controls { .controls {
float: right;
color: $gl-gray;
line-height: 40px; line-height: 40px;
color: #7f8fa4;
a:hover { a:hover {
text-decoration: none; text-decoration: none;
...@@ -415,16 +410,6 @@ pre.light-well { ...@@ -415,16 +410,6 @@ pre.light-well {
margin-left: 10px; margin-left: 10px;
} }
} }
.project-description {
color: #7f8fa4;
p {
@include str-truncated;
margin-bottom: 0;
color: #7f8fa4;
}
}
} }
.bottom { .bottom {
......
...@@ -2,30 +2,6 @@ ...@@ -2,30 +2,6 @@
padding: 2px; 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 { .snippet-holder {
margin-bottom: -$gl-padding; margin-bottom: -$gl-padding;
......
...@@ -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;
}
} }
...@@ -31,10 +31,25 @@ ...@@ -31,10 +31,25 @@
%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
.gray-content-block
%h4 Normal block inside content %h4 Normal block inside content
= lorem = lorem
...@@ -43,9 +58,10 @@ ...@@ -43,9 +58,10 @@
= 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: ''
...@@ -64,8 +80,11 @@ ...@@ -64,8 +80,11 @@
%h2#lists Lists %h2#lists Lists
%h4 .lead
Simple list using
%code .content-list %code .content-list
.example
%ul.content-list %ul.content-list
%li %li
One item One item
...@@ -74,21 +93,29 @@ ...@@ -74,21 +93,29 @@
%li %li
One item One item
%h4 .lead
%code .well-list List with avatar, title and description using
%ul.well-list %code .content-list
.example
%ul.content-list
%li %li
One item = image_tag 'no_avatar.png', class: 'avatar s40'
.title Title
.description Description
%li %li
One item = image_tag 'no_avatar.png', class: 'avatar s40'
.title Title
.description Description
%li %li
One item = image_tag 'no_avatar.png', class: 'avatar s40'
.title Title
.description Description
%h4 .lead
%code .panel .well-list List with hover effect
%code .well-list
.panel.panel-default .example
.panel-heading Your list
%ul.well-list %ul.well-list
%li %li
One item One item
...@@ -97,9 +124,12 @@ ...@@ -97,9 +124,12 @@
%li %li
One item One item
%h4 .lead
%code .bordered-list List inside panel
%ul.bordered-list .example
.panel.panel-default
.panel-heading Your list
%ul.well-list
%li %li
One item One item
%li %li
...@@ -107,8 +137,6 @@ ...@@ -107,8 +137,6 @@
%li %li
One item One item
%h2#tables Tables %h2#tables Tables
.example .example
...@@ -138,9 +166,9 @@ ...@@ -138,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
...@@ -161,9 +189,9 @@ ...@@ -161,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
...@@ -228,9 +256,11 @@ ...@@ -228,9 +256,11 @@
%h2#forms Forms %h2#forms Forms
%h4 .lead
Horizontal form when label rendered inline with input
%code form.horizontal-form %code form.horizontal-form
.example
%form.form-horizontal %form.form-horizontal
.form-group .form-group
%label.col-sm-2.control-label{:for => "inputEmail3"} Email %label.col-sm-2.control-label{:for => "inputEmail3"} Email
...@@ -250,9 +280,11 @@ ...@@ -250,9 +280,11 @@
.col-sm-offset-2.col-sm-10 .col-sm-offset-2.col-sm-10
%button.btn.btn-default{:type => "submit"} Sign in %button.btn.btn-default{:type => "submit"} Sign in
%h4 .lead
Form when label rendered above input
%code form %code form
.example
%form %form
.form-group .form-group
%label{:for => "exampleInputEmail1"} Email address %label{:for => "exampleInputEmail1"} Email address
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.issue-title .issue-title
%span.issue-title-text %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 %ul.controls.light
- if issue.closed? - if issue.closed?
%li %li
......
%li{ class: mr_css_classes(merge_request) } %li{ class: mr_css_classes(merge_request) }
.merge-request-title .merge-request-title
%span.merge-request-title-text %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 %ul.controls.light
- if merge_request.merged? - if merge_request.merged?
%li %li
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.pull-right .pull-right
= link_to 'New issue', new_namespace_project_issue_path(project.namespace, project) = 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| - group[1].each do |issue|
= render 'projects/issues/issue', issue: issue = render 'projects/issues/issue', issue: issue
= paginate @issues, theme: "gitlab" = paginate @issues, theme: "gitlab"
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.pull-right .pull-right
= link_to 'New merge request', new_namespace_project_merge_request_path(project.namespace, project) = 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| - group[1].each do |merge_request|
= render 'projects/merge_requests/merge_request', merge_request: merge_request = render 'projects/merge_requests/merge_request', merge_request: merge_request
= paginate @merge_requests, theme: "gitlab" = paginate @merge_requests, theme: "gitlab"
......
...@@ -22,13 +22,13 @@ ...@@ -22,13 +22,13 @@
= number_with_delimiter(group.users.count) = number_with_delimiter(group.users.count)
= image_tag group_icon(group), class: "avatar s40 hidden-xs" = image_tag group_icon(group), class: "avatar s40 hidden-xs"
= link_to group, class: 'group-name' do = link_to group, class: 'group-name title' do
%span.item-title= group.name = group.name
- if group_member - if group_member
as as
%span #{group_member.human_access} %span #{group_member.human_access}
- if group.description.present? - if group.description.present?
.light .description
= markdown(group.description, pipeline: :description) = markdown(group.description, pipeline: :description)
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
- skip_namespace = false unless local_assigns[:skip_namespace] == true - skip_namespace = false unless local_assigns[:skip_namespace] == true
- show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == 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? - if projects.any?
- projects.each_with_index do |project, i| - projects.each_with_index do |project, i|
- css_class = (i >= projects_limit) ? 'hide' : nil - css_class = (i >= projects_limit) ? 'hide' : nil
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
= image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:'' = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
- else - else
= project_icon(project, alt: '', class: 'avatar project-avatar s40') = project_icon(project, alt: '', class: 'avatar project-avatar s40')
%span.project-full-name %span.project-full-name.title
%span.namespace-name %span.namespace-name
- if project.namespace && !skip_namespace - if project.namespace && !skip_namespace
= project.namespace.human_name = project.namespace.human_name
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
%span.project-name.filter-title %span.project-name.filter-title
= project.name = project.name
.project-controls .controls
- if ci_commit - if ci_commit
%span %span
= render_ci_status(ci_commit) = render_ci_status(ci_commit)
...@@ -43,9 +43,9 @@ ...@@ -43,9 +43,9 @@
title: "#{visibility_level_label(project.visibility_level)} - #{project_visibility_level_description(project.visibility_level)}"} title: "#{visibility_level_label(project.visibility_level)} - #{project_visibility_level_description(project.visibility_level)}"}
= visibility_level_icon(project.visibility_level, fw: false) = visibility_level_icon(project.visibility_level, fw: false)
- if show_last_commit_as_description - if show_last_commit_as_description
.project-description .description
= link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit), = link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
class: "commit-row-message" class: "commit-row-message"
- elsif project.description.present? - elsif project.description.present?
.project-description .description
= markdown(project.description, pipeline: :description) = markdown(project.description, pipeline: :description)
%li.snippet-row %li.snippet-row
= image_tag avatar_icon(snippet.author_email), class: "avatar s40 hidden-xs", alt: ''
.snippet-title .snippet-title
= link_to reliable_snippet_path(snippet) do = link_to reliable_snippet_path(snippet), class: 'title' do
= truncate(snippet.title, length: 60) = truncate(snippet.title, length: 60)
- if snippet.private? - if snippet.private?
%span.label.label-gray %span.label.label-gray
%i.fa.fa-lock = icon('lock')
private private
%span.monospace.pull-right %span.monospace.pull-right
= snippet.file_name = snippet.file_name
...@@ -15,6 +17,5 @@ ...@@ -15,6 +17,5 @@
.snippet-info .snippet-info
= link_to user_snippets_path(snippet.author) do = link_to user_snippets_path(snippet.author) do
= image_tag avatar_icon(snippet.author_email), class: "avatar s24", alt: ''
= snippet.author_name = snippet.author_name
authored #{time_ago_with_tooltip(snippet.created_at)} authored #{time_ago_with_tooltip(snippet.created_at)}
%ul.bordered-list %ul.content-list
= render partial: 'shared/snippets/snippet', collection: @snippets = render partial: 'shared/snippets/snippet', collection: @snippets
- if @snippets.empty? - if @snippets.empty?
%li %li
......
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