Download as
Browse Code »

Commit 11ea009ec7bf993ab45f24f6079abfc48ac3e5b2

Authored by Dmitriy Zaporozhets
2 parents 7986b806 8b3b6f10
Exists in spb-stable and in 3 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb

Merge pull request #6159 from dblessing/fix/mobile_ui_dashboard 

Mobile UI improvements
Showing 19 changed files with 124 additions and 17 deletions   Show diff stats
app/assets/stylesheets/generic/common.scss
  Diff comments   View file @11ea009
@@ -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 +}
app/assets/stylesheets/main/layout.scss
  Diff comments   View file @11ea009
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 {
app/assets/stylesheets/sections/header.scss
  Diff comments   View file @11ea009
@@ -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;
app/assets/stylesheets/sections/nav.scss
  Diff comments   View file @11ea009
@@ -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 }
app/assets/stylesheets/themes/ui_color.scss
  Diff comments   View file @11ea009
@@ -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 }
app/assets/stylesheets/themes/ui_gray.scss
  Diff comments   View file @11ea009
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 .navbar-inner { 18 .navbar-inner {
19 background: #373737; 19 background: #373737;
20 border-bottom: 1px solid #272727; 20 border-bottom: 1px solid #272727;
21 - .app_logo { 21 + .app_logo, .navbar-toggle {
22 &:hover { 22 &:hover {
23 background-color: #272727; 23 background-color: #272727;
24 } 24 }
app/assets/stylesheets/themes/ui_mars.scss
  Diff comments   View file @11ea009
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 .navbar-inner { 18 .navbar-inner {
19 background: #474D57; 19 background: #474D57;
20 border-bottom: 1px solid #373D47; 20 border-bottom: 1px solid #373D47;
21 - .app_logo { 21 + .app_logo, .navbar-toggle {
22 &:hover { 22 &:hover {
23 background-color: #373D47; 23 background-color: #373D47;
24 } 24 }
app/assets/stylesheets/themes/ui_modern.scss
  Diff comments   View file @11ea009
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 .navbar-inner { 18 .navbar-inner {
19 background: #345; 19 background: #345;
20 border-bottom: 1px solid #234; 20 border-bottom: 1px solid #234;
21 - .app_logo { 21 + .app_logo, .navbar-toggle {
22 &:hover { 22 &:hover {
23 background-color: #234; 23 background-color: #234;
24 } 24 }
app/views/dashboard/show.html.haml
  Diff comments   View file @11ea009
@@ -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
app/views/layouts/_head_panel.html.haml
  Diff comments   View file @11ea009
@@ -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
app/views/layouts/admin.html.haml
  Diff comments   View file @11ea009
@@ -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
app/views/layouts/application.html.haml
  Diff comments   View file @11ea009
@@ -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
app/views/layouts/group.html.haml
  Diff comments   View file @11ea009
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 = render "layouts/broadcast" 5 = render "layouts/broadcast"
6 = render "layouts/head_panel", title: "group: #{@group.name}" 6 = render "layouts/head_panel", title: "group: #{@group.name}"
7 = render "layouts/flash" 7 = render "layouts/flash"
8 - %nav.main-nav 8 + %nav.main-nav.navbar-collapse.collapse
9 .container= render 'layouts/nav/group' 9 .container= render 'layouts/nav/group'
10 10
11 .container 11 .container
app/views/layouts/profile.html.haml
  Diff comments   View file @11ea009
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 = render "layouts/broadcast" 5 = render "layouts/broadcast"
6 = render "layouts/head_panel", title: "Profile" 6 = render "layouts/head_panel", title: "Profile"
7 = render "layouts/flash" 7 = render "layouts/flash"
8 - %nav.main-nav 8 + %nav.main-nav.navbar-collapse.collapse
9 .container= render 'layouts/nav/profile' 9 .container= render 'layouts/nav/profile'
10 10
11 .container 11 .container
app/views/layouts/project_settings.html.haml
  Diff comments   View file @11ea009
@@ -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
app/views/layouts/projects.html.haml
  Diff comments   View file @11ea009
@@ -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
app/views/layouts/public_projects.html.haml
  Diff comments   View file @11ea009
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 = render "layouts/head", title: @project.name_with_namespace 3 = render "layouts/head", title: @project.name_with_namespace
4 %body{class: "#{app_theme} application", :'data-page' => body_data_page} 4 %body{class: "#{app_theme} application", :'data-page' => body_data_page}
5 = render "layouts/public_head_panel" 5 = render "layouts/public_head_panel"
6 - %nav.main-nav 6 + %nav.main-nav.navbar-collapse.collapse
7 .container= render 'layouts/nav/project' 7 .container= render 'layouts/nav/project'
8 .container 8 .container
9 .content= yield 9 .content= yield
app/views/layouts/user_team.html.haml
  Diff comments   View file @11ea009
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 %body{class: "#{app_theme} application", :'data-page' => body_data_page} 4 %body{class: "#{app_theme} application", :'data-page' => body_data_page}
5 = render "layouts/head_panel", title: "team: #{@team.name}" 5 = render "layouts/head_panel", title: "team: #{@team.name}"
6 = render "layouts/flash" 6 = render "layouts/flash"
7 - %nav.main-nav 7 + %nav.main-nav.navbar-collapse.collapse
8 .container= render 'layouts/nav/team' 8 .container= render 'layouts/nav/team'
9 9
10 .container 10 .container
app/views/shared/_no_ssh.html.haml
  Diff comments   View file @11ea009
@@ -2,7 +2,13 @@ @@ -2,7 +2,13 @@
2 .no-ssh-key-message 2 .no-ssh-key-message
3 .container 3 .container
4 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 4 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
5 - %div.pull-right 5 + .pull-right.hidden-xs
6 = link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'hide-no-ssh-message', remote: true 6 = link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'hide-no-ssh-message', remote: true
7 | 7 |
8 = link_to 'Remind later', '#', class: 'hide-no-ssh-message' 8 = link_to 'Remind later', '#', class: 'hide-no-ssh-message'
  9 + .links-xs.visible-xs
  10 + = link_to "Add key", new_profile_key_path
  11 + |
  12 + = link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'hide-no-ssh-message', remote: true
  13 + |
  14 + = link_to 'Later', '#', class: 'hide-no-ssh-message'