diff options
author | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2016-07-05 19:27:16 +0300 |
---|---|---|
committer | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2016-07-05 19:27:16 +0300 |
commit | fe9246bf6850c35ee880ec9f67af5090c537a68a (patch) | |
tree | 79d2237e62d6a34c935762a974729de53f69e2e5 /app/assets | |
parent | 5323fe418b4ce6e9c28dac9a6b975d7ec604ec0e (diff) | |
parent | e3390901a3d614a30d073ecb890d5c335e02616e (diff) |
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
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 368 |
1 files changed, 163 insertions, 205 deletions
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 817c2982923..3325b586496 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -64,86 +64,49 @@ } .project-home-panel { - background: $white-light; - text-align: left; - padding: 24px 0; + padding-top: 24px; + padding-bottom: 24px; - .container-fluid { - position: relative; - - @media (min-width: $screen-lg-min) { - .row { - display: flex; - -ms-flex-align: center; - -webkit-align-items: center; - -webkit-box-align: center; - } - } + @media (min-width: $screen-sm-min) { + border-bottom: 1px solid $border-color; } - .cover-controls { - .project-settings-dropdown { - margin-left: 10px; - display: inline-block; + .project-avatar { + float: none; + margin-left: auto; + margin-right: auto; - .dropdown-menu { - left: auto; - width: auto; - right: 0; - max-width: 240px; - } + &.identicon { + border-radius: 50%; } } - .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; + .project-title { + margin-top: 10px; + margin-bottom: 10px; + font-size: 24px; + font-weight: 400; + line-height: 1; - .avatar.s70 { - margin: auto; - } + .fa { + margin-left: 2px; + font-size: 12px; + vertical-align: middle; } } - .project-info { - @include make-sm-column(10); - - h1 { - font-size: 24px; - font-weight: normal; - margin: 0; - } + .project-home-desc { + margin-left: auto; + margin-right: auto; + margin-bottom: 15px; + max-width: 480px; - .project-home-desc { - p { - margin: 0; - } + > p { + margin-bottom: 0; } } - .identicon { - float: left; - @include border-radius(50%); - } - - .avatar { - float: none; - } - .notifications-btn { - .fa-bell, .fa-spinner { margin-right: 6px; @@ -153,127 +116,106 @@ margin-left: 6px; } } +} - .project-repo-buttons { - font-size: 0; - - .btn { - @include btn-gray; - padding: 3px 10px; - text-transform: none; - background-color: $background-color; +.project-repo-buttons { + font-size: 0; - .fa { - color: $layout-link-gray; - } + .btn { + @include btn-gray; + padding: 3px 10px; - .fa-caret-down { - margin-left: 3px; - } + .fa { + color: $layout-link-gray; } - form { - margin-left: 10px; + .fa-caret-down { + margin-left: 3px; } + } - .count-buttons { - display: inline-block; - vertical-align: top; - margin-top: 16px; - } + .project-repo-btn-group, + .notification-dropdown { + margin-left: 10px; + } - .project-clone-holder { - display: inline-block; - margin-top: 16px; + .count-buttons { + display: inline-block; + vertical-align: top; + } - input { - height: 29px; - } + .project-clone-holder { + display: inline-block; + + input { + height: 29px; } + } - .count-with-arrow { - display: inline-block; - position: relative; - margin-left: 4px; - - .arrow { - &:before { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 50%; - left: 0; - margin-top: -6px; - border-width: 7px 5px 7px 0; - border-right-color: #dce0e5; - } - - &:after { - content: ''; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 50%; - left: 1px; - margin-top: -9px; - border-width: 10px 7px 10px 0; - border-right-color: #fff; - } - } - .count { - @include btn-gray; + .count-with-arrow { + display: inline-block; + position: relative; + margin-left: 4px; + + .arrow { + &:before { + content: ''; display: inline-block; - background: white; - border-radius: 2px; - border-width: 1px; + position: absolute; + width: 0; + height: 0; + border-color: transparent; border-style: solid; - font-size: 13px; - font-weight: 600; - line-height: 13px; - padding: $gl-vert-padding $gl-padding; - letter-spacing: .4px; - padding: 7px 14px; - text-align: center; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - background-image: none; - white-space: nowrap; - margin: 0 10px 0 4px; - - a { - color: inherit; - } - - &:hover { - background: #fff; - } + top: 50%; + left: 0; + margin-top: -6px; + border-width: 7px 5px 7px 0; + border-right-color: #dce0e5; + pointer-events: none; } - } - } - - .project-right-buttons { - position: absolute; - right: 16px; - bottom: 0; - @media (max-width: $screen-md-max) { - top: 0; + &:after { + content: ''; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: 50%; + left: 1px; + margin-top: -9px; + border-width: 10px 7px 10px 0; + border-right-color: #fff; + pointer-events: none; + } } - } - - @media (max-width: $screen-md-max) { - text-align: center; + .count { + @include btn-gray; + display: inline-block; + background: white; + border-radius: 2px; + border-width: 1px; + border-style: solid; + font-size: 13px; + font-weight: 600; + line-height: 13px; + padding: $gl-vert-padding $gl-padding; + letter-spacing: .4px; + padding: 7px 14px; + text-align: center; + vertical-align: middle; + touch-action: manipulation; + background-image: none; + white-space: nowrap; + margin: 0 10px 0 4px; + + a { + color: inherit; + } - .project-info, - .project-image-container { - width: 100%; + &:hover { + background: #fff; + } } } } @@ -421,36 +363,42 @@ a.deploy-project-label { } .project-stats { - margin-top: $gl-padding; - margin-bottom: 0; - padding: 0; - background-color: $white-light; font-size: 0; + border-bottom: 1px solid $border-color; - ul.nav { - display: inline-block; + .nav { + padding-top: 12px; + padding-bottom: 12px; } - .nav li { + .nav > li { 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 { + padding: 0; background-color: transparent; - padding: 5px 10px; font-size: 15px; + line-height: 29px; color: $notes-light-color; - } - - li { - display: inline; - } - a { - float: left; - font-size: 17px; + &:hover, + &:focus { + color: darken($notes-light-color, 15%); + } } li.missing { @@ -458,6 +406,8 @@ a.deploy-project-label { border-radius: $border-radius-default; a { + padding-left: 10px; + padding-right: 10px; color: $notes-light-color; display: block; } @@ -466,10 +416,6 @@ a.deploy-project-label { background-color: $gray-normal; } } - - &.row-content-block.second-block { - margin-top: 0; - } } pre.light-well { @@ -557,8 +503,32 @@ pre.light-well { } .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 { - margin-right: 16px; + margin-right: $gl-padding; } .commit-row-message { @@ -566,19 +536,12 @@ pre.light-well { } .commit_short_id { - margin: 0 5px; + margin-right: 5px; color: $gl-link-color; font-weight: 600; } .commit-author-link { - margin-left: 7px; - text-decoration: none; - .avatar { - float: none; - margin-right: 4px; - } - .commit-author-name { font-weight: 600; } @@ -601,15 +564,10 @@ pre.light-well { } .git-clone-holder { - width: 498px; + width: 380px; .btn-clipboard { border: 1px solid $border-color; - padding: 6px $gl-padding; - } - - .project-home-dropdown + & { - margin-right: 45px; } .clone-options { |