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
This commit is contained in:
commit
fe9246bf68
|
@ -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
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.project-avatar {
|
||||||
|
float: none;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
&.identicon {
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cover-controls {
|
.project-title {
|
||||||
.project-settings-dropdown {
|
margin-top: 10px;
|
||||||
margin-left: 10px;
|
margin-bottom: 10px;
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
left: auto;
|
|
||||||
width: auto;
|
|
||||||
right: 0;
|
|
||||||
max-width: 240px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-title {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-image-container {
|
|
||||||
@include make-sm-column(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 {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-info {
|
|
||||||
@include make-sm-column(10);
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
margin: 0;
|
line-height: 1;
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
margin-left: 2px;
|
||||||
|
font-size: 12px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-home-desc {
|
.project-home-desc {
|
||||||
p {
|
margin-left: auto;
|
||||||
margin: 0;
|
margin-right: auto;
|
||||||
}
|
margin-bottom: 15px;
|
||||||
}
|
max-width: 480px;
|
||||||
}
|
|
||||||
|
|
||||||
.identicon {
|
> p {
|
||||||
float: left;
|
margin-bottom: 0;
|
||||||
@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,6 +116,7 @@
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.project-repo-buttons {
|
.project-repo-buttons {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
|
@ -160,8 +124,6 @@
|
||||||
.btn {
|
.btn {
|
||||||
@include btn-gray;
|
@include btn-gray;
|
||||||
padding: 3px 10px;
|
padding: 3px 10px;
|
||||||
text-transform: none;
|
|
||||||
background-color: $background-color;
|
|
||||||
|
|
||||||
.fa {
|
.fa {
|
||||||
color: $layout-link-gray;
|
color: $layout-link-gray;
|
||||||
|
@ -172,19 +134,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
.project-repo-btn-group,
|
||||||
|
.notification-dropdown {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.count-buttons {
|
.count-buttons {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
margin-top: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-clone-holder {
|
.project-clone-holder {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 16px;
|
|
||||||
|
|
||||||
input {
|
input {
|
||||||
height: 29px;
|
height: 29px;
|
||||||
|
@ -210,6 +171,7 @@
|
||||||
margin-top: -6px;
|
margin-top: -6px;
|
||||||
border-width: 7px 5px 7px 0;
|
border-width: 7px 5px 7px 0;
|
||||||
border-right-color: #dce0e5;
|
border-right-color: #dce0e5;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
|
@ -224,6 +186,7 @@
|
||||||
margin-top: -9px;
|
margin-top: -9px;
|
||||||
border-width: 10px 7px 10px 0;
|
border-width: 10px 7px 10px 0;
|
||||||
border-right-color: #fff;
|
border-right-color: #fff;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.count {
|
.count {
|
||||||
|
@ -242,7 +205,6 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
touch-action: manipulation;
|
touch-action: manipulation;
|
||||||
cursor: pointer;
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: 0 10px 0 4px;
|
margin: 0 10px 0 4px;
|
||||||
|
@ -258,26 +220,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-right-buttons {
|
|
||||||
position: absolute;
|
|
||||||
right: 16px;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
@media (max-width: $screen-md-max) {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $screen-md-max) {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.project-info,
|
|
||||||
.project-image-container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.split-one {
|
.split-one {
|
||||||
display: inline-table;
|
display: inline-table;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
|
@ -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 {
|
&:hover,
|
||||||
display: inline;
|
&:focus {
|
||||||
|
color: darken($notes-light-color, 15%);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
float: left;
|
|
||||||
font-size: 17px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
li.missing {
|
li.missing {
|
||||||
|
@ -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 {
|
||||||
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 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
|
|
|
@ -1,22 +1,18 @@
|
||||||
- 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-info
|
|
||||||
.cover-title.project-home-desc
|
|
||||||
%h1
|
|
||||||
= @project.name
|
= @project.name
|
||||||
%span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}
|
%span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}
|
||||||
= visibility_level_icon(@project.visibility_level, fw: false)
|
= visibility_level_icon(@project.visibility_level, fw: false)
|
||||||
|
|
||||||
|
.project-home-desc
|
||||||
- if @project.description.present?
|
- if @project.description.present?
|
||||||
.cover-desc.project-home-desc
|
|
||||||
= 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)
|
||||||
|
@ -29,13 +25,5 @@
|
||||||
.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();
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
.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)
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -12,8 +12,7 @@
|
||||||
= 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
|
||||||
|
@ -61,10 +60,18 @@
|
||||||
%li.missing
|
%li.missing
|
||||||
= link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do
|
= link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do
|
||||||
Set Up CI
|
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
|
||||||
|
|
||||||
|
.btn-group.project-repo-btn-group
|
||||||
|
= render "projects/buttons/download"
|
||||||
|
= render 'projects/buttons/dropdown'
|
||||||
|
|
||||||
|
= 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 }
|
||||||
|
|
Loading…
Reference in New Issue