BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Unverified Commit 075f5ed9 by Phil Hughes
Options

Cleanup the fork layout

- Cleans the fork project layout by removing the grid & reverting back to full flexbox to allow for the layout to correctly expand. - Removes duplicated markup - Fixes a bug where the forked project would trigger the load indicator
parent 83fa3de4
Showing with 76 additions and 107 deletions
app/assets/javascripts/project_fork.js
export default () => {
$('.fork-thumbnail a').on('click', function forkThumbnailClicked() {
$('.js-fork-thumbnail').on('click', function forkThumbnailClicked() {
if ($(this).hasClass('disabled')) return false;
$('.fork-namespaces').hide();
return $('.save-project-loader').show();
return $('.js-fork-content').toggle();
});
};
app/assets/stylesheets/framework/avatar.scss
......@@ -23,6 +23,7 @@
&.s60 { @include avatar-size(60px, 12px); }
&.s70 { @include avatar-size(70px, 14px); }
&.s90 { @include avatar-size(90px, 15px); }
&.s100 { @include avatar-size(100px, 15px); }
&.s110 { @include avatar-size(110px, 15px); }
&.s140 { @include avatar-size(140px, 15px); }
&.s160 { @include avatar-size(160px, 20px); }
......@@ -78,6 +79,7 @@
&.s60 { font-size: 32px; line-height: 58px; }
&.s70 { font-size: 34px; line-height: 70px; }
&.s90 { font-size: 36px; line-height: 88px; }
&.s100 { font-size: 36px; line-height: 98px; }
&.s110 { font-size: 40px; line-height: 108px; font-weight: $gl-font-weight-normal; }
&.s140 { font-size: 72px; line-height: 138px; }
&.s160 { font-size: 96px; line-height: 158px; }
......
app/assets/stylesheets/pages/projects.scss
......@@ -499,73 +499,56 @@ a.deploy-project-label {
}
}
.fork-namespaces {
.row {
-webkit-flex-wrap: wrap;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.fork-thumbnail {
height: 200px;
width: calc((100% / 2) - #{$gl-padding * 2});
.fork-thumbnail {
border-radius: $border-radius-base;
background-color: $white-light;
border: 1px solid $border-white-light;
height: 202px;
margin: $gl-padding;
text-align: center;
width: 169px;
@media (min-width: $screen-md-min) {
width: calc((100% / 4) - #{$gl-padding * 2});
}
&:hover:not(.disabled),
&.forked {
background-color: $row-hover;
border-color: $row-hover-border;
}
@media (min-width: $screen-lg-min) {
width: calc((100% / 5) - #{$gl-padding * 2});
}
.no-avatar {
width: 100px;
height: 100px;
background-color: $gray-light;
border: 1px solid $white-normal;
margin: 0 auto;
border-radius: 50%;
i {
font-size: 100px;
color: $white-normal;
}
}
&:hover:not(.disabled),
&.forked {
background-color: $row-hover;
border-color: $row-hover-border;
}
a {
display: block;
width: 100%;
height: 100%;
padding-top: $gl-padding;
color: $gl-text-color;
&.disabled {
opacity: .3;
cursor: not-allowed;
&:hover {
text-decoration: none;
}
}
.caption {
min-height: 30px;
padding: $gl-padding 0;
}
}
.avatar-container,
.identicon {
float: none;
margin-left: auto;
margin-right: auto;
}
img {
border-radius: 50%;
max-width: 100px;
}
a {
display: block;
width: 100%;
height: 100%;
padding-top: $gl-padding;
text-decoration: none;
&.disabled {
opacity: .3;
cursor: not-allowed;
}
}
}
.fork-thumbnail-container {
display: flex;
flex-wrap: wrap;
margin-left: -$gl-padding;
margin-right: -$gl-padding;
> h5 {
width: 100%;
}
}
.project-template,
.project-import {
.form-group {
......
app/views/projects/forks/new.html.haml
......@@ -9,50 +9,35 @@
%br
Forking a repository allows you to make changes without affecting the original project.
.col-lg-9
.fork-namespaces
- if @namespaces.present?
%label.label-light
%span
Click to fork the project
- @namespaces.in_groups_of(6, false) do |group|
.row
- group.each do |namespace|
- avatar = namespace_icon(namespace, 100)
- if fork = namespace.find_fork_of(@project)
.fork-thumbnail.forked
= link_to project_path(fork) do
- if /no_((\w*)_)*avatar/.match(avatar)
.no-avatar
= icon 'question'
- else
= image_tag avatar
.caption
= namespace.human_name
- else
- can_create_project = current_user.can?(:create_projects, namespace)
.fork-thumbnail{ class: ("disabled" unless can_create_project) }
= link_to project_forks_path(@project, namespace_key: namespace.id),
method: "POST",
class: ("disabled has-tooltip" unless can_create_project),
title: (_('You have reached your project limit') unless can_create_project) do
- if /no_((\w*)_)*avatar/.match(avatar)
.no-avatar
= icon 'question'
- else
= image_tag avatar
.caption
= namespace.human_name
- else
%label.label-light
%span
No available namespaces to fork the project.
%br
%small
You must have permission to create a project in a namespace before forking.
- if @namespaces.present?
.fork-thumbnail-container.js-fork-content
%h5.prepend-top-0.append-bottom-0.prepend-left-default.append-right-default
Click to fork the project
- @namespaces.each do |namespace|
- avatar = namespace_icon(namespace, 100)
- can_create_project = current_user.can?(:create_projects, namespace)
- forked_project = namespace.find_fork_of(@project)
- fork_path = forked_project ? project_path(forked_project) : project_forks_path(@project, namespace_key: namespace.id)
.bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.append-bottom-default{ class: [("disabled" unless can_create_project), ("forked" if forked_project)] }
= link_to fork_path,
class: [("js-fork-thumbnail" unless forked_project), ("disabled has-tooltip" unless can_create_project)],
title: (_('You have reached your project limit') unless can_create_project) do
- if /no_((\w*)_)*avatar/.match(avatar)
= project_identicon(namespace, class: "avatar s100 identicon")
- else
.avatar-container.s100
= image_tag(avatar, class: "avatar s100")
%h5.prepend-top-default
= namespace.human_name
- else
%strong
No available namespaces to fork the project.
%p.prepend-top-default
You must have permission to create a project in a namespace before forking.
.save-project-loader.hide
.center
%h2
%i.fa.fa-spinner.fa-spin
Forking repository
%p Please wait a moment, this page will automatically refresh when ready.
.save-project-loader.hide.js-fork-content
%h2.text-center
= icon('spinner spin')
Forking repository
%p.text-center
Please wait a moment, this page will automatically refresh when ready.
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