Mobile UI improvements for dashboard/nav

Style navbar toggle button

Style navbar toggle manually instead of with button classes

Style navbar

Modify color

Turn off all tooltips for touch devices

Style main nav

Fix scrolling navbar collapse

Style tweaks

Minor tweaks

Style no ssh key message

19 files changed, 124 insertions, 17 deletions

diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index 79a217186de..507e7197d5f 100644
--- a/app/assets/stylesheets/generic/common.scss
+++ b/app/assets/stylesheets/generic/common.scss
@@ -327,6 +327,12 @@ li.note {
     color: #fff;
     text-decoration: underline;
   }
+
+  .links-xs {
+    text-align: center;
+    font-size: 16px;
+    padding: 5px;
+  }
 }
 
 .warning_message {
@@ -485,3 +491,7 @@ table {
     margin-bottom: 15px;
   }
 }
+
+@media (max-width: $screen-xs-max) {
+  .container .content { margin-top: 20px; }
+}
diff --git a/app/assets/stylesheets/main/layout.scss b/app/assets/stylesheets/main/layout.scss
index a4d889f26dd..9e009a5e0ad 100644
--- a/app/assets/stylesheets/main/layout.scss
+++ b/app/assets/stylesheets/main/layout.scss
@@ -1,5 +1,7 @@
 html {
   overflow-y: scroll;
+
+  &.touch .tooltip { display: none !important; }
 }
 
 body {
diff --git a/app/assets/stylesheets/sections/header.scss b/app/assets/stylesheets/sections/header.scss
index b0dd0d08356..780f281dd7e 100644
--- a/app/assets/stylesheets/sections/header.scss
+++ b/app/assets/stylesheets/sections/header.scss
@@ -29,6 +29,59 @@ header {
         float: right;
         margin-right: 0;
       }
+
+      .navbar-toggle {
+        color: $style_color;
+        margin: 0 -15px 0 0;
+        padding: 10px;
+        border-radius: 0;
+
+        button i { font-size: 22px; }
+
+        &.collapsed { background-color: transparent !important;}
+
+        &:hover {
+          background-color: #EEE;
+        }
+      }
+    }
+
+    @media (max-width: $screen-xs-max) {
+      border-width: 0;
+      font-size: 18px;
+
+      .app_logo { margin-left: -15px; }
+      .project_name {
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: top;
+        white-space: nowrap;
+        max-width: 70%;
+      }
+
+      .navbar-collapse {
+        padding-right: 0;
+        padding-left: 0;
+      }
+
+      .navbar-nav {
+        margin: 5px 0;
+
+        .visible-xs, .visable-sm {
+          display: table-cell !important;
+        }
+      }
+
+      li {
+        display: table-cell;
+        width: 1%;
+
+        a {
+          text-align: center;
+          font-size: 18px !important;
+        }
+      }
     }
   }
 
