Further design iteration on project overview

Continues the iteration on the project overview UI:

- moved star, fork and new clone button
(copy SSH/HTTPS URLs) to top right,
  made them smaller
- avatar is now larger (64px)
- 'Request access' is now a link instead
  of a button
- overview comes before the description +
  changed styling and added icons
- description font-size is now 16px (large-paragraph)
- quick links to files are moved downwards
  below the commit/pipeline info
- margins changed to group content into
  4 groups to clean up the interface
- visibility info reduced to icon-only and
  moved to the right of the title

1 files changed, 61 insertions, 69 deletions

diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index dcef4dd5b69..e191b009db2 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -1,83 +1,75 @@
 - empty_repo = @project.empty_repo?
-- license = @project.license_anchor_data
+- show_auto_devops_callout = show_auto_devops_callout?(@project)
 .project-home-panel{ class: ("empty-project" if empty_repo) }
-  .limit-container-width{ class: container_class }
-    .project-header.d-flex.flex-row.flex-wrap.align-items-center.append-bottom-8
-      .project-title-row.d-flex.align-items-center
-        .avatar-container.project-avatar.float-none
-          = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s24', width: 24, height: 24)
-        %h1.project-title.d-flex.align-items-baseline.qa-project-name
-          = @project.name
-      .project-metadata.d-flex.flex-row.flex-wrap.align-items-baseline
-        .project-visibility.d-inline-flex.align-items-baseline.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
-          = visibility_level_icon(@project.visibility_level, fw: false, options: {class: 'icon'})
-          = visibility_level_label(@project.visibility_level)
-        - if license.present?
-          .project-license.d-inline-flex.align-items-baseline
-            = link_to_if license.link, sprite_icon('scale', size: 16, css_class: 'icon') + license.label, license.link, class: license.enabled ? 'btn btn-link btn-secondary-hover-link' : 'btn btn-link'
-        - if @project.tag_list.present?
-          .project-tag-list.d-inline-flex.align-items-baseline.has-tooltip{ data: { container: 'body' }, title: @project.has_extra_tags? ? @project.tag_list.join(', ') : nil }
-            = sprite_icon('tag', size: 16, css_class: 'icon')
-            = @project.tags_to_show
-            - if @project.has_extra_tags?
-              = _("+ %{count} more") % { count: @project.count_of_extra_tags_not_shown  }
+  .project-header.row.append-bottom-8
+    .project-title-row.col-md-12.col-lg-7.d-flex
+      .avatar-container.project-avatar.float-none
+        = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64)
+      .d-flex.flex-column.flex-wrap.align-items-baseline
+        .d-inline-flex.align-items-baseline
+          %h1.project-title.qa-project-name
+            = @project.name
+            %span.project-visibility.prepend-left-8.d-inline-flex.align-items-baseline.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
+              = visibility_level_icon(@project.visibility_level, fw: false, options: {class: 'icon'})
+        .project-metadata.d-flex.align-items-center
+          - if can?(current_user, :read_project, @project)
+            %span.text-secondary
+              = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
+          - if current_user
+            %span.access-request-links.prepend-left-8
+              = render 'shared/members/access_request_links', source: @project
+          - if @project.tag_list.present?
+            %span.project-tag-list.d-inline-flex.prepend-left-8.has-tooltip{ data: { container: 'body' }, title: @project.has_extra_tags? ? @project.tag_list.join(', ') : nil }
+              = sprite_icon('tag', size: 16, css_class: 'icon append-right-4')
+              = @project.tags_to_show
+              - if @project.has_extra_tags?
+                = _("+ %{count} more") % { count: @project.count_of_extra_tags_not_shown  }
 
