diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss index 79a2171..507e719 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 a4d889f..9e009a5 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 b0dd0d0..780f281 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 f706854..7dd80dc 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 7d9cab2..0fc72d4 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 41c08c8..959feba 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 aba3e0c..9af5adb 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 015a4bb..b0827de 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 c4018d4..e5b7fbf 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 58b216f..32debb8 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 3a23cbd..439cb97 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 92edc71..511db38 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 b546a9f..fb4a3a3 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 7284963..2d869a6 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 a55f043..5659cfa 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 55214c6..3ae4961 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 1e88141..a8e3236 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 e64e68d..191ad40 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 077e6c6..e70eb4d 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' -- libgit2 0.21.2