@@ -128,6 +181,8 @@ header {
         background: #708090;
         border-bottom: 1px solid #AAA;
 
+        .navbar-toggle { color: #fff; }
+
         .nav > li > a {
           color: #AAA;
           text-shadow: 0 1px 0 #444;
diff --git a/app/assets/stylesheets/sections/nav.scss b/app/assets/stylesheets/sections/nav.scss
index f706854b4fe..7dd80dc52fa 100644
--- a/app/assets/stylesheets/sections/nav.scss
+++ b/app/assets/stylesheets/sections/nav.scss
@@ -83,4 +83,38 @@
       padding-top: 2px;
     }
   }
+
+  @media (max-width: $screen-xs-max) {
+    font-size: 18px;
+    margin: 0;
+
+    max-height: none;
+
+    &, .container {
+      padding: 0;
+      border-top: 0;
+    }
+
+    ul {
+      height: auto;
+
+      li {
+        display: list-item;
+        width: auto;
+        padding: 5px 0;
+
+        &.active {
+          background-color: $primary_color;
+
+          a {
+            color: #fff;
+            font-weight: normal;
+            text-shadow: none;
+
+            &:after { display: none; }
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/app/assets/stylesheets/themes/ui_color.scss b/app/assets/stylesheets/themes/ui_color.scss
index 7d9cab215c8..0fc72d4e0a8 100644
--- a/app/assets/stylesheets/themes/ui_color.scss
+++ b/app/assets/stylesheets/themes/ui_color.scss
@@ -18,7 +18,7 @@
       .navbar-inner {
         background: #547;
         border-bottom: 1px solid #435;
-        .app_logo {
+        .app_logo, .navbar-toggle {
           &:hover {
             background-color: #435;
           }
diff --git a/app/assets/stylesheets/themes/ui_gray.scss b/app/assets/stylesheets/themes/ui_gray.scss
index 41c08c840e2..959febad6fe 100644
--- a/app/assets/stylesheets/themes/ui_gray.scss
+++ b/app/assets/stylesheets/themes/ui_gray.scss
@@ -18,7 +18,7 @@
       .navbar-inner {
         background: #373737;
         border-bottom: 1px solid #272727;
-        .app_logo {
+        .app_logo, .navbar-toggle {
           &:hover {
             background-color: #272727;
           }
diff --git a/app/assets/stylesheets/themes/ui_mars.scss b/app/assets/stylesheets/themes/ui_mars.scss
index aba3e0ca827..9af5adbf10a 100644
--- a/app/assets/stylesheets/themes/ui_mars.scss
+++ b/app/assets/stylesheets/themes/ui_mars.scss
@@ -18,7 +18,7 @@
       .navbar-inner {
         background: #474D57;
         border-bottom: 1px solid #373D47;
-        .app_logo {
+        .app_logo, .navbar-toggle {
           &:hover {
             background-color: #373D47;
           }
diff --git a/app/assets/stylesheets/themes/ui_modern.scss b/app/assets/stylesheets/themes/ui_modern.scss
index 015a4bbf0c3..b0827deb1ac 100644
--- a/app/assets/stylesheets/themes/ui_modern.scss
+++ b/app/assets/stylesheets/themes/ui_modern.scss
@@ -18,7 +18,7 @@
       .navbar-inner {
         background: #345;
         border-bottom: 1px solid #234;
-        .app_logo {
+        .app_logo, .navbar-toggle {
           &:hover {
             background-color: #234;
           }
diff --git a/app/views/dashboard/show.html.haml b/app/views/dashboard/show.html.haml
index c4018d4b6d8..e5b7fbf097e 100644
--- a/app/views/dashboard/show.html.haml
+++ b/app/views/dashboard/show.html.haml
@@ -2,7 +2,7 @@
   .dashboard.row
     .activities.col-md-8
       = render 'activities'
-    .side.col-md-4.hidden-sm
+    .side.col-md-4.hidden-sm.hidden-xs
       = render 'sidebar'
 
 - else
diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml
index 58b216f2e98..32debb8c7ac 100644
--- a/app/views/layouts/_head_panel.html.haml
+++ b/app/views/layouts/_head_panel.html.haml
@@ -14,14 +14,14 @@
 
       .navbar-collapse.collapse
         %ul.nav.navbar-nav
-          %li
+          %li.hidden-sm.hidden-xs
             %a
               %div.hide.turbolink-spinner
                 %i.icon-refresh.icon-spin
                 Loading...
-          %li.hidden-sm
+          %li.hidden-sm.hidden-xs
             = render "layouts/search"
-          %li.visible-sm
+          %li.visible-sm.visible-xs
             = link_to search_path, title: "Search", class: 'has_bottom_tooltip', 'data-original-title' => 'Search area' do
               %i.icon-search
           %li
diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml
index 3a23cbdb376..439cb978a76 100644
--- a/app/views/layouts/admin.html.haml
+++ b/app/views/layouts/admin.html.haml
@@ -4,7 +4,7 @@
   %body{class: "#{app_theme} admin", :'data-page' => body_data_page}
     = render "layouts/head_panel", title: "Admin area"
     = render "layouts/flash"
-    %nav.main-nav
+    %nav.main-nav.navbar-collapse.collapse
       .container= render 'layouts/nav/admin'
 
     .container
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 92edc718235..511db389e0f 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -5,7 +5,7 @@
     = render "layouts/broadcast"
     = render "layouts/head_panel", title: "Dashboard"
     = render "layouts/flash"
-    %nav.main-nav
+    %nav.main-nav.navbar-collapse.collapse
       .container= render 'layouts/nav/dashboard'
 
     .container
diff --git a/app/views/layouts/group.html.haml b/app/views/layouts/group.html.haml
index b546a9fa84f..fb4a3a3ba95 100644
--- a/app/views/layouts/group.html.haml
+++ b/app/views/layouts/group.html.haml
@@ -5,7 +5,7 @@
     = render "layouts/broadcast"
     = render "layouts/head_panel", title: "group: #{@group.name}"
     = render "layouts/flash"
-    %nav.main-nav
+    %nav.main-nav.navbar-collapse.collapse
       .container= render 'layouts/nav/group'
 
     .container
diff --git a/app/views/layouts/profile.html.haml b/app/views/layouts/profile.html.haml
index 72849639571..2d869a6cdcb 100644
--- a/app/views/layouts/profile.html.haml
+++ b/app/views/layouts/profile.html.haml
@@ -5,7 +5,7 @@
     = render "layouts/broadcast"
     = render "layouts/head_panel", title: "Profile"
     = render "layouts/flash"
-    %nav.main-nav
+    %nav.main-nav.navbar-collapse.collapse
       .container= render 'layouts/nav/profile'
 
     .container
diff --git a/app/views/layouts/project_settings.html.haml b/app/views/layouts/project_settings.html.haml
index a55f043f2cf..5659cfab31d 100644
--- a/app/views/layouts/project_settings.html.haml
+++ b/app/views/layouts/project_settings.html.haml
@@ -9,7 +9,7 @@
     - if can?(current_user, :download_code, @project)
       = render 'shared/no_ssh'
 
-    %nav.main-nav
+    %nav.main-nav.navbar-collapse.collapse
       .container= render 'layouts/nav/project'
 
     .container
diff --git a/app/views/layouts/projects.html.haml b/app/views/layouts/projects.html.haml
index 55214c6a5c9..3ae4961b137 100644
--- a/app/views/layouts/projects.html.haml
+++ b/app/views/layouts/projects.html.haml
@@ -9,7 +9,7 @@
     - if can?(current_user, :download_code, @project)
       = render 'shared/no_ssh'
 
-    %nav.main-nav
+    %nav.main-nav.navbar-collapse.collapse
       .container= render 'layouts/nav/project'
 
     .container
diff --git a/app/views/layouts/public_projects.html.haml b/app/views/layouts/public_projects.html.haml
index 1e8814134f5..a8e3236d865 100644
--- a/app/views/layouts/public_projects.html.haml
+++ b/app/views/layouts/public_projects.html.haml
@@ -3,7 +3,7 @@
   = render "layouts/head", title: @project.name_with_namespace
   %body{class: "#{app_theme} application", :'data-page' => body_data_page}
     = render "layouts/public_head_panel"
-    %nav.main-nav
+    %nav.main-nav.navbar-collapse.collapse
       .container= render 'layouts/nav/project'
     .container
       .content= yield
diff --git a/app/views/layouts/user_team.html.haml b/app/views/layouts/user_team.html.haml
index e64e68d2446..191ad406c3c 100644
--- a/app/views/layouts/user_team.html.haml
+++ b/app/views/layouts/user_team.html.haml
@@ -4,7 +4,7 @@
   %body{class: "#{app_theme} application", :'data-page' => body_data_page}
     = render "layouts/head_panel", title: "team: #{@team.name}"
     = render "layouts/flash"
-    %nav.main-nav
+    %nav.main-nav.navbar-collapse.collapse
       .container= render 'layouts/nav/team'
 
     .container
diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml
index 077e6c6a808..e70eb4d01b9 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -2,7 +2,13 @@
   .no-ssh-key-message
     .container
       You won't be able to pull or push project code via SSH until you #{link_to 'add an SSH key', new_profile_key_path} to your profile
-      %div.pull-right
+      .pull-right.hidden-xs
         = link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'hide-no-ssh-message', remote: true
         |
         = link_to 'Remind later', '#', class: 'hide-no-ssh-message'
+      .links-xs.visible-xs
+        = link_to "Add key", new_profile_key_path
+        |
+        = link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'hide-no-ssh-message', remote: true
+        |
+        = link_to 'Later', '#', class: 'hide-no-ssh-message'