From 5a1afb48feeb1b21a496af6d785951e164cd453a Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Thu, 25 Feb 2016 19:44:11 +0100 Subject: Cleanup css for projects list Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/framework/lists.scss | 7 ++++++- app/assets/stylesheets/framework/variables.scss | 2 ++ app/assets/stylesheets/pages/projects.scss | 10 +--------- app/views/shared/projects/_list.html.haml | 2 +- app/views/shared/projects/_project.html.haml | 4 ++-- 5 files changed, 12 insertions(+), 13 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 354392d5ec3..d1dc0d9e688 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -110,7 +110,12 @@ ul.content-list { > li { border-color: $table-border-color; - color: $gl-gray; + color: $list-text-color; + + .title { + color: $list-title-color; + font-weight: 600; + } .avatar { margin-right: 15px; 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/projects.scss b/app/assets/stylesheets/pages/projects.scss index b86d1a98723..41b1d6cefd9 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; @@ -417,12 +412,9 @@ pre.light-well { } .project-description { - color: #7f8fa4; - p { @include str-truncated; margin-bottom: 0; - color: #7f8fa4; } } } 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..52182f2b4bd 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) -- cgit v1.2.3 From 82064a7c1a900507e5a238db65ab90abc1522a5b Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Thu, 25 Feb 2016 19:51:05 +0100 Subject: Refactor css for snippets list Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/pages/snippets.scss | 24 ------------------------ app/views/shared/snippets/_snippet.html.haml | 7 ++++--- app/views/snippets/_snippets.html.haml | 2 +- 3 files changed, 5 insertions(+), 28 deletions(-) (limited to 'app') 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/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 -- cgit v1.2.3 From 2e2b96a40d2604790f6960193c80d89de4670bc3 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Thu, 25 Feb 2016 20:05:05 +0100 Subject: Refactor css for groups list Signed-off-by: Dmitriy Zaporozhets --- app/views/shared/groups/_group.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml index 289b0bfe1eb..389a17786a8 100644 --- a/app/views/shared/groups/_group.html.haml +++ b/app/views/shared/groups/_group.html.haml @@ -22,8 +22,8 @@ = 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 -- cgit v1.2.3 From 2b5a6487ba8fe45dfc79ec605088ba4947d58172 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Thu, 25 Feb 2016 20:13:36 +0100 Subject: Refactor styles for issues list Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/framework/lists.scss | 8 +------- app/assets/stylesheets/pages/issues.scss | 8 +------- app/views/projects/issues/_issue.html.haml | 2 +- app/views/shared/_issues.html.haml | 2 +- 4 files changed, 4 insertions(+), 16 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index d1dc0d9e688..bef3ed2f485 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -111,6 +111,7 @@ ul.content-list { > li { border-color: $table-border-color; color: $list-text-color; + font-size: $list-font-size; .title { color: $list-title-color; @@ -132,13 +133,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/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/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/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" -- cgit v1.2.3 From d51f3b7b3533d44200455d361ee29ef13b121e40 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Fri, 26 Feb 2016 14:48:25 +0100 Subject: Refactor styles for merge requests list Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/pages/merge_requests.scss | 9 +-------- app/views/projects/merge_requests/_merge_request.html.haml | 2 +- app/views/shared/_merge_requests.html.haml | 2 +- 3 files changed, 3 insertions(+), 10 deletions(-) (limited to 'app') 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/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/_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" -- cgit v1.2.3 From 012ea64d0027c3c047448fd5992f0312dac1d525 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Fri, 26 Feb 2016 15:02:34 +0100 Subject: Fix description margin for groups list Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/framework/lists.scss | 7 +++++++ app/assets/stylesheets/pages/projects.scss | 7 ------- app/views/help/ui.html.haml | 22 +++++++++++++++++++++- app/views/shared/groups/_group.html.haml | 2 +- app/views/shared/projects/_project.html.haml | 4 ++-- 5 files changed, 31 insertions(+), 11 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index bef3ed2f485..b6a781f79de 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -118,6 +118,13 @@ ul.content-list { font-weight: 600; } + .description { + p { + @include str-truncated; + margin-bottom: 0; + } + } + .avatar { margin-right: 15px; } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 41b1d6cefd9..247ac83c24a 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -410,13 +410,6 @@ pre.light-well { margin-left: 10px; } } - - .project-description { - p { - @include str-truncated; - margin-bottom: 0; - } - } } .bottom { diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml index 746386cab58..f3f687eb6d9 100644 --- a/app/views/help/ui.html.haml +++ b/app/views/help/ui.html.haml @@ -64,8 +64,10 @@ %h2#lists Lists - %h4 + .lead + Simple list using %code .content-list + %ul.content-list %li One item @@ -74,6 +76,24 @@ %li One item + .lead + List with avatar, title and description using + %code .content-list + + %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 + %h4 %code .well-list %ul.well-list diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml index 389a17786a8..fb9a8db0889 100644 --- a/app/views/shared/groups/_group.html.haml +++ b/app/views/shared/groups/_group.html.haml @@ -30,5 +30,5 @@ %span #{group_member.human_access} - if group.description.present? - .light + .description = markdown(group.description, pipeline: :description) diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml index 52182f2b4bd..99e48e86e38 100644 --- a/app/views/shared/projects/_project.html.haml +++ b/app/views/shared/projects/_project.html.haml @@ -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) -- cgit v1.2.3 From 421aa858e1a4363d98ed4b45d37f7d91c7575746 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Fri, 26 Feb 2016 15:17:13 +0100 Subject: Improve help UI page Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/pages/ui_dev_kit.scss | 11 ++ app/views/help/ui.html.haml | 220 ++++++++++++++------------- 2 files changed, 127 insertions(+), 104 deletions(-) (limited to 'app') 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 f3f687eb6d9..a2c0a858930 100644 --- a/app/views/help/ui.html.haml +++ b/app/views/help/ui.html.haml @@ -31,36 +31,52 @@ %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-controls - = link_to '#', class: 'btn btn-gray' do - = icon('pencil') -   - = link_to '#', class: 'btn btn-gray' do - = icon('rss') + .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 @@ -68,47 +84,38 @@ Simple list using %code .content-list - %ul.content-list - %li - One item - %li - One item - %li - One item + .example + %ul.content-list + %li + One item + %li + One item + %li + One item .lead List with avatar, title and description using %code .content-list - %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 + .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 - %h4 + .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 @@ -117,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 @@ -158,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 @@ -181,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 @@ -248,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 -- cgit v1.2.3