-    .project-home-desc
-      - if @project.description.present?
-        .project-description
-          .project-description-markdown.read-more-container
-            = markdown_field(@project, :description)
-          %button.btn.btn-blank.btn-link.text-secondary.js-read-more-trigger.text-secondary.d-lg-none{ type: "button" }
-            = _("Read more")
-
-      - if can?(current_user, :read_project, @project)
-        .text-secondary.prepend-top-8
-          = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
-
-      - if @project.forked?
-        %p
-          - if @project.fork_source
-            #{ s_('ForkedFromProjectPath|Forked from') }
-            = link_to project_path(@project.fork_source) do
-              = fork_source_name(@project)
-          - else
-            - deleted_message = s_('ForkedFromProjectPath|Forked from %{project_name} (deleted)')
-            = deleted_message % { project_name: fork_source_name(@project) }
-
-    - if @project.badges.present?
-      .project-badges.prepend-top-default.append-bottom-default
-        - @project.badges.each do |badge|
-          %a.append-right-8{ href: badge.rendered_link_url(@project),
-            target: '_blank',
-            rel: 'noopener noreferrer' }>
-            %img.project-badge{ src: badge.rendered_image_url(@project),
-              'aria-hidden': true,
-              alt: 'Project badge' }>
+    .project-repo-buttons.col-md-12.col-lg-5.d-inline-flex.flex-wrap.justify-content-lg-end
+      - if current_user
+        .d-inline-flex
+          = render 'projects/buttons/notifications', notification_setting: @notification_setting, btn_class: 'btn-xs'
 
-    .project-repo-buttons.d-inline-flex.flex-wrap
       .count-buttons.d-inline-flex
         = render 'projects/buttons/star'
         = render 'projects/buttons/fork'
 
       - if can?(current_user, :download_code, @project)
-        .project-clone-holder.d-inline-flex.d-sm-none
+        .project-clone-holder.d-inline-flex.d-md-none.btn-block
           = render "shared/mobile_clone_panel"
 
-        .project-clone-holder.d-none.d-sm-inline-flex
-          = render "shared/clone_panel"
+        .project-clone-holder.d-none.d-md-inline-flex
+          = render "projects/buttons/clone"
 
-        - if show_xcode_link?(@project)
-          .project-action-button.project-xcode.inline
-            = render "projects/buttons/xcode_link"
+  - if can?(current_user, :download_code, @project)
+    %nav.project-stats
+      .nav-links.quick-links.mt-3
+        = render 'stat_anchor_list', anchors: @project.statistics_anchors(show_auto_devops_callout: show_auto_devops_callout)
 
-      - if current_user
-        - if can?(current_user, :download_code, @project)
-          .d-none.d-sm-inline-flex
-            = render 'projects/buttons/download', project: @project, ref: @ref
-          .d-none.d-sm-inline-flex
-            = render 'projects/buttons/dropdown'
+  .project-home-desc.mt-1
+    - if @project.description.present?
+      .project-description
+        .project-description-markdown.read-more-container
+          = markdown_field(@project, :description)
+        %button.btn.btn-blank.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
+          = _("Read more")
+
+    - if @project.forked?
+      %p
+        - if @project.fork_source
+          #{ s_('ForkedFromProjectPath|Forked from') }
+          = link_to project_path(@project.fork_source) do
+            = fork_source_name(@project)
+        - else
+          - deleted_message = s_('ForkedFromProjectPath|Forked from %{project_name} (deleted)')
+          = deleted_message % { project_name: fork_source_name(@project) }
 
-        .d-none.d-sm-inline-flex
-          = render 'shared/notifications/button', notification_setting: @notification_setting
-        .d-none.d-sm-inline-flex
-          = render 'shared/members/access_request_buttons', source: @project
+  - if @project.badges.present?
+    .project-badges.mb-2
+      - @project.badges.each do |badge|
+        %a.append-right-8{ href: badge.rendered_link_url(@project),
+          target: '_blank',
+          rel: 'noopener noreferrer' }>
+          %img.project-badge{ src: badge.rendered_image_url(@project),
+            'aria-hidden': true,
+            alt: 'Project badge' }>