diff options
author | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2016-02-26 14:59:32 +0000 |
---|---|---|
committer | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2016-02-26 14:59:32 +0000 |
commit | cc8b08722dc787f85c65ed161bd991d7897f4619 (patch) | |
tree | a2d6e8bf0ab37676352baf7a3de1ddeaa256112b | |
parent | f150b8a5b9a6f56151523061813bad2cf48c9d91 (diff) | |
parent | 421aa858e1a4363d98ed4b45d37f7d91c7575746 (diff) | |
download | gitlab-ce-cc8b08722dc787f85c65ed161bd991d7897f4619.tar.gz |
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
-rw-r--r-- | app/assets/stylesheets/framework/lists.scss | 22 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issues.scss | 8 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/merge_requests.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 17 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/snippets.scss | 24 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/ui_dev_kit.scss | 11 | ||||
-rw-r--r-- | app/views/help/ui.html.haml | 216 | ||||
-rw-r--r-- | app/views/projects/issues/_issue.html.haml | 2 | ||||
-rw-r--r-- | app/views/projects/merge_requests/_merge_request.html.haml | 2 | ||||
-rw-r--r-- | app/views/shared/_issues.html.haml | 2 | ||||
-rw-r--r-- | app/views/shared/_merge_requests.html.haml | 2 | ||||
-rw-r--r-- | app/views/shared/groups/_group.html.haml | 6 | ||||
-rw-r--r-- | app/views/shared/projects/_list.html.haml | 2 | ||||
-rw-r--r-- | app/views/shared/projects/_project.html.haml | 8 | ||||
-rw-r--r-- | app/views/shared/snippets/_snippet.html.haml | 7 | ||||
-rw-r--r-- | app/views/snippets/_snippets.html.haml | 2 |
17 files changed, 171 insertions, 171 deletions
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 354392d5ec3..b6a781f79de 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -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; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 4d72c7e905e..2706d031d7b 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -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 diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 8694bd654a7..a2ca00234ed 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -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 { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 9a2c4b83ffb..2772623f4bd 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -148,15 +148,8 @@ position: relative; .merge-request-title { - margin-bottom: 5px; - font-size: $list-font-size; - font-weight: 600; - } - - .merge-request-info { - color: $gl-gray; + margin-bottom: 2px; } - } .merge-request-labels { diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index b86d1a98723..247ac83c24a 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -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 { diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss index 1430d01859d..0161642d871 100644 --- a/app/assets/stylesheets/pages/snippets.scss +++ b/app/assets/stylesheets/pages/snippets.scss @@ -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; diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss index 185f3622e64..05fa9312efb 100644 --- a/app/assets/stylesheets/pages/ui_dev_kit.scss +++ b/app/assets/stylesheets/pages/ui_dev_kit.scss @@ -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; + } } diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml index 746386cab58..a2c0a858930 100644 --- a/app/views/help/ui.html.haml +++ b/app/views/help/ui.html.haml @@ -31,64 +31,91 @@ %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 - .gray-content-block.middle-block - %h4 Normal block inside content - = lorem + .example + .gray-content-block + %h4 Normal block inside content + = lorem - .gray-content-block.second-block - %h4 Second block - = lorem + .gray-content-block.second-block + %h4 Second block + = lorem - %h4 + .lead + Cover block for profile page with avatar, name and description %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 - = lorem + .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') + .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 - %code .well-list - %ul.well-list - %li - One item - %li - One item - %li - One item + .example + %ul.content-list + %li + One item + %li + One item + %li + One item - %h4 - %code .panel .well-list + .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 - .panel.panel-default - .panel-heading Your list + .lead + List with hover effect + %code .well-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 - - %h4 + .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 + + .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 diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml index 654d8cd5ed0..a44f34c2a68 100644 --- a/app/views/projects/issues/_issue.html.haml +++ b/app/views/projects/issues/_issue.html.haml @@ -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 diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml index b55f6a2d32a..b9d5982a56f 100644 --- a/app/views/projects/merge_requests/_merge_request.html.haml +++ b/app/views/projects/merge_requests/_merge_request.html.haml @@ -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 diff --git a/app/views/shared/_issues.html.haml b/app/views/shared/_issues.html.haml index 4b4c9e9eabe..8ff9d4c1c7f 100644 --- a/app/views/shared/_issues.html.haml +++ b/app/views/shared/_issues.html.haml @@ -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" diff --git a/app/views/shared/_merge_requests.html.haml b/app/views/shared/_merge_requests.html.haml index be17a511b26..e74fc36c797 100644 --- a/app/views/shared/_merge_requests.html.haml +++ b/app/views/shared/_merge_requests.html.haml @@ -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" diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml index 289b0bfe1eb..fb9a8db0889 100644 --- a/app/views/shared/groups/_group.html.haml +++ b/app/views/shared/groups/_group.html.haml @@ -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) diff --git a/app/views/shared/projects/_list.html.haml b/app/views/shared/projects/_list.html.haml index 75684b972f1..e75af50a537 100644 --- a/app/views/shared/projects/_list.html.haml +++ b/app/views/shared/projects/_list.html.haml @@ -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 diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml index 72061e272f1..99e48e86e38 100644 --- a/app/views/shared/projects/_project.html.haml +++ b/app/views/shared/projects/_project.html.haml @@ -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) diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml index c6294caddc7..a316a085107 100644 --- a/app/views/shared/snippets/_snippet.html.haml +++ b/app/views/shared/snippets/_snippet.html.haml @@ -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)} diff --git a/app/views/snippets/_snippets.html.haml b/app/views/snippets/_snippets.html.haml index d9aa4dd1d2e..80a3e731e1d 100644 --- a/app/views/snippets/_snippets.html.haml +++ b/app/views/snippets/_snippets.html.haml @@ -1,4 +1,4 @@ -%ul.bordered-list +%ul.content-list = render partial: 'shared/snippets/snippet', collection: @snippets - if @snippets.empty? %li |