Skip to content

G
gitlab-ce
Commit bb3d7b05 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets
Browse files
Options

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
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 219 deletions
CHANGELOG
View file @ bb3d7b05
......@@ -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
View file @ bb3d7b05
......@@ -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 {
......
app/views/layouts/_head_panel.html.haml
View file @ bb3d7b05
......@@ -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 0 → 100644
View file @ bb3d7b05
.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
View file @ bb3d7b05
- 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
View file @ bb3d7b05
- 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 0 → 100644
View file @ bb3d7b05
%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
View file @ bb3d7b05
......@@ -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
......
app/views/projects/show.html.haml
View file @ bb3d7b05
......@@ -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
View file @ bb3d7b05
......@@ -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
View file @ bb3d7b05
......@@ -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
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7