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

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
Drew Blessing
1 parent 8f8db776
Showing 19 changed files with 124 additions and 17 deletions Show diff stats
app/assets/stylesheets/generic/common.scss
app/assets/stylesheets/main/layout.scss
app/assets/stylesheets/sections/header.scss
app/assets/stylesheets/sections/nav.scss
app/assets/stylesheets/themes/ui_color.scss
app/assets/stylesheets/themes/ui_gray.scss
app/assets/stylesheets/themes/ui_mars.scss
app/assets/stylesheets/themes/ui_modern.scss
app/views/dashboard/show.html.haml
app/views/layouts/_head_panel.html.haml
app/views/layouts/admin.html.haml
app/views/layouts/application.html.haml
app/views/layouts/group.html.haml
app/views/layouts/profile.html.haml
app/views/layouts/project_settings.html.haml
app/views/layouts/projects.html.haml
app/views/layouts/public_projects.html.haml
app/views/layouts/user_team.html.haml
app/views/shared/_no_ssh.html.haml
@@ -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; }
+}
 html {
   overflow-y: scroll;
+
+  &.touch .tooltip { display: none !important; }
 }
 body {
@@ -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;
@@ -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; }
+          }
+        }
+      }
+    }
+  }
 }
@@ -18,7 +18,7 @@
       .navbar-inner {
         background: #547;
         border-bottom: 1px solid #435;
-        .app_logo {
+        .app_logo, .navbar-toggle {
           &:hover {
             background-color: #435;
           }
@@ -18,7 +18,7 @@
       .navbar-inner {
         background: #373737;
         border-bottom: 1px solid #272727;
-        .app_logo {
+        .app_logo, .navbar-toggle {
           &:hover {
             background-color: #272727;
           }
@@ -18,7 +18,7 @@
       .navbar-inner {
         background: #474D57;
         border-bottom: 1px solid #373D47;
-        .app_logo {
+        .app_logo, .navbar-toggle {
           &:hover {
             background-color: #373D47;
           }
@@ -18,7 +18,7 @@
       .navbar-inner {
         background: #345;
         border-bottom: 1px solid #234;
-        .app_logo {
+        .app_logo, .navbar-toggle {
           &:hover {
             background-color: #234;
           }
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'
	@@ -327,6 +327,12 @@ li.note {		@@ -327,6 +327,12 @@ li.note {
327	color: #fff;	327	color: #fff;
328	text-decoration: underline;	328	text-decoration: underline;
329	}	329	}
		330	+
		331	+ .links-xs {
		332	+ text-align: center;
		333	+ font-size: 16px;
		334	+ padding: 5px;
		335	+ }
330	}	336	}
331		337
332	.warning_message {	338	.warning_message {
	@@ -485,3 +491,7 @@ table {		@@ -485,3 +491,7 @@ table {
485	margin-bottom: 15px;	491	margin-bottom: 15px;
486	}	492	}
487	}	493	}
		494	+
		495	+@media (max-width: $screen-xs-max) {
		496	+ .container .content { margin-top: 20px; }
		497	+}
1	html {	1	html {
2	overflow-y: scroll;	2	overflow-y: scroll;
		3	+
		4	+ &.touch .tooltip { display: none !important; }
3	}	5	}
4		6
5	body {	7	body {
	@@ -29,6 +29,59 @@ header {		@@ -29,6 +29,59 @@ header {
29	float: right;	29	float: right;
30	margin-right: 0;	30	margin-right: 0;
31	}	31	}
		32	+
		33	+ .navbar-toggle {
		34	+ color: $style_color;
		35	+ margin: 0 -15px 0 0;
		36	+ padding: 10px;
		37	+ border-radius: 0;
		38	+
		39	+ button i { font-size: 22px; }
		40	+
		41	+ &.collapsed { background-color: transparent !important;}
		42	+
		43	+ &:hover {
		44	+ background-color: #EEE;
		45	+ }
		46	+ }
		47	+ }
		48	+
		49	+ @media (max-width: $screen-xs-max) {
		50	+ border-width: 0;
		51	+ font-size: 18px;
		52	+
		53	+ .app_logo { margin-left: -15px; }
		54	+ .project_name {
		55	+ display: inline-block;
		56	+ overflow: hidden;
		57	+ text-overflow: ellipsis;
		58	+ vertical-align: top;
		59	+ white-space: nowrap;
		60	+ max-width: 70%;
		61	+ }
		62	+
		63	+ .navbar-collapse {
		64	+ padding-right: 0;
		65	+ padding-left: 0;
		66	+ }
		67	+
		68	+ .navbar-nav {
		69	+ margin: 5px 0;
		70	+
		71	+ .visible-xs, .visable-sm {
		72	+ display: table-cell !important;
		73	+ }
		74	+ }
		75	+
		76	+ li {
		77	+ display: table-cell;
		78	+ width: 1%;
		79	+
		80	+ a {
		81	+ text-align: center;
		82	+ font-size: 18px !important;
		83	+ }
		84	+ }
32	}	85	}
33	}	86	}
34		87
	@@ -128,6 +181,8 @@ header {		@@ -128,6 +181,8 @@ header {
128	background: #708090;	181	background: #708090;
129	border-bottom: 1px solid #AAA;	182	border-bottom: 1px solid #AAA;
130		183
		184	+ .navbar-toggle { color: #fff; }
		185	+
131	.nav > li > a {	186	.nav > li > a {
132	color: #AAA;	187	color: #AAA;
133	text-shadow: 0 1px 0 #444;	188	text-shadow: 0 1px 0 #444;
	@@ -83,4 +83,38 @@		@@ -83,4 +83,38 @@
83	padding-top: 2px;	83	padding-top: 2px;
84	}	84	}
85	}	85	}
		86	+
		87	+ @media (max-width: $screen-xs-max) {
		88	+ font-size: 18px;
		89	+ margin: 0;
		90	+
		91	+ max-height: none;
		92	+
		93	+ &, .container {
		94	+ padding: 0;
		95	+ border-top: 0;
		96	+ }
		97	+
		98	+ ul {
		99	+ height: auto;
		100	+
		101	+ li {
		102	+ display: list-item;
		103	+ width: auto;
		104	+ padding: 5px 0;
		105	+
		106	+ &.active {
		107	+ background-color: $primary_color;
		108	+
		109	+ a {
		110	+ color: #fff;
		111	+ font-weight: normal;
		112	+ text-shadow: none;
		113	+
		114	+ &:after { display: none; }
		115	+ }
		116	+ }
		117	+ }
		118	+ }
		119	+ }
86	}	120	}
	@@ -18,7 +18,7 @@		@@ -18,7 +18,7 @@
18	.navbar-inner {	18	.navbar-inner {
19	background: #547;	19	background: #547;
20	border-bottom: 1px solid #435;	20	border-bottom: 1px solid #435;
21	- .app_logo {	21	+ .app_logo, .navbar-toggle {
22	&:hover {	22	&:hover {
23	background-color: #435;	23	background-color: #435;
24	}	24	}
	@@ -2,7 +2,7 @@		@@ -2,7 +2,7 @@
2	.dashboard.row	2	.dashboard.row
3	.activities.col-md-8	3	.activities.col-md-8
4	= render 'activities'	4	= render 'activities'
5	- .side.col-md-4.hidden-sm	5	+ .side.col-md-4.hidden-sm.hidden-xs
6	= render 'sidebar'	6	= render 'sidebar'
7		7
8	- else	8	- else
	@@ -14,14 +14,14 @@		@@ -14,14 +14,14 @@
14		14
15	.navbar-collapse.collapse	15	.navbar-collapse.collapse
16	%ul.nav.navbar-nav	16	%ul.nav.navbar-nav
17	- %li	17	+ %li.hidden-sm.hidden-xs
18	%a	18	%a
19	%div.hide.turbolink-spinner	19	%div.hide.turbolink-spinner
20	%i.icon-refresh.icon-spin	20	%i.icon-refresh.icon-spin
21	Loading...	21	Loading...
22	- %li.hidden-sm	22	+ %li.hidden-sm.hidden-xs
23	= render "layouts/search"	23	= render "layouts/search"
24	- %li.visible-sm	24	+ %li.visible-sm.visible-xs
25	= link_to search_path, title: "Search", class: 'has_bottom_tooltip', 'data-original-title' => 'Search area' do	25	= link_to search_path, title: "Search", class: 'has_bottom_tooltip', 'data-original-title' => 'Search area' do
26	%i.icon-search	26	%i.icon-search
27	%li	27	%li
	@@ -4,7 +4,7 @@		@@ -4,7 +4,7 @@
4	%body{class: "#{app_theme} admin", :'data-page' => body_data_page}	4	%body{class: "#{app_theme} admin", :'data-page' => body_data_page}
5	= render "layouts/head_panel", title: "Admin area"	5	= render "layouts/head_panel", title: "Admin area"
6	= render "layouts/flash"	6	= render "layouts/flash"
7	- %nav.main-nav	7	+ %nav.main-nav.navbar-collapse.collapse
8	.container= render 'layouts/nav/admin'	8	.container= render 'layouts/nav/admin'
9		9
10	.container	10	.container
	@@ -5,7 +5,7 @@		@@ -5,7 +5,7 @@
5	= render "layouts/broadcast"	5	= render "layouts/broadcast"
6	= render "layouts/head_panel", title: "Dashboard"	6	= render "layouts/head_panel", title: "Dashboard"
7	= render "layouts/flash"	7	= render "layouts/flash"
8	- %nav.main-nav	8	+ %nav.main-nav.navbar-collapse.collapse
9	.container= render 'layouts/nav/dashboard'	9	.container= render 'layouts/nav/dashboard'
10		10
11	.container	11	.container
	@@ -9,7 +9,7 @@		@@ -9,7 +9,7 @@
9	- if can?(current_user, :download_code, @project)	9	- if can?(current_user, :download_code, @project)
10	= render 'shared/no_ssh'	10	= render 'shared/no_ssh'
11		11
12	- %nav.main-nav	12	+ %nav.main-nav.navbar-collapse.collapse
13	.container= render 'layouts/nav/project'	13	.container= render 'layouts/nav/project'
14		14
15	.container	15	.container