Commit 8b3b6f1096497ad63bbd4cd9bf78fa913ae345b5
1 parent
8f8db776
Exists in
spb-stable
and in
3 other branches
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
Showing
19 changed files
with
124 additions
and
17 deletions
Show diff stats
app/assets/stylesheets/generic/common.scss
| ... | ... | @@ -327,6 +327,12 @@ li.note { |
| 327 | 327 | color: #fff; |
| 328 | 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 | 338 | .warning_message { |
| ... | ... | @@ -485,3 +491,7 @@ table { |
| 485 | 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
app/assets/stylesheets/sections/header.scss
| ... | ... | @@ -29,6 +29,59 @@ header { |
| 29 | 29 | float: right; |
| 30 | 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 | 181 | background: #708090; |
| 129 | 182 | border-bottom: 1px solid #AAA; |
| 130 | 183 | |
| 184 | + .navbar-toggle { color: #fff; } | |
| 185 | + | |
| 131 | 186 | .nav > li > a { |
| 132 | 187 | color: #AAA; |
| 133 | 188 | text-shadow: 0 1px 0 #444; | ... | ... |
app/assets/stylesheets/sections/nav.scss
| ... | ... | @@ -83,4 +83,38 @@ |
| 83 | 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
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
| ... | ... | @@ -14,14 +14,14 @@ |
| 14 | 14 | |
| 15 | 15 | .navbar-collapse.collapse |
| 16 | 16 | %ul.nav.navbar-nav |
| 17 | - %li | |
| 17 | + %li.hidden-sm.hidden-xs | |
| 18 | 18 | %a |
| 19 | 19 | %div.hide.turbolink-spinner |
| 20 | 20 | %i.icon-refresh.icon-spin |
| 21 | 21 | Loading... |
| 22 | - %li.hidden-sm | |
| 22 | + %li.hidden-sm.hidden-xs | |
| 23 | 23 | = render "layouts/search" |
| 24 | - %li.visible-sm | |
| 24 | + %li.visible-sm.visible-xs | |
| 25 | 25 | = link_to search_path, title: "Search", class: 'has_bottom_tooltip', 'data-original-title' => 'Search area' do |
| 26 | 26 | %i.icon-search |
| 27 | 27 | %li | ... | ... |
app/views/layouts/admin.html.haml
| ... | ... | @@ -4,7 +4,7 @@ |
| 4 | 4 | %body{class: "#{app_theme} admin", :'data-page' => body_data_page} |
| 5 | 5 | = render "layouts/head_panel", title: "Admin area" |
| 6 | 6 | = render "layouts/flash" |
| 7 | - %nav.main-nav | |
| 7 | + %nav.main-nav.navbar-collapse.collapse | |
| 8 | 8 | .container= render 'layouts/nav/admin' |
| 9 | 9 | |
| 10 | 10 | .container | ... | ... |
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
| ... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 | = render "layouts/head", title: @project.name_with_namespace |
| 4 | 4 | %body{class: "#{app_theme} application", :'data-page' => body_data_page} |
| 5 | 5 | = render "layouts/public_head_panel" |
| 6 | - %nav.main-nav | |
| 6 | + %nav.main-nav.navbar-collapse.collapse | |
| 7 | 7 | .container= render 'layouts/nav/project' |
| 8 | 8 | .container |
| 9 | 9 | .content= yield | ... | ... |
app/views/layouts/user_team.html.haml
| ... | ... | @@ -4,7 +4,7 @@ |
| 4 | 4 | %body{class: "#{app_theme} application", :'data-page' => body_data_page} |
| 5 | 5 | = render "layouts/head_panel", title: "team: #{@team.name}" |
| 6 | 6 | = render "layouts/flash" |
| 7 | - %nav.main-nav | |
| 7 | + %nav.main-nav.navbar-collapse.collapse | |
| 8 | 8 | .container= render 'layouts/nav/team' |
| 9 | 9 | |
| 10 | 10 | .container | ... | ... |
app/views/shared/_no_ssh.html.haml
| ... | ... | @@ -2,7 +2,13 @@ |
| 2 | 2 | .no-ssh-key-message |
| 3 | 3 | .container |
| 4 | 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 | 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 | 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' | ... | ... |