diff options
author | Drew Blessing <drew.blessing@buckle.com> | 2014-01-23 06:07:01 +0400 |
---|---|---|
committer | Drew Blessing <drew.blessing@buckle.com> | 2014-01-25 20:07:39 +0400 |
commit | 8b3b6f1096497ad63bbd4cd9bf78fa913ae345b5 (patch) | |
tree | 479e1fbdfce5047221cb397fe8ca0354c54b7ac8 /app | |
parent | 8f8db776858be45845d18122761fdc09d5989368 (diff) |
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
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/stylesheets/generic/common.scss | 10 | ||||
-rw-r--r-- | app/assets/stylesheets/main/layout.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/sections/header.scss | 55 | ||||
-rw-r--r-- | app/assets/stylesheets/sections/nav.scss | 34 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/ui_color.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/ui_gray.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/ui_mars.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/ui_modern.scss | 2 | ||||
-rw-r--r-- | app/views/dashboard/show.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/_head_panel.html.haml | 6 | ||||
-rw-r--r-- | app/views/layouts/admin.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/application.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/group.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/profile.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/project_settings.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/projects.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/public_projects.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/user_team.html.haml | 2 | ||||
-rw-r--r-- | app/views/shared/_no_ssh.html.haml | 8 |
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' |