Merge branch 'refactor-project-page' into 'master'

Improve project home page usability

I looked at project page and saw next problems with it:

* a lot of information but not separated on blocks - hard to understand
* unclear how to contribute to project

Instead of complete redesign I followed step-by-step changes.

### Step 1

First of all I separated Repository and Contribution blocks.
Contribution block should makes it easy for people to contribute. Even when we visit GitHub project page its not clear how to start. Our Contribution section should help with it. All repository stats and download button moved to Repository block.

![Screenshot_2015-05-05_11.49.16](https://gitlab.com/gitlab-org/gitlab-ce/uploads/e69977603acfdc381acb539b19e8cba1/Screenshot_2015-05-05_11.49.16.png)

### Step 2

Next step was to make top section less loaded. I moved clone panel to sidebar because it is very heavy element and rarely used. If you use web editor - you dont even use it. If you work via http/ssh you will copy remote only once. So my idea - it should be on home page but should not be in center of attention.

![Screenshot_2015-05-05_12.47.04](https://gitlab.com/gitlab-org/gitlab-ce/uploads/41633cc8915bb12c979230567b40aea4/Screenshot_2015-05-05_12.47.04.png)

See merge request !610

11 files changed, 156 insertions, 219 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 88678b087c5..433ea27a31c 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -14,7 +14,7 @@ v 7.11.0 (unreleased)
   - Redirect to sign in page after signing out.
   - Fix "Hello @username." references not working by no longer allowing usernames to end in period.
   - Fix "Revspec not found" errors when viewing diffs in a forked project with submodules (Stan Hu)
-  -
+  - Improve project page UI
   - Fix broken file browsing with relative submodule in personal projects (Stan Hu)
   - Fix DB error when trying to tag a repository (Stan Hu)
   - Add "Reply quoting selected text" shortcut key (`r`)
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c005470355e..afa8aa24ee4 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -17,39 +17,28 @@
 .project-home-panel {
   margin-bottom: 20px;
   position: relative;
-  padding-left: 85px;
-
-  &.empty-project {
-    border-bottom: 0px;
-    padding-bottom: 15px;
-    margin-bottom: 0px;
-  }
+  padding-left: 65px;
+  border-bottom: 1px solid #DDD;
+  padding-bottom: 10px;
+  padding-top: 5px;
+  min-height: 50px;
 
   .project-identicon-holder {
     position: absolute;
     left: 0;
+    top: -10px;
 
     .avatar {
-      width: 70px;
-      height: 70px;
+      width: 50px;
+      height: 50px;
     }
 
     .identicon {
-      font-size: 45px;
-      line-height: 1.6;
-    }
-
-    .avatar, .identicon {
-      @include border-radius(4px);
-      box-shadow: 0 1px 2px #ddd;
+      font-size: 26px;
+      line-height: 50px;
     }
   }
 
-  .project-home-dropdown {
-    margin-left: 10px;
-    float: right;
-  }
-
   .project-home-row {
     @extend .clearfix;
     margin-bottom: 15px;
@@ -61,7 +50,7 @@
     .project-home-desc {
       font-size: 16px;
       line-height: 1.3;
-      margin-right: 215px;
+      margin-right: 250px;
     }
 
     .project-home-desc {
@@ -81,7 +70,7 @@
     margin-top: -3px;
     position: absolute;
     right: 0;
-    width: 260px;
+    width: 265px;
     text-align: right;
 
     .btn {
@@ -99,15 +88,6 @@
   }
 }
 
-.project-home-links {
-  padding: 10px 0px;
-  float: right;
-  a {
-    margin-left: 10px;
-    font-weight: 500;
-  }
-}
-
 .git-clone-holder {
   .project-home-dropdown + & {
     margin-right: 45px;
@@ -213,50 +193,27 @@ ul.nav.nav-projects-tabs {
 }
 
 .project-side {
-  .btn-block {
-    background-image: none;
-
-    .btn, &.btn {
-      white-space: normal;
-      text-align: left;
-      padding: 10px 15px;
-
-      &.dropdown-toggle {
-        text-align: center;
-      }
+  .project-fork-icon {
+    float: left;
+    font-size: 26px;
+    margin-right: 10px;
+    line-height: 1.5;
+  }
 
-      &:hover {
-        background-color: #eee;
-        border-color: #DDD;
-      }
+  .well {
+    h4 {
+      font-weight: normal;
+      margin: 0;
     }
 
-    .count {
-      float: right;
-      font-weight: 500;
-      text-shadow: 0 1px #FFF;
+    .nav-pills a {
+      padding: 10px;
     }
 
-    &.btn-group-justified {
-      .btn {
-        width: 100%;
-      }
-      .dropdown-toggle {
-        width: 30px;
-        padding: 10px;
-      }
-      ul {
-        width: 100%;
-      }
+    .nav {
+      margin: 10px 0;
     }
   }
-
-  .project-fork-icon {
-    float: left;
-    font-size: 26px;
-    margin-right: 10px;
-    line-height: 1.5;
-  }
 }
 
 .transfer-project .select2-container {
diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml
index 3329a712430..ef685a0434e 100644
--- a/app/views/layouts/_head_panel.html.haml
+++ b/app/views/layouts/_head_panel.html.haml
@@ -4,7 +4,8 @@
       = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
         = brand_header_logo
         %h3 GitLab
-    %h1.title= title
+    %h1.title
+      = title
 
     %button.navbar-toggle{type: 'button', data: {target: '.navbar-collapse', toggle: 'collapse'}}
       %span.sr-only Toggle navigation
diff --git a/app/views/projects/_aside.html.haml b/app/views/projects/_aside.html.haml
new file mode 100644
index 00000000000..1a7ab74c93a
--- /dev/null
+++ b/app/views/projects/_aside.html.haml
@@ -0,0 +1,78 @@
+.clearfix
+  .append-bottom-20
+    = render "shared/clone_panel"
+
+  - unless @project.empty_repo?
+    .well
+      %h4 Repository
+      %ul.nav.nav-pills
+        %li= link_to pluralize(number_with_delimiter(@repository.commit_count), 'commit'), namespace_project_commits_path(@project.namespace, @project, @ref || @repository.root_ref)
+        %li= link_to pluralize(number_with_delimiter(@repository.branch_names.count), 'branch'), namespace_project_branches_path(@project.namespace, @project)
+        %li= link_to pluralize(number_with_delimiter(@repository.tag_names.count), 'tag'), namespace_project_tags_path(@project.namespace, @project)
+
+      .actions
+        = link_to namespace_project_compare_index_path(@project.namespace, @project, from: @repository.root_ref, to: @ref || @repository.root_ref), class: 'btn btn-sm' do
+          %i.fa.fa-exchange
+          Compare code
+
+        - if can?(current_user, :download_code, @project)
+           
+          = render 'projects/repositories/download_archive', split_button: true, btn_class: 'btn-group-sm'
+
+  - unless @project.empty_repo?
+    .well
+      %h4 Contribute
+      %ul.nav.nav-pills
+        - if @repository.changelog
+          %li.hidden-xs
+            = link_to changelog_url(@project) do
+              Changelog
+        - if @repository.contribution_guide
+          %li.hidden-xs
+            = link_to contribution_guide_url(@project) do
+              Contribution guide
+        - if @repository.license
+          %li
+            = link_to license_url(@project) do
+              License
+      .actions
+        = link_to url_for_new_issue(@project, only_path: true), title: "New Issue", class: 'btn btn-sm' do
+          %i.fa.fa-fw.fa-exclamation-circle
+          New issue
+
+
+
+  - if @project.archived?
+    .alert.alert-warning
+      %h4
+        %i.fa.fa-exclamation-triangle
+        Archived project!
+      %p Repository is read-only
+
+  - if @project.forked_from_project
+    .well
+      %i.fa.fa-code-fork.project-fork-icon
+      Forked from:
+      %br
+      = link_to @project.forked_from_project.name_with_namespace, project_path(@project.forked_from_project)
+
+
+- if version = @repository.version
+  .well
+    %h4
+      Version
+      .pull-right
+        = link_to version_url(@project) do
+          = @repository.blob_by_oid(version.id).data
+
+- @project.ci_services.each do |ci_service|
+  - if ci_service.active? && ci_service.respond_to?(:builds_path)
+    .well
+      %h4
+        = ci_service.title
+        .pull-right
+          - if ci_service.respond_to?(:status_img_path)
+            = link_to ci_service.builds_path, :'data-no-turbolink' => 'data-no-turbolink' do
+              = image_tag ci_service.status_img_path, alt: "build status"
+          - else
+            = link_to 'view builds', ci_service.builds_path, :'data-no-turbolink' => 'data-no-turbolink'
diff --git a/app/views/projects/_dropdown.html.haml b/app/views/projects/_dropdown.html.haml
index 3036f11bb2d..d623a3716ed 100644
--- a/app/views/projects/_dropdown.html.haml
+++ b/app/views/projects/_dropdown.html.haml
@@ -1,6 +1,6 @@
 - if current_user
   .dropdown.pull-right
-    %a.dropdown-toggle.btn.btn-new{href: '#', "data-toggle" => "dropdown"}
+    %a.dropdown-toggle.btn.btn-sm{href: '#', "data-toggle" => "dropdown"}
       %i.fa.fa-bars
     %ul.dropdown-menu
       - if @project.issues_enabled && can?(current_user, :write_issue, @project)
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 5689bdee1c6..f9cdda4a3ba 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -1,5 +1,5 @@
 - empty_repo = @project.empty_repo?
-.project-home-panel{:class => ("empty-project" if empty_repo)}
+.project-home-panel.clearfix{:class => ("empty-project" if empty_repo)}
   .project-identicon-holder
     = project_icon(@project, alt: '', class: 'avatar project-avatar')
   .project-home-row.project-home-row-top
@@ -9,7 +9,7 @@
       - if can?(current_user, :admin_project, @project)
         –
         = link_to 'Edit', edit_namespace_project_path
-      - elsif !@project.empty_repo? && @repository.readme
+      - elsif !empty_repo && @repository.readme
         - readme = @repository.readme
         –
         = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.name)) do
@@ -26,7 +26,7 @@
               Star
             %span.count
               = @project.star_count
-      - unless @project.empty_repo?
+      - unless empty_repo
         - if current_user && can?(current_user, :fork_project, @project) && @project.namespace != current_user.namespace
           .inline.fork-buttons.prepend-left-10
             - if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2
@@ -35,9 +35,3 @@
             - else
               = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn btn-sm btn-default' do
                 = link_to_toggle_fork
-
-  .project-home-row.hidden-xs
-    - if current_user && !empty_repo
-      .project-home-dropdown
-        = render "dropdown"
-    = render "shared/clone_panel"
diff --git a/app/views/projects/_section.html.haml b/app/views/projects/_section.html.haml
new file mode 100644
index 00000000000..e6b04c5a34d
--- /dev/null
+++ b/app/views/projects/_section.html.haml
@@ -0,0 +1,34 @@
+%ul.nav.nav-tabs
+  %li.active
+    = link_to '#tab-activity', 'data-toggle' => 'tab' do
+      Activity
+  - if @repository.readme
+    %li
+      = link_to '#tab-readme', 'data-toggle' => 'tab' do
+        Readme
+.tab-content
+  .tab-pane.active#tab-activity
+    .hidden-xs
+      = render "events/event_last_push", event: @last_push
+
+      - if current_user
+        %ul.nav.nav-pills.event_filter.pull-right
+          %li
+            = link_to namespace_project_path(@project.namespace, @project, format: :atom, private_token: current_user.private_token), title: "Feed", class: 'rss-btn' do
+              %i.fa.fa-rss
+              Activity Feed
+
+      = render 'shared/event_filter'
+      %hr
+    .content_list
+    = spinner
+
+  - if readme = @repository.readme
+    .tab-pane#tab-readme
+      %article.readme-holder#README
+        = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.name)) do
+          %h4.readme-file-title
+            %i.fa.fa-file
+            = readme.name
+        .wiki
+          = render_readme(readme)
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 4f8104e0792..8080a904978 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -13,6 +13,8 @@
       add a file
     &nbsp;or do a push via the command line.
 
+.well
+  = render "shared/clone_panel"
 %h4
   %strong Command line instructions
 %div.git-empty
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index cd18ae0c8da..2259dea0865 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -7,115 +7,10 @@
   = render 'shared/no_password'
 
 = render "home_panel"
-%ul.nav.nav-tabs
-  %li.active
-    = link_to '#tab-activity', 'data-toggle' => 'tab' do
-      Activity
-  - if @repository.readme
-    %li
-      = link_to '#tab-readme', 'data-toggle' => 'tab' do
-        Readme
-  - if @repository.changelog
-    %li.hidden-xs
-      = link_to changelog_url(@project) do
-        Changelog
-  - if @repository.contribution_guide
-    %li.hidden-xs
-      = link_to contribution_guide_url(@project) do
-        Contribution guide
-  - if @repository.license
-    %li
-      = link_to license_url(@project) do
-        License
+= render 'shared/show_aside'
 
-  .project-home-links
-    - unless @project.empty_repo?
-      = link_to pluralize(number_with_delimiter(@repository.commit_count), 'commit'), namespace_project_commits_path(@project.namespace, @project, @ref || @repository.root_ref)
-      = link_to pluralize(number_with_delimiter(@repository.branch_names.count), 'branch'), namespace_project_branches_path(@project.namespace, @project)
-      = link_to pluralize(number_with_delimiter(@repository.tag_names.count), 'tag'), namespace_project_tags_path(@project.namespace, @project)
-      %span.light.prepend-left-20= repository_size
-
-.tab-content
-  .tab-pane.active#tab-activity
-    = render 'shared/show_aside'
-
-    .row
-      %section.col-md-9
-        .hidden-xs
-          = render "events/event_last_push", event: @last_push
-
-          - if current_user
-            %ul.nav.nav-pills.event_filter.pull-right
-              %li
-                = link_to namespace_project_path(@project.namespace, @project, format: :atom, private_token: current_user.private_token), title: "Feed", class: 'rss-btn' do
-                  %i.fa.fa-rss
-                  Activity Feed
-
-          = render 'shared/event_filter'
-          %hr
-        .content_list
-        = spinner
-      %aside.col-md-3.project-side
-        .clearfix
-          - if @project.archived?
-            .alert.alert-warning
-              %h4
-                %i.fa.fa-exclamation-triangle
-                Archived project!
-              %p Repository is read-only
-
-          - if @project.forked_from_project
-            .well
-              %i.fa.fa-code-fork.project-fork-icon
-              Forked from:
-              %br
-              = link_to @project.forked_from_project.name_with_namespace, project_path(@project.forked_from_project)
-
-          - unless @project.empty_repo?
-            = link_to namespace_project_compare_index_path(@project.namespace, @project, from: @repository.root_ref, to: @ref || @repository.root_ref), class: 'btn btn-block' do
-              %i.fa.fa-exchange
-              Compare code
-
-            - if can?(current_user, :download_code, @project)
-              = render 'projects/repositories/download_archive', split_button: true, btn_class: 'btn-block'
-
-            - if version = @repository.version
-              - detail_url = changelog_url(@project) || version_url(@project)
-              = link_to detail_url, class: 'btn btn-block' do
-                %i.fa.fa-file-text-o
-                Version:
-                %span.count
-                  = @repository.blob_by_oid(version.id).data
-
-        .prepend-top-10.append-bottom-10
-          %p
-            %span.light Created on
-            #{@project.created_at.stamp('Aug 22, 2013')}
-          %p
-            %span.light Owned by #{@project.group ? "the" : nil}
-            - if @project.group
-              #{link_to @project.group.name, @project.group} group
-            - else
-              #{link_to @project.owner_name, @project.owner}
-
-
-        .prepend-top-10
-          - @project.ci_services.each do |ci_service|
-            - if ci_service.active? && ci_service.respond_to?(:builds_path)
-              %hr
-              - if ci_service.respond_to?(:status_img_path)
-                = link_to ci_service.builds_path, :'data-no-turbolink' => 'data-no-turbolink' do
-                  = image_tag ci_service.status_img_path, alt: "build status"
-              - else
-                %span.light CI provided by
-                = link_to ci_service.title, ci_service.builds_path, :'data-no-turbolink' => 'data-no-turbolink'
-
-  - if readme = @repository.readme
-    .tab-pane#tab-readme
-      %article.readme-holder#README
-        = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.name)) do
-          %h4.readme-file-title
-            %i.fa.fa-file
-            = readme.name
-        .wiki
-          = render_readme(readme)
+.row
+  %section.col-md-8
+    = render 'section'
+  %aside.col-md-4.project-side
+    = render 'aside'
diff --git a/db/schema.rb b/db/schema.rb
index f0cccb8b749..04abf9bb9a6 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -350,10 +350,10 @@ ActiveRecord::Schema.define(version: 20150502064022) do
     t.string   "import_url"
     t.integer  "visibility_level",       default: 0,        null: false
     t.boolean  "archived",               default: false,    null: false
+    t.string   "avatar"
     t.string   "import_status"
     t.float    "repository_size",        default: 0.0
     t.integer  "star_count",             default: 0,        null: false
-    t.string   "avatar"
     t.string   "import_type"
     t.string   "import_source"
   end
@@ -476,6 +476,7 @@ ActiveRecord::Schema.define(version: 20150502064022) do
     t.integer  "notification_level",            default: 1,     null: false
     t.datetime "password_expires_at"
     t.integer  "created_by_id"
+    t.datetime "last_credential_check_at"
     t.string   "avatar"
     t.string   "confirmation_token"
     t.datetime "confirmed_at"
@@ -483,7 +484,6 @@ ActiveRecord::Schema.define(version: 20150502064022) do
     t.string   "unconfirmed_email"
     t.boolean  "hide_no_ssh_key",               default: false
     t.string   "website_url",                   default: "",    null: false
-    t.datetime "last_credential_check_at"
     t.string   "github_access_token"
     t.string   "gitlab_access_token"
     t.string   "notification_email"
@@ -505,30 +505,6 @@ ActiveRecord::Schema.define(version: 20150502064022) do
   add_index "users", ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true, using: :btree
   add_index "users", ["username"], name: "index_users_on_username", using: :btree
 
-  create_table "users_groups", force: true do |t|
-    t.integer  "group_access",                   null: false
-    t.integer  "group_id",                       null: false
-    t.integer  "user_id",                        null: false
-    t.datetime "created_at"
-    t.datetime "updated_at"
-    t.integer  "notification_level", default: 3, null: false
-  end
-
-  add_index "users_groups", ["user_id"], name: "index_users_groups_on_user_id", using: :btree
-
-  create_table "users_projects", force: true do |t|
-    t.integer  "user_id",                        null: false
-    t.integer  "project_id",                     null: false
-    t.datetime "created_at"
-    t.datetime "updated_at"
-    t.integer  "project_access",     default: 0, null: false
-    t.integer  "notification_level", default: 3, null: false
-  end
-
-  add_index "users_projects", ["project_access"], name: "index_users_projects_on_project_access", using: :btree
-  add_index "users_projects", ["project_id"], name: "index_users_projects_on_project_id", using: :btree
-  add_index "users_projects", ["user_id"], name: "index_users_projects_on_user_id", using: :btree
-
   create_table "users_star_projects", force: true do |t|
     t.integer  "project_id", null: false
     t.integer  "user_id",    null: false
diff --git a/features/steps/project/project.rb b/features/steps/project/project.rb
index f14396bcfff..00706ab30e9 100644
--- a/features/steps/project/project.rb
+++ b/features/steps/project/project.rb
@@ -68,7 +68,7 @@ class Spinach::Features::Project < Spinach::FeatureSteps
 
   step 'I should see project "Shop" version' do
     within '.project-side' do
-      page.should have_content 'Version: 6.7.0.pre'
+      page.should have_content '6.7.0.pre'
     end
   end