Redesign project page header

12 files changed, 208 insertions, 119 deletions

diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index f5ce70b606b..bb8d71fbae8 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -45,6 +45,7 @@
   &.s32 { font-size: 20px; line-height: 32px; }
   &.s40 { font-size: 16px; line-height: 40px; }
   &.s60 { font-size: 32px; line-height: 60px; }
+  &.s70 { font-size: 34px; line-height: 70px; }
   &.s90 { font-size: 36px; line-height: 90px; }
   &.s110 { font-size: 40px; line-height: 112px; font-weight: 300; }
   &.s140 { font-size: 72px; line-height: 140px; }
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 434a26d57c6..6981f834d30 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -24,8 +24,8 @@
   background-color: $background-color;
   padding: $gl-padding;
   margin-bottom: 0;
-  border-top: 1px solid $border-color;
-  border-bottom: 1px solid $border-color;
+  border-top: 1px solid $white-dark;
+  border-bottom: 1px solid $white-dark;
   color: $gl-gray;
 
   &.oneline-block {
@@ -110,9 +110,9 @@
   .cover-title {
     color: $gl-header-color;
     margin: 0;
-    font-size: 23px;
+    font-size: 24px;
     font-weight: normal;
-    margin: 16px 0 5px;
+    margin-bottom: 5px;
     color: #4c4e54;
     font-size: 23px;
     line-height: 1.1;
@@ -137,7 +137,6 @@
   }
 
   .cover-desc {
-    padding: 0 $gl-padding 3px;
     color: $gl-text-color;
 
     &.username:last-child {
@@ -205,7 +204,7 @@
 
 .content-block {
   padding: $gl-padding 0;
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $white-dark;
 
   &.oneline-block {
     line-height: 36px;
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index 33cbee85987..bd531f8376b 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -48,10 +48,6 @@
       display: block;
     }
 
-    .project-home-desc {
-      font-size: 21px;
-    }
-
     .project-repo-buttons,
     .git-clone-holder {
       display: none;
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 2e1aa884d9c..4e4a1d71a47 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -250,6 +250,11 @@
     height: 51px;
     white-space: nowrap;
     overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
     li {
 
@@ -283,4 +288,8 @@
       margin-top: 96px;
     }
   }
+
+  .right-sidebar {
+    top: 102px;
+  }
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 5fa4c266607..a769077bc83 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -119,8 +119,8 @@ $border-white-light: #f1f2f4;
 $border-white-normal: #d6dae2;
 $border-white-dark: #c6cacf;
 
-$border-gray-light: rgba(0, 0, 0, 0.06);
-$border-gray-normal: rgba(0, 0, 0, 0.10);;
+$border-gray-light: rgba(209, 209, 209, 0.70);
+$border-gray-normal: rgba(0, 0, 0, 0.10);
 $border-gray-dark: #c6cacf;
 
 $border-green-light: #2faa60;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c20f04653fc..faf3c84ba2c 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -26,8 +26,13 @@
 }
 
 .project-home-panel {
-  padding-bottom: 40px;
-  border-bottom: 1px solid $border-color;
+  background: $white-light;
+  text-align: left;
+  padding: 24px 0;
+
+  .container-fluid {
+    position: relative;
+  }
 
   .cover-controls {
     .project-settings-dropdown {
@@ -43,21 +48,50 @@
     }
   }
 
-  .project-identicon-holder {
-    margin-bottom: 16px;
+  .project-image-container {
+    @include make-sm-column(1);
+    max-width: 86px;
+    min-width: 86px;
+    padding-right: 0;
 
-    .avatar, .identicon {
-      margin: 0 auto;
-      float: none;
+    @media (max-width: $screen-md-max) {
+      padding-left: 0;
+      margin-bottom: 10px;
+      max-width: none;
+      min-width: none;
+
+      .avatar.s70 {
+        margin: auto;
+      }
     }
+  }
 
-    .identicon {
-      @include border-radius(50%);
+  .project-info {
+    @include make-sm-column(10);
+
+    h1 {
+      font-size: 24px;
+      font-weight: normal;
+      margin: 0;
+    }
+
+    .project-home-desc {
+      p {
+        margin: 0;
+      }
     }
   }
 
+  .identicon {
+    float: left;
+    @include border-radius(50%);
+  }
+
+  .avatar {
+    float: none;
+  }
+
   .notifications-btn {
-    margin-top: -28px;
 
     .fa-bell {
       margin-right: 6px;
@@ -69,28 +103,45 @@
   }
 
   .project-repo-buttons {
-    margin-top: 20px;
-    margin-bottom: 0;
+    font-size: 0;
 
-    .count-buttons {
-      display: block;
-      margin-bottom: 20px;
-    }
+    .btn {
+      @include btn-gray;
+      padding: 3px 10px;
+      text-transform: none;
+      background-color: $background-color;
 
-    .clone-row {
-      .split-repo-buttons,
-      .project-clone-holder {
-        display: inline-block;
+      .fa {
+        color: $layout-link-gray;
       }
 
-      .split-repo-buttons {
-        margin: 0 12px;
+      .fa-caret-down {
+        margin-left: 3px;
       }
     }
 
-    .btn {
-      @include btn-gray;
-      text-transform: none;
+    .btn-group:not(:first-child):not(:last-child) > .btn {
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+
+    form {
+      margin-left: 10px;
+    }
+
+    .count-buttons {
+      display: inline-block;
+      vertical-align: top;
+      margin-top: 16px;
+    }
+
+    .project-clone-holder {
+      display: inline-block;
+      margin-top: 16px;
+
+      input {
+        height: 29px;
+      }
     }
 
     .count-with-arrow {
@@ -140,14 +191,14 @@
         line-height: 13px;
         padding: $gl-vert-padding $gl-padding;
         letter-spacing: .4px;
-        padding: 10px 14px;
+        padding: 7px 14px;
         text-align: center;
         vertical-align: middle;
         touch-action: manipulation;
         cursor: pointer;
         background-image: none;
         white-space: nowrap;
-        margin: 0 11px 0 4px;
+        margin: 0 10px 0 4px;
 
         &:hover {
           background: #fff;
@@ -155,6 +206,30 @@
       }
     }
   }
+
+  .project-right-buttons {
+    position: absolute;
+    right: 16px;
+    bottom: 0;
+
+    .btn {
+      padding: 3px 10px;
+      background-color: $background-color;
+    }
+
+    @media (max-width: 1304px) {
+      top: -6px;
+    }
+  }
+
+  @media (max-width: $screen-md-max) {
+    text-align: center;
+
+    .project-info,
+    .project-image-container {
+      width: 100%;
+    }
+  }
 }
 
 .split-one {
@@ -285,11 +360,11 @@ a.deploy-project-label {
 }
 
 .project-stats {
-  text-align: center;
   margin-top: $gl-padding;
   margin-bottom: 0;
-  padding-top: 10px;
-  padding-bottom: 4px;
+  padding: 16px 0;
+  background-color: $white-light;
+  font-size: 0;
 
   ul.nav {
     display: inline-block;
@@ -300,12 +375,11 @@ a.deploy-project-label {
   }
 
   .nav > li > a {
-    @include btn-default;
-    @include btn-gray;
-
     background-color: transparent;
-    border: 1px solid #f7f8fa;
-    margin-left: 12px;
+    margin-right: 12px;
+    padding: 0 10px;
+    font-size: 15px;
+    color: $notes-light-color;
   }
 
   li {
@@ -325,6 +399,10 @@ a.deploy-project-label {
       background-color: #f0f2f5;
     }
   }
+
+  &.row-content-block.second-block {
+    margin-top: 0;
+  }
 }
 
 pre.light-well {
@@ -442,9 +520,14 @@ pre.light-well {
   border-top: 0;
 
   .edit-project-readme {
-    z-index: 100;
+    z-index: 2;
     position: relative;
   }
+
+  .wiki h1 {
+    border-bottom: none;
+    padding: 0;
+  }
 }
 
 .git-clone-holder {
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index b60c419fb3a..ac692686bb2 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -2,7 +2,7 @@
   .controls
     - access = user_max_access_in_project(current_user.id, @project)
     - can_edit = can?(current_user, :admin_project, @project)
-    %span.dropdown.project-settings-dropdown
+    .dropdown.project-settings-dropdown
       %a.dropdown-new.btn.btn-default#project-settings-button{href: '#', 'data-toggle' => 'dropdown'}
         = icon('cog')
         = icon('caret-down')
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index cdb8d2b5e36..57c3d1b0a65 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -1,37 +1,37 @@
 - empty_repo = @project.empty_repo?
 .project-home-panel.cover-block.clearfix{:class => ("empty-project" if empty_repo)}
-  .project-identicon-holder
-    = project_icon(@project, alt: '', class: 'project-avatar avatar s90')
-  .cover-title.project-home-desc
-    %h1
-      = @project.name
-      %span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}
-        = visibility_level_icon(@project.visibility_level, fw: false)
+  .container-fluid.container-limited
+    .row
+      .project-image-container
+        = project_icon(@project, alt: '', class: 'project-avatar avatar s70')
+      .project-info
+        .cover-title.project-home-desc
+          %h1
+            = @project.name
+            %span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}
+              = visibility_level_icon(@project.visibility_level, fw: false)
 
-  - if @project.description.present?
-    .cover-desc.project-home-desc
-      = markdown(@project.description, pipeline: :description)
+        - if @project.description.present?
+          .cover-desc.project-home-desc
+            = markdown(@project.description, pipeline: :description)
 
-  - if forked_from_project = @project.forked_from_project
-    .cover-desc
-      Forked from
-      = link_to project_path(forked_from_project) do
-        = forked_from_project.namespace.try(:name)
+        - if forked_from_project = @project.forked_from_project
+          .cover-desc
+            Forked from
+            = link_to project_path(forked_from_project) do
+              = forked_from_project.namespace.try(:name)
 
-  .project-repo-buttons
-    .split-one.count-buttons
-      = render 'projects/buttons/star'
-      = render 'projects/buttons/fork'
+        .project-repo-buttons
+          .count-buttons
+            = render 'projects/buttons/star'
+            = render 'projects/buttons/fork'
 
-    .clone-row
-      .project-clone-holder
-        = render "shared/clone_panel"
-
-      .split-repo-buttons
-        .btn-group.pull-left
-          = render "projects/buttons/download"
-          = render 'projects/buttons/dropdown'
+          .project-clone-holder
+            = render "shared/clone_panel"
 
+    .project-repo-buttons.btn-group.project-right-buttons
+      = render "projects/buttons/download"
+      = render 'projects/buttons/dropdown'
       = render 'projects/buttons/notifications'
 
 :javascript
diff --git a/app/views/projects/buttons/_dropdown.html.haml b/app/views/projects/buttons/_dropdown.html.haml
index 1e4c46fca2f..16b8e1cca91 100644
--- a/app/views/projects/buttons/_dropdown.html.haml
+++ b/app/views/projects/buttons/_dropdown.html.haml
@@ -2,7 +2,7 @@
   .btn-group
     %a.btn.dropdown-toggle{href: '#', "data-toggle" => "dropdown"}
       = icon('plus')
-    %ul.dropdown-menu.dropdown-menu-right.project-home-dropdown
+    %ul.dropdown-menu.dropdown-menu-align-right.project-home-dropdown
       - can_create_issue = can?(current_user, :create_issue, @project)
       - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
       - can_create_snippet = can?(current_user, :create_snippet, @project)
diff --git a/app/views/projects/buttons/_notifications.html.haml b/app/views/projects/buttons/_notifications.html.haml
index c1e3e5b73a2..1d05da50581 100644
--- a/app/views/projects/buttons/_notifications.html.haml
+++ b/app/views/projects/buttons/_notifications.html.haml
@@ -1,11 +1,11 @@
 - if @notification_setting
   = form_for @notification_setting, url: namespace_project_notification_setting_path(@project.namespace.becomes(Namespace), @project), method: :patch, remote: true, html: { class: 'inline', id: 'notification-form' } do |f|
     = f.hidden_field :level
-    %span.dropdown
+    .dropdown
       %a.dropdown-new.btn.notifications-btn#notifications-button{href: '#', "data-toggle" => "dropdown"}
         = icon('bell')
         = notification_title(@notification_setting.level)
-        = icon('angle-down')
-      %ul.dropdown-menu.dropdown-menu-right.project-home-dropdown
+        = icon('caret-down')
+      %ul.dropdown-menu.dropdown-menu-align-right.project-home-dropdown
         - NotificationSetting.levels.each do |level|
           = notification_list_item(level.first, @notification_setting)
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index 74feb9e3282..61f739ad1d4 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -13,50 +13,51 @@
 = render "home_panel"
 
 .project-stats.row-content-block.second-block
-  %ul.nav
-    %li
-      = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
-        = pluralize(number_with_delimiter(@project.commit_count), 'commit')
-    %li
-      = link_to namespace_project_branches_path(@project.namespace, @project) do
-        = pluralize(number_with_delimiter(@repository.branch_names.count), 'branch')
-    %li
-      = link_to namespace_project_tags_path(@project.namespace, @project) do
-        = pluralize(number_with_delimiter(@repository.tag_names.count), 'tag')
-
-    %li
-      = link_to project_files_path(@project) do
-        = repository_size
-
-    - if default_project_view != 'readme' && @repository.readme
+  .container-fluid.container-limited
+    %ul.nav
       %li
-        = link_to 'Readme', readme_path(@project)
-
-    - if @repository.changelog
+        = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
+          = pluralize(number_with_delimiter(@project.commit_count), 'commit')
       %li
-        = link_to 'Changelog', changelog_path(@project)
-
-    - if @repository.license_blob
+        = link_to namespace_project_branches_path(@project.namespace, @project) do
+          = pluralize(number_with_delimiter(@repository.branch_names.count), 'branch')
       %li
-        = link_to license_short_name(@project), license_path(@project)
+        = link_to namespace_project_tags_path(@project.namespace, @project) do
+          = pluralize(number_with_delimiter(@repository.tag_names.count), 'tag')
 
-    - if @repository.contribution_guide
       %li
-        = link_to 'Contribution guide', contribution_guide_path(@project)
+        = link_to project_files_path(@project) do
+          = repository_size
+
+      - if default_project_view != 'readme' && @repository.readme
+        %li
+          = link_to 'Readme', readme_path(@project)
+
+      - if @repository.changelog
+        %li
+          = link_to 'Changelog', changelog_path(@project)
+
+      - if @repository.license_blob
+        %li
+          = link_to license_short_name(@project), license_path(@project)
+
+      - if @repository.contribution_guide
+        %li
+          = link_to 'Contribution guide', contribution_guide_path(@project)
 
-    - if current_user && can_push_branch?(@project, @project.default_branch)
-      - unless @repository.changelog
-        %li.missing
-          = link_to add_special_file_path(@project, file_name: 'CHANGELOG') do
-            Add Changelog
-      - unless @repository.license_blob
-        %li.missing
-          = link_to add_special_file_path(@project, file_name: 'LICENSE') do
-            Add License
-      - unless @repository.contribution_guide
-        %li.missing
-          = link_to add_special_file_path(@project, file_name: 'CONTRIBUTING.md', commit_message: 'Add contribution guide') do
-            Add Contribution guide
+      - if current_user && can_push_branch?(@project, @project.default_branch)
+        - unless @repository.changelog
+          %li.missing
+            = link_to add_special_file_path(@project, file_name: 'CHANGELOG') do
+              Add Changelog
+        - unless @repository.license_blob
+          %li.missing
+            = link_to add_special_file_path(@project, file_name: 'LICENSE') do
+              Add License
+        - unless @repository.contribution_guide
+          %li.missing
+            = link_to add_special_file_path(@project, file_name: 'CONTRIBUTING.md', commit_message: 'Add contribution guide') do
+              Add Contribution guide
 
 - if @repository.commit
   .content-block.second-block.white
diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml
index 974751d9970..84b3f44c0ad 100644
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -5,7 +5,7 @@
     %a#clone-dropdown.clone-dropdown-btn.btn{href: '#', 'data-toggle' => 'dropdown'}
       %span
         = default_clone_protocol.upcase
-      = icon('angle-down')
+      = icon('caret-down')
     %ul.dropdown-menu.dropdown-menu-right.clone-options-dropdown
       %li
         = ssh_clone_button(project)