Skip to content

G
gitlab-ce
Commit fe9246bf authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets
Browse files
Options

Merge branch 'project-header' into 'master' 

Updated project header

## What does this MR do?

Updates the project header.

## What are the relevant issue numbers?

Closes #18544, #18832 

## Screenshots (if relevant)

![Screen_Shot_2016-06-29_at_14.16.16](/uploads/4df895e7ecf42e5ddab3f2f1e47f8c7e/Screen_Shot_2016-06-29_at_14.16.16.png)


See merge request !4989
parents 5323fe41 e3390901
Hide whitespace changes
Inline Side-by-side
Showing with 248 additions and 296 deletions
CHANGELOG
View file @ fe9246bf
...@@ -16,6 +16,7 @@ v 8.10.0 (unreleased) ...@@ -16,6 +16,7 @@ v 8.10.0 (unreleased)
- Fix check for New Branch button on Issue page !4630 (winniehell) - Fix check for New Branch button on Issue page !4630 (winniehell)
- Fix MR-auto-close text added to description. !4836 - Fix MR-auto-close text added to description. !4836
- Fix pagination when sorting by columns with lots of ties (like priority) - Fix pagination when sorting by columns with lots of ties (like priority)
- Updated project header design
- Exclude email check from the standard health check - Exclude email check from the standard health check
- Fix changing issue state columns in milestone view - Fix changing issue state columns in milestone view
- Add notification settings dropdown for groups - Add notification settings dropdown for groups
......
app/assets/stylesheets/pages/projects.scss
View file @ fe9246bf
...@@ -64,86 +64,49 @@ ...@@ -64,86 +64,49 @@
} }
.project-home-panel { .project-home-panel {
background: $white-light; padding-top: 24px;
text-align: left; padding-bottom: 24px;
padding: 24px 0;
.container-fluid { @media (min-width: $screen-sm-min) {
position: relative; border-bottom: 1px solid $border-color;
@media (min-width: $screen-lg-min) {
.row {
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
}
}
} }
.cover-controls { .project-avatar {
.project-settings-dropdown { float: none;
margin-left: 10px; margin-left: auto;
display: inline-block; margin-right: auto;
.dropdown-menu { &.identicon {
left: auto; border-radius: 50%;
width: auto;
right: 0;
max-width: 240px;
}
} }
} }
.cover-title { .project-title {
margin-bottom: 0; margin-top: 10px;
} margin-bottom: 10px;
font-size: 24px;
.project-image-container { font-weight: 400;
@include make-sm-column(1); line-height: 1;
max-width: 86px;
min-width: 86px;
padding-right: 0;
@media (max-width: $screen-md-max) {
padding-left: 0;
margin: 0 0 10px;
max-width: none;
min-width: none;
.avatar.s70 { .fa {
margin: auto; margin-left: 2px;
} font-size: 12px;
vertical-align: middle;
} }
} }
.project-info { .project-home-desc {
@include make-sm-column(10); margin-left: auto;
margin-right: auto;
h1 { margin-bottom: 15px;
font-size: 24px; max-width: 480px;
font-weight: normal;
margin: 0;
}
.project-home-desc { > p {
p { margin-bottom: 0;
margin: 0;
}
} }
} }
.identicon {
float: left;
@include border-radius(50%);
}
.avatar {
float: none;
}
.notifications-btn { .notifications-btn {
.fa-bell, .fa-bell,
.fa-spinner { .fa-spinner {
margin-right: 6px; margin-right: 6px;
...@@ -153,127 +116,106 @@ ...@@ -153,127 +116,106 @@
margin-left: 6px; margin-left: 6px;
} }
} }
}
.project-repo-buttons { .project-repo-buttons {
font-size: 0; font-size: 0;
.btn {
@include btn-gray;
padding: 3px 10px;
text-transform: none;
background-color: $background-color;
.fa { .btn {
color: $layout-link-gray; @include btn-gray;
} padding: 3px 10px;
.fa-caret-down { .fa {
margin-left: 3px; color: $layout-link-gray;
}
} }
form { .fa-caret-down {
margin-left: 10px; margin-left: 3px;
} }
}
.count-buttons { .project-repo-btn-group,
display: inline-block; .notification-dropdown {
vertical-align: top; margin-left: 10px;
margin-top: 16px; }
}
.project-clone-holder { .count-buttons {
display: inline-block; display: inline-block;
margin-top: 16px; vertical-align: top;
}
input { .project-clone-holder {
height: 29px; display: inline-block;
}
input {
height: 29px;
} }
}
.count-with-arrow { .count-with-arrow {
display: inline-block; display: inline-block;
position: relative; position: relative;
margin-left: 4px; margin-left: 4px;
.arrow { .arrow {
&:before { &:before {
content: ''; content: '';
display: inline-block;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: 50%;
left: 0;
margin-top: -6px;
border-width: 7px 5px 7px 0;
border-right-color: #dce0e5;
}
&:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: 50%;
left: 1px;
margin-top: -9px;
border-width: 10px 7px 10px 0;
border-right-color: #fff;
}
}
.count {
@include btn-gray;
display: inline-block; display: inline-block;
background: white; position: absolute;
border-radius: 2px; width: 0;
border-width: 1px; height: 0;
border-color: transparent;
border-style: solid; border-style: solid;
font-size: 13px; top: 50%;
font-weight: 600; left: 0;
line-height: 13px; margin-top: -6px;
padding: $gl-vert-padding $gl-padding; border-width: 7px 5px 7px 0;
letter-spacing: .4px; border-right-color: #dce0e5;
padding: 7px 14px; pointer-events: none;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
white-space: nowrap;
margin: 0 10px 0 4px;
a {
color: inherit;
}
&:hover {
background: #fff;
}
} }
}
}
.project-right-buttons {
position: absolute;
right: 16px;
bottom: 0;
@media (max-width: $screen-md-max) { &:after {
top: 0; content: '';
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: 50%;
left: 1px;
margin-top: -9px;
border-width: 10px 7px 10px 0;
border-right-color: #fff;
pointer-events: none;
}
} }
} .count {
@include btn-gray;
@media (max-width: $screen-md-max) { display: inline-block;
text-align: center; background: white;
border-radius: 2px;
border-width: 1px;
border-style: solid;
font-size: 13px;
font-weight: 600;
line-height: 13px;
padding: $gl-vert-padding $gl-padding;
letter-spacing: .4px;
padding: 7px 14px;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
background-image: none;
white-space: nowrap;
margin: 0 10px 0 4px;
a {
color: inherit;
}
.project-info, &:hover {
.project-image-container { background: #fff;
width: 100%; }
} }
} }
} }
...@@ -421,36 +363,42 @@ a.deploy-project-label { ...@@ -421,36 +363,42 @@ a.deploy-project-label {
} }
.project-stats { .project-stats {
margin-top: $gl-padding;
margin-bottom: 0;
padding: 0;
background-color: $white-light;
font-size: 0; font-size: 0;
border-bottom: 1px solid $border-color;
ul.nav { .nav {
display: inline-block; padding-top: 12px;
padding-bottom: 12px;
} }
.nav li { .nav > li {
display: inline-block; display: inline-block;
margin: 16px 0;
margin-right: 16px; &:not(:last-child) {
margin-right: $gl-padding;
}
&.project-repo-buttons-right {
margin-top: 10px;
@media (min-width: $screen-md-min) {
float: right;
margin-top: 0;
}
}
} }
.nav > li > a { .nav > li > a {
padding: 0;
background-color: transparent; background-color: transparent;
padding: 5px 10px;
font-size: 15px; font-size: 15px;
line-height: 29px;
color: $notes-light-color; color: $notes-light-color;
}
li {
display: inline;
}
a { &:hover,
float: left; &:focus {
font-size: 17px; color: darken($notes-light-color, 15%);
}
} }
li.missing { li.missing {
...@@ -458,6 +406,8 @@ a.deploy-project-label { ...@@ -458,6 +406,8 @@ a.deploy-project-label {
border-radius: $border-radius-default; border-radius: $border-radius-default;
a { a {
padding-left: 10px;
padding-right: 10px;
color: $notes-light-color; color: $notes-light-color;
display: block; display: block;
} }
...@@ -466,10 +416,6 @@ a.deploy-project-label { ...@@ -466,10 +416,6 @@ a.deploy-project-label {
background-color: $gray-normal; background-color: $gray-normal;
} }
} }
&.row-content-block.second-block {
margin-top: 0;
}
} }
pre.light-well { pre.light-well {
...@@ -557,8 +503,32 @@ pre.light-well { ...@@ -557,8 +503,32 @@ pre.light-well {
} }
.project-last-commit { .project-last-commit {
@media (min-width: $screen-sm-min) {
margin-top: $gl-padding;
}
&.container-fluid {
padding-top: 12px;
padding-bottom: 12px;
background-color: $background-color;
border: 1px solid $border-color;
border-right-width: 0;
border-left-width: 0;
@media (min-width: $screen-sm-min) {
border-right-width: 1px;
border-left-width: 1px;
}
}
&.container-limited {
@media (min-width: 1281px) {
border-radius: $border-radius-base;
}
}
.ci-status { .ci-status {
margin-right: 16px; margin-right: $gl-padding;
} }
.commit-row-message { .commit-row-message {
...@@ -566,19 +536,12 @@ pre.light-well { ...@@ -566,19 +536,12 @@ pre.light-well {
} }
.commit_short_id { .commit_short_id {
margin: 0 5px; margin-right: 5px;
color: $gl-link-color; color: $gl-link-color;
font-weight: 600; font-weight: 600;
} }
.commit-author-link { .commit-author-link {
margin-left: 7px;
text-decoration: none;
.avatar {
float: none;
margin-right: 4px;
}
.commit-author-name { .commit-author-name {
font-weight: 600; font-weight: 600;
} }
...@@ -601,15 +564,10 @@ pre.light-well { ...@@ -601,15 +564,10 @@ pre.light-well {
} }
.git-clone-holder { .git-clone-holder {
width: 498px; width: 380px;
.btn-clipboard { .btn-clipboard {
border: 1px solid $border-color; border: 1px solid $border-color;
padding: 6px $gl-padding;
}
.project-home-dropdown + & {
margin-right: 45px;
} }
.clone-options { .clone-options {
......
app/views/projects/_home_panel.html.haml
View file @ fe9246bf
- empty_repo = @project.empty_repo? - empty_repo = @project.empty_repo?
.project-home-panel.cover-block.clearfix{:class => ("empty-project" if empty_repo)} .project-home-panel.text-center{ class: ("empty-project" if empty_repo) }
%div{ class: container_class } %div{ class: container_class }
.row = project_icon(@project, alt: @project.name, class: 'project-avatar avatar s70')
.project-image-container %h1.project-title
= project_icon(@project, alt: '', class: 'project-avatar avatar s70') = @project.name
.project-info %span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}
.cover-title.project-home-desc = visibility_level_icon(@project.visibility_level, fw: false)
%h1
= @project.name
%span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}
= visibility_level_icon(@project.visibility_level, fw: false)
- if @project.description.present? .project-home-desc
.cover-desc.project-home-desc - if @project.description.present?
= markdown(@project.description, pipeline: :description) = markdown(@project.description, pipeline: :description)
- if forked_from_project = @project.forked_from_project - if forked_from_project = @project.forked_from_project
.cover-desc %p
Forked from Forked from
= link_to project_path(forked_from_project) do = link_to project_path(forked_from_project) do
= forked_from_project.namespace.try(:name) = forked_from_project.namespace.try(:name)
.project-repo-buttons.project-action-buttons .project-repo-buttons.project-action-buttons
.count-buttons .count-buttons
= render 'projects/buttons/star' = render 'projects/buttons/star'
= render 'projects/buttons/fork' = render 'projects/buttons/fork'
.project-clone-holder .project-clone-holder
= render "shared/clone_panel" = render "shared/clone_panel"
.project-repo-buttons.btn-group.project-right-buttons
- if current_user
.pull-left.append-right-10= render 'shared/members/access_request_buttons', source: @project
= render "projects/buttons/download"
= render 'projects/buttons/dropdown'
= render 'shared/notifications/button', notification_setting: @notification_setting
:javascript :javascript
new Star(); new Star();
app/views/projects/_last_commit.html.haml
View file @ fe9246bf
.project-last-commit - if commit.status
- if commit.status = link_to builds_namespace_project_commit_path(commit.project.namespace, commit.project, commit), class: "ci-status ci-#{commit.status}" do
= link_to builds_namespace_project_commit_path(commit.project.namespace, commit.project, commit), class: "ci-status ci-#{commit.status}" do = ci_icon_for_status(commit.status)
= ci_icon_for_status(commit.status) = ci_label_for_status(commit.status)
= ci_label_for_status(commit.status)
= link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id" = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
= link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit), class: "commit-row-message" = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit), class: "commit-row-message"
· ·
#{time_ago_with_tooltip(commit.committed_date, skip_js: true)} by #{time_ago_with_tooltip(commit.committed_date, skip_js: true)} by
= commit_author_link(commit, avatar: true, size: 24) = commit_author_link(commit, avatar: true, size: 24)
app/views/projects/buttons/_fork.html.haml
View file @ fe9246bf
...@@ -14,6 +14,5 @@ ...@@ -14,6 +14,5 @@
Fork Fork
%div.count-with-arrow %div.count-with-arrow
%span.arrow %span.arrow
%span.count = link_to namespace_project_forks_path(@project.namespace, @project), class: "count" do
= link_to namespace_project_forks_path(@project.namespace, @project) do = @project.forks_count
= @project.forks_count
app/views/projects/show.html.haml
View file @ fe9246bf
...@@ -12,60 +12,67 @@ ...@@ -12,60 +12,67 @@
= render 'projects/last_push' = render 'projects/last_push'
= render "home_panel" = render "home_panel"
.project-stats.row-content-block.second-block %nav.project-stats{ class: (container_class) }
%div{ class: container_class } %ul.nav
%ul.nav %li
%li = link_to project_files_path(@project) do
= link_to project_files_path(@project) do Files (#{repository_size})
Files (#{repository_size}) %li
%li = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
= link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do #{'Commit'.pluralize(@project.commit_count)} (#{number_with_delimiter(@project.commit_count)})
#{'Commit'.pluralize(@project.commit_count)} (#{number_with_delimiter(@project.commit_count)}) %li
%li = link_to namespace_project_branches_path(@project.namespace, @project) do
= link_to namespace_project_branches_path(@project.namespace, @project) do #{'Branch'.pluralize(@repository.branch_count)} (#{number_with_delimiter(@repository.branch_count)})
#{'Branch'.pluralize(@repository.branch_count)} (#{number_with_delimiter(@repository.branch_count)}) %li
= link_to namespace_project_tags_path(@project.namespace, @project) do
#{'Tag'.pluralize(@repository.tag_count)} (#{number_with_delimiter(@repository.tag_count)})
- if default_project_view != 'readme' && @repository.readme
%li %li
= link_to namespace_project_tags_path(@project.namespace, @project) do = link_to 'Readme', readme_path(@project)
#{'Tag'.pluralize(@repository.tag_count)} (#{number_with_delimiter(@repository.tag_count)})
- if default_project_view != 'readme' && @repository.readme - if @repository.changelog
%li %li
= link_to 'Readme', readme_path(@project) = link_to 'Changelog', changelog_path(@project)
- if @repository.changelog - if @repository.license_blob
%li %li
= link_to 'Changelog', changelog_path(@project) = link_to license_short_name(@project), license_path(@project)
- if @repository.license_blob - if @repository.contribution_guide
%li %li
= link_to license_short_name(@project), license_path(@project) = link_to 'Contribution guide', contribution_guide_path(@project)
- if @repository.contribution_guide - if current_user && can_push_branch?(@project, @project.default_branch)
%li - unless @repository.changelog
= link_to 'Contribution guide', contribution_guide_path(@project) %li.missing
= link_to add_special_file_path(@project, file_name: 'CHANGELOG') do
Add Changelog
- unless @repository.license_blob
%li.missing
= link_to add_special_file_path(@project, file_name: 'LICENSE') do
Add License
- unless @repository.contribution_guide
%li.missing
= link_to add_special_file_path(@project, file_name: 'CONTRIBUTING.md', commit_message: 'Add contribution guide') do
Add Contribution guide
- unless @repository.gitlab_ci_yml
%li.missing
= link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do
Set Up CI
%li.project-repo-buttons-right
.project-repo-buttons.project-right-buttons
- if current_user
= render 'shared/members/access_request_buttons', source: @project
- if current_user && can_push_branch?(@project, @project.default_branch) .btn-group.project-repo-btn-group
- unless @repository.changelog = render "projects/buttons/download"
%li.missing = render 'projects/buttons/dropdown'
= link_to add_special_file_path(@project, file_name: 'CHANGELOG') do
Add Changelog
- unless @repository.license_blob
%li.missing
= link_to add_special_file_path(@project, file_name: 'LICENSE') do
Add License
- unless @repository.contribution_guide
%li.missing
= link_to add_special_file_path(@project, file_name: 'CONTRIBUTING.md', commit_message: 'Add contribution guide') do
Add Contribution guide
- unless @repository.gitlab_ci_yml
%li.missing
= link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do
Set Up CI
= render 'shared/notifications/button', notification_setting: @notification_setting
- if @repository.commit - if @repository.commit
.content-block.second-block.white .project-last-commit{ class: container_class }
%div{ class: container_class } = render 'projects/last_commit', commit: @repository.commit, project: @project
= render 'projects/last_commit', commit: @repository.commit, project: @project
%div{ class: container_class } %div{ class: container_class }
- if @project.archived? - if @project.archived?
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7