Refactor star/fork buttons

app/assets/stylesheets/pages/projects.scss

@@ -50,22 +50,19 @@
     margin-bottom: 15px;
 
     &.project-home-row-top {
-      margin-bottom: 11px;
+      margin-bottom: 15px;
     }
 
     .project-home-desc {
       font-size: 16px;
       line-height: 1.3;
+      margin-right: 215px;
     }
 
     .project-home-desc {
       float: left;
       color: #666;
     }
-
-    .btn-action-count {
-      margin-left: 5px;
-    }
   }
 
   .visibility-level-label {
@@ -77,7 +74,24 @@
   }
 
   .project-repo-buttons {
-    margin-top: -5px;
+    margin-top: -3px;
+    position: absolute;
+    right: 0;
+    width: 260px;
+    text-align: right;
+
+    .btn {
+      font-weight: bold;
+      font-size: 14px;
+      line-height: 16px;
+
+      .count {
+        padding-left: 10px;
+        border-left: 1px solid #ccc;
+        display: inline-block;
+        margin-left: 10px;
+      }
+    }
   }
 }
 

app/helpers/projects_helper.rb

@@ -118,11 +118,15 @@ module ProjectsHelper
   end
 
   def link_to_toggle_fork
-    out = icon('code-fork')
-    out << ' Fork'
-    out << content_tag(:span, class: 'count btn-action-count') do
+    html = content_tag('span') do
+      icon('code-fork') + ' Fork'
+    end
+
+    count_html = content_tag(:span, class: 'count') do
       @project.forks_count.to_s
     end
+
+    html + count_html
   end
 
   private

app/views/projects/_home_panel.html.haml

@@ -14,20 +14,20 @@
         –
         = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.name)) do
           = readme.name
-    .pull-right.prepend-left-10.project-repo-buttons
+    .project-repo-buttons
+      .inline.star.js-toggler-container{class: @show_star ? 'on' : ''}
+        - if current_user
+          = link_to_toggle_star('Star this project.', false, true)
+          = link_to_toggle_star('Unstar this project.', true, true)
       - unless @project.empty_repo?
-        .fork-buttons
         - 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
-    .star.pull-right.prepend-left-10.project-repo-buttons.js-toggler-container{class: @show_star ? 'on' : ''}
-      - if current_user
-        = link_to_toggle_star('Star this project.', false, true)
-        = link_to_toggle_star('Unstar this project.', true, true)
 
   .project-home-row.hidden-xs
     - if current_user && !empty_repo

app/views/projects/repositories/_download_archive.html.haml

@@ -3,10 +3,10 @@
 - split_button = split_button || false
 - if split_button == true
   %span.btn-group{class: btn_class}
-    = link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: ref, format: 'zip'), class: 'btn', rel: 'nofollow' do
+    = link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: ref, format: 'zip'), class: 'btn btn-sm', rel: 'nofollow' do
       %i.fa.fa-download
       %span Download zip
-    %a.btn.dropdown-toggle{ 'data-toggle' => 'dropdown' }
+    %a.btn-sm.btn.dropdown-toggle{ 'data-toggle' => 'dropdown' }
       %span.caret
       %span.sr-only
         Select Archive Format

app/views/projects/show.html.haml

@@ -68,7 +68,7 @@
               = link_to license_url(@project), class: 'btn btn-block' do
                 View license
 
-        .prepend-top-10
+        .prepend-top-10.append-bottom-10
           %p
             %span.light Created on
             #{@project.created_at.stamp('Aug 22, 2013')}
@@ -79,17 +79,22 @@
             - else
               #{link_to @project.owner_name, @project.owner}
 
+        - unless @project.empty_repo?
+          - if can? current_user, :download_code, @project
+            %hr
+            .prepend-top-10.append-bottom-10
+              = render 'projects/repositories/download_archive', split_button: true
+
+        .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'
-        - unless @project.empty_repo?
-          - if can? current_user, :download_code, @project
-            = render 'projects/repositories/download_archive', split_button: true
 
   - if readme
     .tab-pane#tab-readme