Commit bb3d7b05 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

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
parents 91846578 16db90e5
...@@ -14,7 +14,7 @@ v 7.11.0 (unreleased) ...@@ -14,7 +14,7 @@ v 7.11.0 (unreleased)
- Redirect to sign in page after signing out. - Redirect to sign in page after signing out.
- Fix "Hello @username." references not working by no longer allowing usernames to end in period. - 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) - 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 broken file browsing with relative submodule in personal projects (Stan Hu)
- Fix DB error when trying to tag a repository (Stan Hu) - Fix DB error when trying to tag a repository (Stan Hu)
- Add "Reply quoting selected text" shortcut key (`r`) - Add "Reply quoting selected text" shortcut key (`r`)
......
...@@ -17,39 +17,28 @@ ...@@ -17,39 +17,28 @@
.project-home-panel { .project-home-panel {
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
padding-left: 85px; padding-left: 65px;
border-bottom: 1px solid #DDD;
&.empty-project { padding-bottom: 10px;
border-bottom: 0px; padding-top: 5px;
padding-bottom: 15px; min-height: 50px;
margin-bottom: 0px;
}
.project-identicon-holder { .project-identicon-holder {
position: absolute; position: absolute;
left: 0; left: 0;
top: -10px;
.avatar { .avatar {
width: 70px; width: 50px;
height: 70px; height: 50px;
} }
.identicon { .identicon {
font-size: 45px; font-size: 26px;
line-height: 1.6; line-height: 50px;
}
.avatar, .identicon {
@include border-radius(4px);
box-shadow: 0 1px 2px #ddd;
} }
} }
.project-home-dropdown {
margin-left: 10px;
float: right;
}
.project-home-row { .project-home-row {
@extend .clearfix; @extend .clearfix;
margin-bottom: 15px; margin-bottom: 15px;
...@@ -61,7 +50,7 @@ ...@@ -61,7 +50,7 @@
.project-home-desc { .project-home-desc {
font-size: 16px; font-size: 16px;
line-height: 1.3; line-height: 1.3;
margin-right: 215px; margin-right: 250px;
} }
.project-home-desc { .project-home-desc {
...@@ -81,7 +70,7 @@ ...@@ -81,7 +70,7 @@
margin-top: -3px; margin-top: -3px;
position: absolute; position: absolute;
right: 0; right: 0;
width: 260px; width: 265px;
text-align: right; text-align: right;
.btn { .btn {
...@@ -99,15 +88,6 @@ ...@@ -99,15 +88,6 @@
} }
} }
.project-home-links {
padding: 10px 0px;
float: right;
a {
margin-left: 10px;
font-weight: 500;
}
}
.git-clone-holder { .git-clone-holder {
.project-home-dropdown + & { .project-home-dropdown + & {
margin-right: 45px; margin-right: 45px;
...@@ -213,50 +193,27 @@ ul.nav.nav-projects-tabs { ...@@ -213,50 +193,27 @@ ul.nav.nav-projects-tabs {
} }
.project-side { .project-side {
.btn-block { .project-fork-icon {
background-image: none; float: left;
font-size: 26px;
.btn, &.btn { margin-right: 10px;
white-space: normal; line-height: 1.5;
text-align: left; }
padding: 10px 15px;
&.dropdown-toggle {
text-align: center;
}
&:hover { .well {
background-color: #eee; h4 {
border-color: #DDD; font-weight: normal;
} margin: 0;
} }
.count { .nav-pills a {
float: right; padding: 10px;
font-weight: 500;
text-shadow: 0 1px #FFF;
} }
&.btn-group-justified { .nav {
.btn { margin: 10px 0;
width: 100%;
}
.dropdown-toggle {
width: 30px;
padding: 10px;
}
ul {
width: 100%;
}
} }
} }
.project-fork-icon {
float: left;
font-size: 26px;
margin-right: 10px;
line-height: 1.5;
}
} }
.transfer-project .select2-container { .transfer-project .select2-container {
......
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
= link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
= brand_header_logo = brand_header_logo
%h3 GitLab %h3 GitLab
%h1.title= title %h1.title
= title
%button.navbar-toggle{type: 'button', data: {target: '.navbar-collapse', toggle: 'collapse'}} %button.navbar-toggle{type: 'button', data: {target: '.navbar-collapse', toggle: 'collapse'}}
%span.sr-only Toggle navigation %span.sr-only Toggle navigation
......
.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'
- if current_user - if current_user
.dropdown.pull-right .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 %i.fa.fa-bars
%ul.dropdown-menu %ul.dropdown-menu
- if @project.issues_enabled && can?(current_user, :write_issue, @project) - if @project.issues_enabled && can?(current_user, :write_issue, @project)
......
- empty_repo = @project.empty_repo? - 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-identicon-holder
= project_icon(@project, alt: '', class: 'avatar project-avatar') = project_icon(@project, alt: '', class: 'avatar project-avatar')
.project-home-row.project-home-row-top .project-home-row.project-home-row-top
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
- if can?(current_user, :admin_project, @project) - if can?(current_user, :admin_project, @project)
– –
= link_to 'Edit', edit_namespace_project_path = link_to 'Edit', edit_namespace_project_path
- elsif !@project.empty_repo? && @repository.readme - elsif !empty_repo && @repository.readme
- readme = @repository.readme - readme = @repository.readme
– –
= link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.name)) do = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.name)) do
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
Star Star
%span.count %span.count
= @project.star_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 - if current_user && can?(current_user, :fork_project, @project) && @project.namespace != current_user.namespace
.inline.fork-buttons.prepend-left-10 .inline.fork-buttons.prepend-left-10
- if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2 - if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2
...@@ -35,9 +35,3 @@ ...@@ -35,9 +35,3 @@
- else - else
= link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn btn-sm btn-default' do = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn btn-sm btn-default' do
= link_to_toggle_fork = link_to_toggle_fork
.project-home-row.hidden-xs
- if current_user && !empty_repo
.project-home-dropdown
= render "dropdown"
= render "shared/clone_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
.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)
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
add a file add a file
&nbsp;or do a push via the command line. &nbsp;or do a push via the command line.
.well
= render "shared/clone_panel"
%h4 %h4
%strong Command line instructions %strong Command line instructions
%div.git-empty %div.git-empty
......
...@@ -7,115 +7,10 @@ ...@@ -7,115 +7,10 @@
= render 'shared/no_password' = render 'shared/no_password'
= render "home_panel" = render "home_panel"
%ul.nav.nav-tabs = render 'shared/show_aside'
%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
.project-home-links .row
- unless @project.empty_repo? %section.col-md-8
= link_to pluralize(number_with_delimiter(@repository.commit_count), 'commit'), namespace_project_commits_path(@project.namespace, @project, @ref || @repository.root_ref) = render 'section'
= link_to pluralize(number_with_delimiter(@repository.branch_names.count), 'branch'), namespace_project_branches_path(@project.namespace, @project) %aside.col-md-4.project-side
= link_to pluralize(number_with_delimiter(@repository.tag_names.count), 'tag'), namespace_project_tags_path(@project.namespace, @project) = render 'aside'
%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)
...@@ -350,10 +350,10 @@ ActiveRecord::Schema.define(version: 20150502064022) do ...@@ -350,10 +350,10 @@ ActiveRecord::Schema.define(version: 20150502064022) do
t.string "import_url" t.string "import_url"
t.integer "visibility_level", default: 0, null: false t.integer "visibility_level", default: 0, null: false
t.boolean "archived", default: false, null: false t.boolean "archived", default: false, null: false
t.string "avatar"
t.string "import_status" t.string "import_status"
t.float "repository_size", default: 0.0 t.float "repository_size", default: 0.0
t.integer "star_count", default: 0, null: false t.integer "star_count", default: 0, null: false
t.string "avatar"
t.string "import_type" t.string "import_type"
t.string "import_source" t.string "import_source"
end end
...@@ -476,6 +476,7 @@ ActiveRecord::Schema.define(version: 20150502064022) do ...@@ -476,6 +476,7 @@ ActiveRecord::Schema.define(version: 20150502064022) do
t.integer "notification_level", default: 1, null: false t.integer "notification_level", default: 1, null: false
t.datetime "password_expires_at" t.datetime "password_expires_at"
t.integer "created_by_id" t.integer "created_by_id"
t.datetime "last_credential_check_at"
t.string "avatar" t.string "avatar"
t.string "confirmation_token" t.string "confirmation_token"
t.datetime "confirmed_at" t.datetime "confirmed_at"
...@@ -483,7 +484,6 @@ ActiveRecord::Schema.define(version: 20150502064022) do ...@@ -483,7 +484,6 @@ ActiveRecord::Schema.define(version: 20150502064022) do
t.string "unconfirmed_email" t.string "unconfirmed_email"
t.boolean "hide_no_ssh_key", default: false t.boolean "hide_no_ssh_key", default: false
t.string "website_url", default: "", null: false t.string "website_url", default: "", null: false
t.datetime "last_credential_check_at"
t.string "github_access_token" t.string "github_access_token"
t.string "gitlab_access_token" t.string "gitlab_access_token"
t.string "notification_email" t.string "notification_email"
...@@ -505,30 +505,6 @@ ActiveRecord::Schema.define(version: 20150502064022) do ...@@ -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", ["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 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| create_table "users_star_projects", force: true do |t|
t.integer "project_id", null: false t.integer "project_id", null: false
t.integer "user_id", null: false t.integer "user_id", null: false
......
...@@ -68,7 +68,7 @@ class Spinach::Features::Project < Spinach::FeatureSteps ...@@ -68,7 +68,7 @@ class Spinach::Features::Project < Spinach::FeatureSteps
step 'I should see project "Shop" version' do step 'I should see project "Shop" version' do
within '.project-side' do within '.project-side' do
page.should have_content 'Version: 6.7.0.pre' page.should have_content '6.7.0.pre'
end end
end end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment