From 670544c8fa9602e954df7bca9bddd9bd8785b31f Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Fri, 4 Sep 2015 16:14:10 +0200 Subject: [PATCH 1/3] Style project home page Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/generic/avatar.scss | 4 ++- app/assets/stylesheets/generic/blocks.scss | 5 +++ app/assets/stylesheets/pages/projects.scss | 41 +++++++++++++++------- app/views/projects/_home_panel.html.haml | 2 +- app/views/projects/show.html.haml | 17 +++++---- 5 files changed, 46 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/generic/avatar.scss b/app/assets/stylesheets/generic/avatar.scss index 5985e8239f3..4fd7fbd21ce 100644 --- a/app/assets/stylesheets/generic/avatar.scss +++ b/app/assets/stylesheets/generic/avatar.scss @@ -27,6 +27,7 @@ &.s48 { width: 48px; height: 48px; margin-right: 10px; } &.s60 { width: 60px; height: 60px; margin-right: 12px; } &.s90 { width: 90px; height: 90px; margin-right: 15px; } + &.s140 { width: 140px; height: 140px; margin-right: 20px; } &.s160 { width: 160px; height: 160px; margin-right: 20px; } } @@ -40,5 +41,6 @@ &.s32 { font-size: 22px; line-height: 32px; } &.s60 { font-size: 32px; line-height: 60px; } &.s90 { font-size: 36px; line-height: 90px; } - &.s160 { font-size: 96px; line-height: 1.33; } + &.s140 { font-size: 72px; line-height: 140px; } + &.s160 { font-size: 96px; line-height: 160px; } } diff --git a/app/assets/stylesheets/generic/blocks.scss b/app/assets/stylesheets/generic/blocks.scss index e953ec741ac..61209f73a2e 100644 --- a/app/assets/stylesheets/generic/blocks.scss +++ b/app/assets/stylesheets/generic/blocks.scss @@ -27,6 +27,11 @@ border-bottom: 1px solid #e7e9ed; color: $gl-gray; + &.footer-block { + margin-top: 0; + margin-bottom: -$gl-padding; + } + .title { color: $gl-text-color; } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 51449b27522..0d94fc106b3 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -16,6 +16,10 @@ .project-home-panel { text-align: center; + background: #f7f8fa; + margin: -$gl-padding; + padding: $gl-padding; + padding-top: 40px; .project-identicon-holder { margin-bottom: 15px; @@ -37,14 +41,13 @@ .project-home-desc { h1 { margin: 0; - margin-bottom: 10px; - font-size: 26px; - font-weight: bold; + margin-bottom: 5px; + font-size: 23px; + font-weight: normal; } p { - font-size: 18px; - color: #666; + color: #7f8fa4; display: inline; } } @@ -68,11 +71,12 @@ .btn { @extend .btn-info; + text-transform: uppercase; + font-size: 15px; + line-height: 20px; + padding: 10px 16px; + border-radius: 3px; margin-left: 10px; - font-weight: bold; - font-size: 14px; - line-height: 16px; - padding: 8px 12px; .count { padding-left: 7px; @@ -232,10 +236,23 @@ table.table.protected-branches-list tr.no-border { .project-stats { text-align: center; + margin-top: 0; + margin-bottom: 0; + padding-top: 5px; + padding-bottom: 0; - ul.nav-pills { display:inline-block; } - li { display:inline; } - a { float:left; } + ul.nav-pills { + display:inline-block; + } + + li { + display:inline; + } + + a { + float:left; + font-size: 17px; + } li.missing a { color: #bbb; diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml index b93036e78e6..e83256d368d 100644 --- a/app/views/projects/_home_panel.html.haml +++ b/app/views/projects/_home_panel.html.haml @@ -1,7 +1,7 @@ - empty_repo = @project.empty_repo? .project-home-panel.clearfix{:class => ("empty-project" if empty_repo)} .project-identicon-holder - = project_icon(@project, alt: '', class: 'project-avatar avatar s90') + = project_icon(@project, alt: '', class: 'project-avatar avatar s140') .project-home-desc %h1= @project.name - if @project.description.present? diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml index 507f2c7beb0..d575891fd46 100644 --- a/app/views/projects/show.html.haml +++ b/app/views/projects/show.html.haml @@ -11,7 +11,7 @@ = render "home_panel" -.project-stats +.project-stats.gray-content-block %ul.nav.nav-pills %li = link_to namespace_project_commits_path(@project.namespace, @project, @ref || @repository.root_ref) do @@ -63,7 +63,6 @@ = icon("exclamation-triangle fw") Archived project! Repository is read-only -%hr %section - if prefer_readme? = render 'projects/readme' @@ -74,10 +73,10 @@ - if current_user - access = user_max_access_in_project(current_user, @project) - if access - %hr - %p.light - You have #{access} access to this project. - - if @project.project_member_by_id(current_user) - = link_to leave_namespace_project_project_members_path(@project.namespace, @project), - data: { confirm: leave_project_message(@project) }, method: :delete, title: 'Leave project', class: 'cred' do - Leave this project \ No newline at end of file + .prepend-top-20 + .gray-content-block.footer-block.center + You have #{access} access to this project. + - if @project.project_member_by_id(current_user) + = link_to leave_namespace_project_project_members_path(@project.namespace, @project), + data: { confirm: leave_project_message(@project) }, method: :delete, title: 'Leave project', class: 'cred' do + Leave this project From ac6dfbd91cf1d49ddf80896ff8c180613b19369c Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Fri, 4 Sep 2015 21:21:27 +0200 Subject: [PATCH 2/3] Make header and sidebar avatar more compact Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/base/variables.scss | 2 +- app/assets/stylesheets/generic/sidebar.scss | 16 ++++++++++------ app/views/layouts/_page.html.haml | 2 +- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss index f7d4b5d1711..7f0b7fb2a62 100644 --- a/app/assets/stylesheets/base/variables.scss +++ b/app/assets/stylesheets/base/variables.scss @@ -12,7 +12,7 @@ $code_font_size: 13px; $code_line_height: 1.5; $border-color: #E7E9ED; $background-color: #F8FAFC; -$header-height: 67px; +$header-height: 61px; $fixed-layout-width: 1200px; $gl-gray: #7f8fa4; $gl-padding: 16px; diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index 70893759479..30e367104fe 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -127,7 +127,7 @@ width: $sidebar_collapsed_width; a { - padding-left: 7px; + padding-left: 10px; .gitlab-text-container { display: none; @@ -151,8 +151,12 @@ } .sidebar-user { - padding-left: 7px; + padding-left: 10px; width: $sidebar_collapsed_width; + + .username { + display: none; + } } } } @@ -210,7 +214,7 @@ margin-left: 10px; width: $sidebar_width - 2 * 10px; font-size: 16px; - line-height: 44px; + line-height: 36px; } } @@ -231,8 +235,8 @@ overflow: hidden; img { - width: $gl-avatar-size; - height: $gl-avatar-size; + width: 40px; + height: 40px; float: left; } @@ -245,7 +249,7 @@ margin: 0; margin-left: 14px; font-size: 19px; - line-height: 49px; + line-height: 41px; font-weight: normal; } } diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 02ee9910dad..0814b63600d 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -14,7 +14,7 @@ = render partial: 'layouts/collapse_button' - if current_user = link_to current_user, class: 'sidebar-user' do - = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s46' + = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s40' .username = current_user.username .content-wrapper From 9793c3460fe164e922cdc1084ef8bd94f16b93d3 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Fri, 4 Sep 2015 21:36:56 +0200 Subject: [PATCH 3/3] Make project page and header more compact Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/base/variables.scss | 2 +- app/assets/stylesheets/generic/avatar.scss | 1 + app/assets/stylesheets/generic/sidebar.scss | 10 +++++----- app/assets/stylesheets/pages/projects.scss | 10 +++++++--- app/views/layouts/_page.html.haml | 2 +- app/views/projects/_home_panel.html.haml | 2 +- 6 files changed, 16 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss index 7f0b7fb2a62..21462b31127 100644 --- a/app/assets/stylesheets/base/variables.scss +++ b/app/assets/stylesheets/base/variables.scss @@ -12,7 +12,7 @@ $code_font_size: 13px; $code_line_height: 1.5; $border-color: #E7E9ED; $background-color: #F8FAFC; -$header-height: 61px; +$header-height: 58px; $fixed-layout-width: 1200px; $gl-gray: #7f8fa4; $gl-padding: 16px; diff --git a/app/assets/stylesheets/generic/avatar.scss b/app/assets/stylesheets/generic/avatar.scss index 4fd7fbd21ce..221cb6a04a5 100644 --- a/app/assets/stylesheets/generic/avatar.scss +++ b/app/assets/stylesheets/generic/avatar.scss @@ -23,6 +23,7 @@ &.s24 { width: 24px; height: 24px; margin-right: 8px; } &.s26 { width: 26px; height: 26px; margin-right: 8px; } &.s32 { width: 32px; height: 32px; margin-right: 10px; } + &.s36 { width: 36px; height: 36px; margin-right: 10px; } &.s46 { width: 46px; height: 46px; margin-right: 15px; } &.s48 { width: 48px; height: 48px; margin-right: 10px; } &.s60 { width: 60px; height: 60px; margin-right: 12px; } diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index 30e367104fe..22720c2e1d5 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -127,7 +127,7 @@ width: $sidebar_collapsed_width; a { - padding-left: 10px; + padding-left: 12px; .gitlab-text-container { display: none; @@ -151,7 +151,7 @@ } .sidebar-user { - padding-left: 10px; + padding-left: 12px; width: $sidebar_collapsed_width; .username { @@ -214,7 +214,7 @@ margin-left: 10px; width: $sidebar_width - 2 * 10px; font-size: 16px; - line-height: 36px; + line-height: 34px; } } @@ -235,8 +235,8 @@ overflow: hidden; img { - width: 40px; - height: 40px; + width: 36px; + height: 36px; float: left; } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 0d94fc106b3..64db6a85ded 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -41,7 +41,7 @@ .project-home-desc { h1 { margin: 0; - margin-bottom: 5px; + margin-bottom: 10px; font-size: 23px; font-weight: normal; } @@ -55,6 +55,10 @@ .git-clone-holder { max-width: 600px; margin: 20px auto; + + .form-control { + background: #FFF; + } } .visibility-level-label { @@ -65,7 +69,7 @@ } .project-repo-buttons { - margin-top: 25px; + margin-top: $gl-padding; margin-bottom: 25px; .btn { @@ -74,7 +78,7 @@ text-transform: uppercase; font-size: 15px; line-height: 20px; - padding: 10px 16px; + padding: 8px 14px; border-radius: 3px; margin-left: 10px; diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 0814b63600d..1275c42000b 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -14,7 +14,7 @@ = render partial: 'layouts/collapse_button' - if current_user = link_to current_user, class: 'sidebar-user' do - = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s40' + = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s36' .username = current_user.username .content-wrapper diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml index e83256d368d..b93036e78e6 100644 --- a/app/views/projects/_home_panel.html.haml +++ b/app/views/projects/_home_panel.html.haml @@ -1,7 +1,7 @@ - empty_repo = @project.empty_repo? .project-home-panel.clearfix{:class => ("empty-project" if empty_repo)} .project-identicon-holder - = project_icon(@project, alt: '', class: 'project-avatar avatar s140') + = project_icon(@project, alt: '', class: 'project-avatar avatar s90') .project-home-desc %h1= @project.name - if @project.description.present?