diff options
| -rw-r--r-- | app/assets/javascripts/project_fork.js | 5 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/avatar.scss | 2 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 99 | ||||
| -rw-r--r-- | app/views/projects/forks/new.html.haml | 78 | ||||
| -rw-r--r-- | features/steps/project/fork.rb | 2 |
5 files changed, 78 insertions, 108 deletions
diff --git a/app/assets/javascripts/project_fork.js b/app/assets/javascripts/project_fork.js index 68cf47fd54e..65d46fa9a73 100644 --- a/app/assets/javascripts/project_fork.js +++ b/app/assets/javascripts/project_fork.js @@ -1,8 +1,7 @@ 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(); }); }; diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index bdcbd4021b3..f1aedc227f3 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/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; } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 1f7b6703909..a086c11324d 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/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 { diff --git a/app/views/projects/forks/new.html.haml b/app/views/projects/forks/new.html.haml index 906774a21e3..e9613534dde 100644 --- a/app/views/projects/forks/new.html.haml +++ b/app/views/projects/forks/new.html.haml @@ -9,50 +9,36 @@ %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, + method: "POST", + 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. diff --git a/features/steps/project/fork.rb b/features/steps/project/fork.rb index f88738b4c61..3490bbd968c 100644 --- a/features/steps/project/fork.rb +++ b/features/steps/project/fork.rb @@ -26,7 +26,7 @@ class Spinach::Features::ProjectFork < Spinach::FeatureSteps end step 'I fork to my namespace' do - page.within '.fork-namespaces' do + page.within '.fork-thumbnail-container' do click_link current_user.name end end |