diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-10-04 15:59:43 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-10-04 15:59:43 +0000 |
commit | 6552ec3d266298fe3ff52de45aadda579dfd79ae (patch) | |
tree | 0c5421c9a864ca3ac74760db74f0e7f4c941c5bd /app/assets | |
parent | 8ace5fc1889f12f4fa07abe80226b179049db952 (diff) | |
parent | 193bc5268676fd2a639b6c0f9d4be3ba2d8f2086 (diff) | |
download | gitlab-ce-6552ec3d266298fe3ff52de45aadda579dfd79ae.tar.gz |
Merge branch 'fork-layout-cleanup' into 'master'
Cleanup the fork layout
See merge request gitlab-org/gitlab-ce!14617
Diffstat (limited to 'app/assets')
-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 |
3 files changed, 45 insertions, 61 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 { |