File view buttons

app/assets/stylesheets/pages/projects.scss

@@ -380,7 +380,7 @@ a.deploy-project-label {
   padding: 0;
   background: transparent;
   border: none;
-  line-height: 36px;
+  line-height: 34px;
   margin: 0;
 
   > li + li::before {

app/assets/stylesheets/pages/tree.scss

@@ -1,6 +1,72 @@
 .tree-holder {
-  > .nav-block {
-    margin: 11px 0;
+  .nav-block {
+    margin: 10px 0;
+
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+
+      .tree-ref-container {
+        flex: 1;
+      }
+
+      .tree-controls {
+        text-align: right;
+
+        .btn-group {
+          margin-left: 10px;
+        }
+      }
+
+      .tree-ref-holder {
+        float: left;
+        margin-right: 15px;
+      }
+
+      .repo-breadcrumb {
+        li:last-of-type {
+          position: relative;
+        }
+      }
+
+      .add-to-tree-dropdown {
+        position: absolute;
+        left: 18px;
+      }
+    }
+  }
+
+  @media (max-width: $screen-xs-max) {
+    .repo-breadcrumb {
+      margin-top: 10px;
+      position: relative;
+
+      .dropdown-menu {
+        min-width: 100%;
+        width: 100%;
+        left: inherit;
+        right: 0;
+      }
+    }
+
+    .add-to-tree-dropdown {
+      position: absolute;
+      left: 0;
+      right: 0;
+    }
+
+    .tree-controls {
+      margin-bottom: 10px;
+
+      .btn,
+      .dropdown,
+      .btn-group {
+        width: 100%;
+      }
+
+      .btn {
+        margin: 10px 0 0;
+      }
+    }
   }
 
   .file-finder {
@@ -131,11 +197,6 @@
   }
 }
 
-.tree-ref-holder {
-  float: left;
-  margin-right: 15px;
-}
-
 .blob-commit-info {
   list-style: none;
   margin: 0;
@@ -159,16 +220,6 @@
   color: $md-link-color;
 }
 
-.tree-controls {
-  float: right;
-  position: relative;
-  z-index: 2;
-
-  .project-action-button {
-    margin-left: $btn-side-margin;
-  }
-}
-
 .repo-charts {
   .sub-header {
     margin: 20px 0;

app/views/projects/_find_file_link.html.haml

@@ -1,3 +1,3 @@
-= link_to namespace_project_find_file_path(@project.namespace, @project, @ref), class: 'btn btn-grouped shortcuts-find-file', rel: 'nofollow' do
+= link_to namespace_project_find_file_path(@project.namespace, @project, @ref), class: 'btn shortcuts-find-file', rel: 'nofollow' do
   = icon('search')
   %span= _('Find file')

app/views/projects/blob/_breadcrumb.html.haml

@@ -1,24 +1,6 @@
 - blame = local_assigns.fetch(:blame, false)
 .nav-block
-  .tree-controls
-    = render 'projects/find_file_link'
-
-    .btn-group.prepend-left-10{ role: "group" }<
-      -# only show normal/blame view links for text files
-      - if blob.readable_text?
-        - if blame
-          = link_to 'Normal view', namespace_project_blob_path(@project.namespace, @project, @id),
-              class: 'btn'
-        - else
-          = link_to 'Annotate', namespace_project_blame_path(@project.namespace, @project, @id),
-              class: 'btn js-blob-blame-link' unless blob.empty?
-
-      = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id),
-          class: 'btn'
-
-      = link_to 'Permalink', namespace_project_blob_path(@project.namespace, @project,
-          tree_join(@commit.sha, @path)), class: 'btn js-data-file-blob-permalink-url'
-
+  .tree-ref-container
     .tree-ref-holder
       = render 'shared/ref_switcher', destination: 'blob', path: @path
 
@@ -34,3 +16,22 @@
               %strong= title
           - else
             = link_to title, namespace_project_tree_path(@project.namespace, @project, tree_join(@ref, path))
+
+  .tree-controls
+    = render 'projects/find_file_link'
+
+    .btn-group{ role: "group" }<
+      -# only show normal/blame view links for text files
+      - if blob.readable_text?
+        - if blame
+          = link_to 'Normal view', namespace_project_blob_path(@project.namespace, @project, @id),
+              class: 'btn'
+        - else
+          = link_to 'Annotate', namespace_project_blame_path(@project.namespace, @project, @id),
+              class: 'btn js-blob-blame-link' unless blob.empty?
+
+      = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id),
+          class: 'btn'
+
+      = link_to 'Permalink', namespace_project_blob_path(@project.namespace, @project,
+          tree_join(@commit.sha, @path)), class: 'btn js-data-file-blob-permalink-url'

app/views/projects/tree/_tree_header.html.haml

@@ -1,14 +1,8 @@
-.tree-controls
-  = render 'projects/find_file_link'
-
-  = link_to s_('Commits|History'), namespace_project_commits_path(@project.namespace, @project, @id), class: 'btn btn-grouped'
-
-  = render 'projects/buttons/download', project: @project, ref: @ref
-
-.tree-ref-holder
+.tree-ref-container
+  .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'tree', path: @path
 
-%ul.breadcrumb.repo-breadcrumb
+  %ul.breadcrumb.repo-breadcrumb
     %li
       = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
         = @project.path
@@ -23,8 +17,9 @@
             = icon('plus')
         - else
           %span.dropdown
-          %a.dropdown-toggle.btn.add-to-tree{ href: '#', "data-toggle" => "dropdown" }
+            %a.dropdown-toggle.btn.add-to-tree{ href: '#', "data-toggle" => "dropdown", "data-target" => ".add-to-tree-dropdown" }
               = icon('plus')
+          .add-to-tree-dropdown
             %ul.dropdown-menu
               - if can_edit_tree?
                 %li
@@ -77,3 +72,10 @@
                 = link_to new_namespace_project_tag_path(@project.namespace, @project) do
                   = icon('tags fw')
                   #{ _('New tag') }
+
+.tree-controls
+  = render 'projects/find_file_link'
+
+  = link_to s_('Commits|History'), namespace_project_commits_path(@project.namespace, @project, @id), class: 'btn'
+
+  = render 'projects/buttons/download', project: @project, ref: @ref

changelogs/unreleased/25102-files-view-button.yml

@@ -0,0 +1,4 @@
+---
+title: Fix mobile view of files view buttons
+merge_request:
+author: