Fix mobile dropdown bug

4 files changed, 29 insertions, 2 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index f2d7dc625e0..a81fcb1c6b3 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -209,6 +209,15 @@
     float: right;
     padding: 7px 0 0;
 
+    @media (max-width: $screen-xs-min) {
+      float: none;
+      padding: 0 9px;
+
+      .dropdown-new {
+        width: 100%;
+      }
+    }
+
     i {
       color: $layout-link-gray;
     }
@@ -225,6 +234,10 @@
 
     .dropdown {
       margin-left: 7px;
+
+      @media (max-width: $screen-xs-min) {
+        margin-left: 0;
+      }
     }
   }
 
@@ -260,4 +273,10 @@
 
 .page-with-layout-nav {
   margin-top: 50px;
+
+  &.controls-dropdown-visible {
+    @media (max-width: $screen-xs-min) {
+      margin-top: 96px;
+    }
+  }
 }
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index 3aa41030453..fbb799eecd3 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -43,4 +43,12 @@ module NavHelper
     class_name += " with-horizontal-nav" if defined?(nav) && nav
     class_name
   end
+
+  def layout_nav_class
+    "page-with-layout-nav" if defined?(nav) && nav
+  end
+
+  def layout_dropdown_class
+    "controls-dropdown-visible" if current_user
+  end
 end
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 3c0660d34f4..5be0b546a62 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -25,7 +25,7 @@
     .layout-nav
       .container-fluid
         = render "layouts/nav/#{nav}"
-  .content-wrapper{ class: ('page-with-layout-nav' if defined?(nav) && nav) }
+  .content-wrapper{ class: "#{layout_nav_class} #{layout_dropdown_class}" }
     = render "layouts/broadcast"
     = render "layouts/flash"
     = yield :flash_message
diff --git a/app/views/layouts/nav/_group_settings.html.haml b/app/views/layouts/nav/_group_settings.html.haml
index e391ec7f2b7..0b2673f1a82 100644
--- a/app/views/layouts/nav/_group_settings.html.haml
+++ b/app/views/layouts/nav/_group_settings.html.haml
@@ -1,7 +1,7 @@
 - if current_user
   - if access = @group.users.find_by(id: current_user.id)
     .controls
-      %span.dropdown.group-settings-dropdown
+      .dropdown.group-settings-dropdown
         %a.dropdown-new.btn.btn-default#group-settings-button{href: '#', 'data-toggle' => 'dropdown'}
           = icon('cog')
           = icon('caret-down')