Redesign project home page

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/pages/projects.scss

@@ -15,48 +15,31 @@
 }
 
 .project-home-panel {
-  margin-top: 10px;
-  margin-bottom: 15px;
-  position: relative;
-  padding-left: 65px;
-  min-height: 50px;
+  text-align: center;
+  margin-bottom: 20px;
 
   .project-identicon-holder {
-    position: absolute;
-    left: 0;
-    top: -14px;
+    margin-bottom: 15px;
 
-    .avatar {
-      width: 50px;
-      height: 50px;
+    .avatar, .identicon {
+      margin: 0 auto;
+      float: none;
     }
 
     .identicon {
-      font-size: 26px;
-      line-height: 50px;
+      @include border-radius(50%);
     }
   }
 
-  .project-home-row {
-    @extend .clearfix;
-    margin-bottom: 15px;
-
-    &.project-home-row-top {
-      margin-bottom: 15px;
+  .lead {
+    p {
+      display: inline;
     }
+  }
 
-    .project-home-desc {
-      color: $gray;
-      float: left;
-      font-size: 16px;
-      line-height: 1.3;
-      margin-right: 250px;
-
-      // Render Markdown-generated HTML inline for this block
-      p {
-        display: inline;
-      }
-    }
+  .git-clone-holder {
+    max-width: 600px;
+    margin: 0 auto;
   }
 
   .visibility-level-label {
@@ -67,22 +50,19 @@
   }
 
   .project-repo-buttons {
-    margin-top: -3px;
-    position: absolute;
-    right: 0;
-    width: 265px;
-    text-align: right;
-
+    margin-top: 25px;
+    margin-bottom: 25px;
     .btn {
+      @extend .btn-info;
       font-weight: bold;
       font-size: 14px;
       line-height: 16px;
+      padding: 8px 12px;
 
       .count {
-        padding-left: 10px;
-        border-left: 1px solid #ccc;
+        padding-left: 7px;
         display: inline-block;
-        margin-left: 10px;
+        margin-left: 7px;
       }
     }
   }
@@ -307,3 +287,15 @@ table.table.protected-branches-list tr.no-border {
   float: left;
   margin-right: 10px;
 }
+
+.project-stats {
+  text-align: center;
+
+  ul.nav-pills { display:inline-block; }
+  li { display:inline; }
+  a { float:left; }
+}
+
+pre.light-well {
+  border-color: #f1f1f1;
+}

app/views/projects/_home_panel.html.haml

 - empty_repo = @project.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
-    .project-home-desc
-      - if @project.description.present?
-        = markdown(@project.description, pipeline: :description)
-      - if can?(current_user, :admin_project, @project)
-        –
-        = link_to 'Edit', edit_namespace_project_path
-      - 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
-          = readme.name
-    .project-repo-buttons
-      .inline.star.js-toggler-container{class: @show_star ? 'on' : ''}
-        - if current_user
-          = link_to_toggle_star('Star this project.', false)
-          = link_to_toggle_star('Unstar this project.', true)
-        - else
-          = link_to new_user_session_path, class: 'btn star-btn has_tooltip', title: 'You must sign in to star a project' do
-            %span
-              = icon('star')
-              Star
-            %span.count
-              = @project.star_count
-      - 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
-              = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: 'Go to your fork', class: 'btn btn-sm btn-default' do
-                = link_to_toggle_fork
-            - 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_icon(@project, alt: '', class: 'project-avatar avatar s90')
+  .lead
+    - if @project.description.present?
+      = markdown(@project.description, pipeline: :description)
+
+
+  .project-repo-buttons
+    .inline.star.js-toggler-container{class: @show_star ? 'on' : ''}
+      - if current_user
+        = link_to_toggle_star('Star this project.', false)
+        = link_to_toggle_star('Unstar this project.', true)
+      - else
+        = link_to new_user_session_path, class: 'btn star-btn has_tooltip', title: 'You must sign in to star a project' do
+          %span
+            = icon('star')
+            Star
+          %span.count
+            = @project.star_count
+    - 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
+            = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: 'Go to your fork', class: 'btn btn-sm btn-default' do
+              = link_to_toggle_fork
+          - 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
+
+  = render "shared/clone_panel"

app/views/projects/empty.html.haml

@@ -4,30 +4,28 @@
 
 = render "home_panel"
 
-.center.well
-  %h3
+.center.light-well
+  %h3.page-title
     The repository for this project is empty
-  %h4
+  %p
     You can
-    = link_to namespace_project_new_blob_path(@project.namespace, @project, 'master'), class: 'btn btn-new btn-lg' do
+    = link_to namespace_project_new_blob_path(@project.namespace, @project, 'master'), class: 'btn btn-new' do
       add a file
      or do a push via the command line.
 
-.well
-  = render "shared/clone_panel"
-%h4
-  %strong Command line instructions
+%h3.page-title
+  Command line instructions
 %div.git-empty
   %fieldset
-    %legend Git global setup
-    %pre.dark
+    %h5 Git global setup
+    %pre.light-well
       :preserve
         git config --global user.name "#{git_user_name}"
         git config --global user.email "#{git_user_email}"
 
   %fieldset
-    %legend Create a new repository
-    %pre.dark
+    %h5 Create a new repository
+    %pre.light-well
       :preserve
         git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')}
         cd #{@project.path}
@@ -37,8 +35,8 @@
         git push -u origin master
 
   %fieldset
-    %legend Existing folder or Git repository
-    %pre.dark
+    %h5 Existing folder or Git repository
+    %pre.light-well
       :preserve
         cd existing_folder
         git init

app/views/projects/show.html.haml

@@ -7,10 +7,40 @@
   = render 'shared/no_password'
 
 = render "home_panel"
-= render 'shared/show_aside'
+.project-stats
+  %ul.nav.nav-pills
+    %li
+      = link_to namespace_project_commits_path(@project.namespace, @project, @ref || @repository.root_ref) do
+        = pluralize(number_with_delimiter(@repository.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')
+    - if @repository.changelog
+      %li
+        = link_to changelog_url(@project) do
+          Changelog
+    - if @repository.license
+      %li
+        = link_to license_url(@project) do
+          License
+    - if @repository.contribution_guide
+      %li
+        = link_to contribution_guide_url(@project) do
+          Contribution guide
 
-.row
-  %section.col-md-8
-    = render 'section'
-  %aside.col-md-4.project-side
-    = render 'aside'
+%hr
+%section
+  - if readme = @repository.readme
+    %article.readme-holder#README
+      .clearfix
+        %small.pull-right
+          = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.name)), class: 'light' do
+            %i.fa.fa-file
+            = readme.name
+      .wiki
+        = render_readme(readme)
+  - else
+    %h4 Add README to this repository

app/views/shared/_clone_panel.html.haml

@@ -20,7 +20,7 @@
         :"data-container" => "body"}
         = gitlab_config.protocol.upcase
   = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control input-sm", readonly: true
-  - if project.kind_of?(Project) && project.empty_repo?
+  - if project.kind_of?(Project)
     .input-group-addon
       .visibility-level-label.has_tooltip{'data-title' => "#{visibility_level_label(project.visibility_level)} project" }
         = visibility_level_icon(project.visibility_level)