From 8b3b6f1096497ad63bbd4cd9bf78fa913ae345b5 Mon Sep 17 00:00:00 2001 From: Drew Blessing Date: Wed, 22 Jan 2014 20:07:01 -0600 Subject: [PATCH] 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 | 10 ++++ app/assets/stylesheets/main/layout.scss | 2 + app/assets/stylesheets/sections/header.scss | 55 ++++++++++++++++++++ app/assets/stylesheets/sections/nav.scss | 34 ++++++++++++ app/assets/stylesheets/themes/ui_color.scss | 2 +- app/assets/stylesheets/themes/ui_gray.scss | 2 +- app/assets/stylesheets/themes/ui_mars.scss | 2 +- app/assets/stylesheets/themes/ui_modern.scss | 2 +- app/views/dashboard/show.html.haml | 2 +- app/views/layouts/_head_panel.html.haml | 6 +-- app/views/layouts/admin.html.haml | 2 +- app/views/layouts/application.html.haml | 2 +- app/views/layouts/group.html.haml | 2 +- app/views/layouts/profile.html.haml | 2 +- app/views/layouts/project_settings.html.haml | 2 +- app/views/layouts/projects.html.haml | 2 +- app/views/layouts/public_projects.html.haml | 2 +- app/views/layouts/user_team.html.haml | 2 +- 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 79a217186d..507e7197d5 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 a4d889f26d..9e009a5e0a 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 b0dd0d0835..780f281dd7 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 f706854b4f..7dd80dc52f 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 7d9cab215c..0fc72d4e0a 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 41c08c840e..959febad6f 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 aba3e0ca82..9af5adbf10 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 015a4bbf0c..b0827deb1a 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 c4018d4b6d..e5b7fbf097 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 58b216f2e9..32debb8c7a 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 3a23cbdb37..439cb978a7 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 92edc71823..511db389e0 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 b546a9fa84..fb4a3a3ba9 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 7284963957..2d869a6cdc 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 a55f043f2c..5659cfab31 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 55214c6a5c..3ae4961b13 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 1e8814134f..a8e3236d86 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 e64e68d244..191ad406c3 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 077e6c6a80..e70eb4d01b 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'