Merge branch 'fork-layout-cleanup' into 'master'

Cleanup the fork layout

See merge request gitlab-org/gitlab-ce!14617

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