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

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`)

app/assets/stylesheets/pages/projects.scss

@@ -17,37 +17,26 @@
 .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 {
@@ -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,49 +193,26 @@ 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;
-      }
-
-      &:hover {
-        background-color: #eee;
-        border-color: #DDD;
-      }
+  .project-fork-icon {
+    float: left;
+    font-size: 26px;
+    margin-right: 10px;
+    line-height: 1.5;
   }
 
-    .count {
-      float: right;
-      font-weight: 500;
-      text-shadow: 0 1px #FFF;
+  .well {
+    h4 {
+      font-weight: normal;
+      margin: 0;
     }
 
-    &.btn-group-justified {
-      .btn {
-        width: 100%;
-      }
-      .dropdown-toggle {
-        width: 30px;
+    .nav-pills a {
       padding: 10px;
     }
-      ul {
-        width: 100%;
-      }
-    }
-  }
 
-  .project-fork-icon {
-    float: left;
-    font-size: 26px;
-    margin-right: 10px;
-    line-height: 1.5;
+    .nav {
+      margin: 10px 0;
+    }
   }
 }
 

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

app/views/projects/_aside.html.haml

+.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'

app/views/projects/_dropdown.html.haml

 - 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)

app/views/projects/_home_panel.html.haml

 - 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"

app/views/projects/_section.html.haml

+%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)

app/views/projects/empty.html.haml

@@ -13,6 +13,8 @@
       add a file
      or do a push via the command line.
 
+.well
+  = render "shared/clone_panel"
 %h4
   %strong Command line instructions
 %div.git-empty

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'

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

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