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

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; }
+}

app/assets/stylesheets/main/layout.scss

 html {
   overflow-y: scroll;
+
+  &.touch .tooltip { display: none !important; }
 }
 
 body {

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;

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; }
+          }
+        }
+      }
+    }
+  }
 }

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;
           }

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;
           }

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;
           }

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;
           }

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

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

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

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

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

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

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

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

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

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

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'