Fix mobile styles25102-files-view-button

4 files changed, 48 insertions, 32 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 062665bc634..562ecbc6986 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 3903c798311..ce1a13c6afa 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -1,6 +1,6 @@
 .tree-holder {
   .nav-block {
-    margin-top: 10px;
+    margin: 10px 0;
 
     @media (min-width: $screen-sm-min) {
       display: flex;
@@ -11,32 +11,55 @@
 
       .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: 170px;
-        width: 170px;
+        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 {
+      .dropdown,
+      .btn-group {
         width: 100%;
       }
 
@@ -197,15 +220,6 @@
   color: $md-link-color;
 }
 
-.tree-controls {
-  position: relative;
-  z-index: 2;
-
-  .btn {
-    margin: 0 0 10px 10px;
-  }
-}
-
 .repo-charts {
   .sub-header {
     margin: 20px 0;
diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml
index 0ad9f258e48..5840e9863f4 100644
--- a/app/views/projects/blob/_breadcrumb.html.haml
+++ b/app/views/projects/blob/_breadcrumb.html.haml
@@ -1,9 +1,26 @@
 - blame = local_assigns.fetch(:blame, false)
 .nav-block
+  .tree-ref-container
+    .tree-ref-holder
+      = render 'shared/ref_switcher', destination: 'blob', path: @path
+
+    %ul.breadcrumb.repo-breadcrumb
+      %li
+        = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
+          = @project.path
+      - path_breadcrumbs do |title, path|
+        - title = truncate(title, length: 40)
+        %li
+          - if path == @path
+            = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, path)) do
+              %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.prepend-left-10{ role: "group" }<
+    .btn-group{ role: "group" }<
       -# only show normal/blame view links for text files
       - if blob.readable_text?
         - if blame
@@ -18,19 +35,3 @@
 
       = 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-holder
-    = render 'shared/ref_switcher', destination: 'blob', path: @path
-
-  %ul.breadcrumb.repo-breadcrumb
-    %li
-      = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
-        = @project.path
-    - path_breadcrumbs do |title, path|
-      - title = truncate(title, length: 40)
-      %li
-        - if path == @path
-          = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, path)) do
-            %strong= title
-        - else
-          = link_to title, namespace_project_tree_path(@project.namespace, @project, tree_join(@ref, path))
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 8b44af0d63e..00da76349da 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -17,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