From d4dde374aa959873b87018f71abd62b541d08bd0 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Mon, 1 Jun 2015 15:45:36 +0200 Subject: Refactor header css/html Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/base/variables.scss | 1 + app/assets/stylesheets/generic/header.scss | 206 ++++++++++++------------ app/assets/stylesheets/generic/sidebar.scss | 6 +- app/assets/stylesheets/themes/gitlab-theme.scss | 3 +- app/views/layouts/_empty_head_panel.html.haml | 2 +- app/views/layouts/_head_panel.html.haml | 63 ++++---- app/views/layouts/_public_head_panel.html.haml | 25 +-- 7 files changed, 153 insertions(+), 153 deletions(-) diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss index 596376c3970..c44fa06fc53 100644 --- a/app/assets/stylesheets/base/variables.scss +++ b/app/assets/stylesheets/base/variables.scss @@ -5,6 +5,7 @@ $gl-link-color: #446e9b; $nprogress-color: #c0392b; $gl-font-size: 14px; $list-font-size: 15px; +$sidebar_collapsed_width: 52px; $sidebar_width: 230px; $avatar_radius: 50%; $code_font_size: 13px; diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 3b0ee264bc3..5da4d14b3ba 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -2,7 +2,13 @@ * Application Header * */ +$header-height: 46px; + header { + &.empty-header .container { + border-bottom: 1px solid #EEE; + } + &.navbar-gitlab { z-index: 100; margin-bottom: 0; @@ -13,54 +19,9 @@ header { .container { width: 100% !important; padding: 0; - padding-right: 35px; background: #FFF; - border-bottom: 1px solid #EEE; filter: none; - .title { - position: relative; - float: left; - margin: 0; - margin-left: 25px; - font-size: 18px; - line-height: 44px; - font-weight: bold; - color: #444; - - @include str-truncated(37%); - - a { - color: #444; - &:hover { - text-decoration: underline; - } - } - } - - .app_logo { - border-bottom: 1px solid transparent; - margin-bottom: -1px; - - a { - padding: 5px 8px; - - img { - float: left; - } - - h3 { - width: 158px; - float: left; - margin: 0; - margin-left: 20px; - font-size: 18px; - line-height: 34px; - font-weight: normal; - } - } - } - .nav > li > a { color: #888; font-size: 14px; @@ -80,7 +41,6 @@ header { } } - /** NAV block with links and profile **/ .nav { float: right; margin-right: 0; @@ -96,73 +56,68 @@ header { } } } - - .turbolink-spinner { - font-size: 20px; - margin-right: 10px; - } - - @media (max-width: $screen-xs-max) { - border-width: 0; - font-size: 18px; - - .title { - @include str-truncated(70%); - } - - .navbar-collapse { - margin-top: 47px; - } - - .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; - } - } - } } - /** - * - * Logo holder - * - */ - .app_logo { + .header-logo { + border-bottom: 1px solid transparent; float: left; - margin-right: 9px; + height: $header-height; + width: $sidebar_width; a { float: left; - height: 46px; + height: $header-height; width: 100%; + padding: 5px 8px; + + h3 { + width: 158px; + float: left; + margin: 0; + margin-left: 20px; + font-size: 18px; + line-height: 34px; + font-weight: normal; + } img { width: 36px; height: 36px; + float: left; } } + &:hover { background-color: #EEE; } } - /** - * - * Search box - * - */ + .header-content { + border-bottom: 1px solid #EEE; + padding-right: 35px; + height: $header-height; + + .title { + position: relative; + float: left; + margin: 0; + margin-left: 35px; + font-size: 18px; + line-height: 44px; + font-weight: bold; + color: #444; + + @include str-truncated(37%); + + a { + color: #444; + &:hover { + text-decoration: underline; + } + } + } + } + .search { margin-right: 10px; margin-left: 10px; @@ -198,6 +153,22 @@ header { width: 300px; } +@mixin collapsed-header { + .header-logo { + width: $sidebar_collapsed_width; + + h3 { + display: none; + } + } + + .header-content { + .title { + margin-left: 30px; + } + } +} + @media (max-width: 1200px) { .search .search-input { width: 200px; @@ -212,23 +183,48 @@ header { @media (max-width: $screen-md-max) { .header-collapsed, .header-expanded { - width: 52px; - - h3 { - display: none; - } + @include collapsed-header; } } @media(min-width: $screen-md-max) { .header-collapsed { - width: 52px; - - h3 { - display: none; - } + @include collapsed-header; } .header-expanded { } } + +@media (max-width: $screen-xs-max) { + header .container { + border-width: 0; + font-size: 18px; + + .title { + @include str-truncated(70%); + } + + .navbar-collapse { + margin-top: 47px; + } + + .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; + } + } + } +} diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index a80b5850803..5d4dee5691a 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -102,13 +102,13 @@ padding-left: 50px; .sidebar-wrapper { - width: 52px; + width: $sidebar_collapsed_width; .nav-sidebar { margin-top: 29px; position: fixed; top: 45px; - width: 52px; + width: $sidebar_collapsed_width; li a { padding-left: 18px; @@ -125,7 +125,7 @@ .collapse-nav a { left: 0px; - width: 52px; + width: $sidebar_collapsed_width; } .sidebar-user { diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss index 9b8e3d8e291..a52c847da69 100644 --- a/app/assets/stylesheets/themes/gitlab-theme.scss +++ b/app/assets/stylesheets/themes/gitlab-theme.scss @@ -1,8 +1,9 @@ @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { header { &.navbar-gitlab { - .app_logo { + .header-logo { background-color: $color-darker; + border-color: $color-darker; a { color: $color-light; diff --git a/app/views/layouts/_empty_head_panel.html.haml b/app/views/layouts/_empty_head_panel.html.haml index 358caa3868b..4939634dec9 100644 --- a/app/views/layouts/_empty_head_panel.html.haml +++ b/app/views/layouts/_empty_head_panel.html.haml @@ -1,4 +1,4 @@ -%header.navbar.navbar-fixed-top.navbar-gitlab +%header.navbar.navbar-fixed-top.navbar-gitlab.empty-header .container %h4.center = image_tag 'logo-white.png', width: 32, height: 32 diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml index ddf1ffc7616..43076ee8869 100644 --- a/app/views/layouts/_head_panel.html.haml +++ b/app/views/layouts/_head_panel.html.haml @@ -1,42 +1,43 @@ %header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } .container - %div.app_logo + .header-logo = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do = brand_header_logo %h3 GitLab - %h1.title - = title + .header-content + %h1.title + = title - %button.navbar-toggle{type: 'button', data: {target: '.navbar-collapse', toggle: 'collapse'}} - %span.sr-only Toggle navigation - = icon('bars') + %button.navbar-toggle{type: 'button', data: {target: '.navbar-collapse', toggle: 'collapse'}} + %span.sr-only Toggle navigation + = icon('bars') - .navbar-collapse.collapse - %ul.nav.navbar-nav - %li.hidden-sm.hidden-xs - = render 'layouts/search' - %li.visible-sm.visible-xs - = link_to search_path, title: 'Search', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('search') - %li - = link_to help_path, title: 'Help', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('question-circle fw') - %li - = link_to explore_root_path, title: 'Explore', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('globe fw') - %li - = link_to user_snippets_path(current_user), title: 'Your snippets', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('clipboard fw') - - if current_user.is_admin? + .navbar-collapse.collapse + %ul.nav.navbar-nav + %li.hidden-sm.hidden-xs + = render 'layouts/search' + %li.visible-sm.visible-xs + = link_to search_path, title: 'Search', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('search') %li - = link_to admin_root_path, title: 'Admin area', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('wrench fw') - - if current_user.can_create_project? + = link_to help_path, title: 'Help', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('question-circle fw') %li - = link_to new_project_path, title: 'New project', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('plus fw') - %li - = link_to profile_path, title: 'Profile settings', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('cog fw') + = link_to explore_root_path, title: 'Explore', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('globe fw') + %li + = link_to user_snippets_path(current_user), title: 'Your snippets', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('clipboard fw') + - if current_user.is_admin? + %li + = link_to admin_root_path, title: 'Admin area', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('wrench fw') + - if current_user.can_create_project? + %li + = link_to new_project_path, title: 'New project', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('plus fw') + %li + = link_to profile_path, title: 'Profile settings', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('cog fw') = render 'shared/outdated_browser' diff --git a/app/views/layouts/_public_head_panel.html.haml b/app/views/layouts/_public_head_panel.html.haml index 8a297566d6c..5cccf9a6ad2 100644 --- a/app/views/layouts/_public_head_panel.html.haml +++ b/app/views/layouts/_public_head_panel.html.haml @@ -1,22 +1,23 @@ %header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } .container - %div.app_logo + .header-logo = link_to explore_root_path, class: "home" do = brand_header_logo %h3 GitLab - %h1.title= title + .header-content + %h1.title= title - %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"} - %span.sr-only Toggle navigation - %i.fa.fa-bars + %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"} + %span.sr-only Toggle navigation + %i.fa.fa-bars - - unless current_controller?('sessions') - .pull-right.hidden-xs - = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in btn-new append-right-10' + - unless current_controller?('sessions') + .pull-right.hidden-xs + = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in btn-new append-right-10' - .navbar-collapse.collapse - %ul.nav.navbar-nav - %li.visible-xs - = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes') + .navbar-collapse.collapse + %ul.nav.navbar-nav + %li.visible-xs + = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes') = render 'shared/outdated_browser' -- cgit v1.2.1 From 46e3d13eac8f679044e4fcf16262346ccb8064df Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Mon, 1 Jun 2015 16:36:26 +0200 Subject: More fixes to header css Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/generic/header.scss | 6 ++++-- app/assets/stylesheets/generic/mobile.scss | 2 +- app/assets/stylesheets/generic/sidebar.scss | 2 -- app/assets/stylesheets/themes/gitlab-theme.scss | 2 -- app/views/layouts/_empty_head_panel.html.haml | 2 +- app/views/layouts/errors.html.haml | 2 +- 6 files changed, 7 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 5da4d14b3ba..3a227d11ee0 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -5,7 +5,8 @@ $header-height: 46px; header { - &.empty-header .container { + &.navbar-empty { + background: #FFF; border-bottom: 1px solid #EEE; } @@ -17,9 +18,9 @@ header { width: 100%; .container { + background: #FFF; width: 100% !important; padding: 0; - background: #FFF; filter: none; .nav > li > a { @@ -96,6 +97,7 @@ header { border-bottom: 1px solid #EEE; padding-right: 35px; height: $header-height; + overflow: hidden; .title { position: relative; diff --git a/app/assets/stylesheets/generic/mobile.scss b/app/assets/stylesheets/generic/mobile.scss index b7f6fac5223..74108c1f086 100644 --- a/app/assets/stylesheets/generic/mobile.scss +++ b/app/assets/stylesheets/generic/mobile.scss @@ -57,7 +57,7 @@ } .container .title { - margin-left: 6px !important; + margin-left: 15px !important; max-width: 70% !important; } } diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index 5d4dee5691a..69bddc6f59e 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -1,6 +1,4 @@ .page-with-sidebar { - background: $background-color; - .sidebar-wrapper { position: fixed; top: 0; diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss index a52c847da69..1b06b4aa925 100644 --- a/app/assets/stylesheets/themes/gitlab-theme.scss +++ b/app/assets/stylesheets/themes/gitlab-theme.scss @@ -20,8 +20,6 @@ } .page-with-sidebar { - background: $color-darker; - .collapse-nav a { color: #FFF; background: $color; diff --git a/app/views/layouts/_empty_head_panel.html.haml b/app/views/layouts/_empty_head_panel.html.haml index 4939634dec9..16fbf6d4020 100644 --- a/app/views/layouts/_empty_head_panel.html.haml +++ b/app/views/layouts/_empty_head_panel.html.haml @@ -1,4 +1,4 @@ -%header.navbar.navbar-fixed-top.navbar-gitlab.empty-header +%header.navbar.navbar-fixed-top.navbar-empty .container %h4.center = image_tag 'logo-white.png', width: 32, height: 32 diff --git a/app/views/layouts/errors.html.haml b/app/views/layouts/errors.html.haml index aa0f3f0a819..25cce11990a 100644 --- a/app/views/layouts/errors.html.haml +++ b/app/views/layouts/errors.html.haml @@ -2,7 +2,7 @@ %html{ lang: "en"} = render "layouts/head" %body{class: "#{app_theme} application"} - = render "layouts/head_panel", title: "" if current_user + = render "layouts/empty_head_panel" .container.navless-container = render "layouts/flash" .error-page -- cgit v1.2.1 From e7e07fab5d64db8b2881d7fa3477553807b0d3e1 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Mon, 1 Jun 2015 17:09:30 +0200 Subject: Refactor header views Signed-off-by: Dmitriy Zaporozhets --- app/views/layouts/_empty_head_panel.html.haml | 4 --- app/views/layouts/_head_panel.html.haml | 43 -------------------------- app/views/layouts/_public_head_panel.html.haml | 23 -------------- app/views/layouts/application.html.haml | 4 +-- app/views/layouts/devise.html.haml | 2 +- app/views/layouts/errors.html.haml | 2 +- app/views/layouts/header/_default.html.haml | 43 ++++++++++++++++++++++++++ app/views/layouts/header/_empty.html.haml | 4 +++ app/views/layouts/header/_public.html.haml | 14 +++++++++ 9 files changed, 65 insertions(+), 74 deletions(-) delete mode 100644 app/views/layouts/_empty_head_panel.html.haml delete mode 100644 app/views/layouts/_head_panel.html.haml delete mode 100644 app/views/layouts/_public_head_panel.html.haml create mode 100644 app/views/layouts/header/_default.html.haml create mode 100644 app/views/layouts/header/_empty.html.haml create mode 100644 app/views/layouts/header/_public.html.haml diff --git a/app/views/layouts/_empty_head_panel.html.haml b/app/views/layouts/_empty_head_panel.html.haml deleted file mode 100644 index 16fbf6d4020..00000000000 --- a/app/views/layouts/_empty_head_panel.html.haml +++ /dev/null @@ -1,4 +0,0 @@ -%header.navbar.navbar-fixed-top.navbar-empty - .container - %h4.center - = image_tag 'logo-white.png', width: 32, height: 32 diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml deleted file mode 100644 index 43076ee8869..00000000000 --- a/app/views/layouts/_head_panel.html.haml +++ /dev/null @@ -1,43 +0,0 @@ -%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } - .container - .header-logo - = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do - = brand_header_logo - %h3 GitLab - .header-content - %h1.title - = title - - %button.navbar-toggle{type: 'button', data: {target: '.navbar-collapse', toggle: 'collapse'}} - %span.sr-only Toggle navigation - = icon('bars') - - .navbar-collapse.collapse - %ul.nav.navbar-nav - %li.hidden-sm.hidden-xs - = render 'layouts/search' - %li.visible-sm.visible-xs - = link_to search_path, title: 'Search', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('search') - %li - = link_to help_path, title: 'Help', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('question-circle fw') - %li - = link_to explore_root_path, title: 'Explore', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('globe fw') - %li - = link_to user_snippets_path(current_user), title: 'Your snippets', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('clipboard fw') - - if current_user.is_admin? - %li - = link_to admin_root_path, title: 'Admin area', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('wrench fw') - - if current_user.can_create_project? - %li - = link_to new_project_path, title: 'New project', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('plus fw') - %li - = link_to profile_path, title: 'Profile settings', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('cog fw') - -= render 'shared/outdated_browser' diff --git a/app/views/layouts/_public_head_panel.html.haml b/app/views/layouts/_public_head_panel.html.haml deleted file mode 100644 index 5cccf9a6ad2..00000000000 --- a/app/views/layouts/_public_head_panel.html.haml +++ /dev/null @@ -1,23 +0,0 @@ -%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } - .container - .header-logo - = link_to explore_root_path, class: "home" do - = brand_header_logo - %h3 GitLab - .header-content - %h1.title= title - - %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"} - %span.sr-only Toggle navigation - %i.fa.fa-bars - - - unless current_controller?('sessions') - .pull-right.hidden-xs - = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in btn-new append-right-10' - - .navbar-collapse.collapse - %ul.nav.navbar-nav - %li.visible-xs - = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes') - -= render 'shared/outdated_browser' diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index a97feeb1ecd..155825cc4c2 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -3,8 +3,8 @@ = render "layouts/head" %body{class: "#{app_theme}", :'data-page' => body_data_page} - if current_user - = render "layouts/head_panel", title: header_title + = render "layouts/header/default", title: header_title - else - = render "layouts/public_head_panel", title: header_title + = render "layouts/header/public", title: header_title = render 'layouts/page', sidebar: sidebar diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml index 5a59c9fd59a..d406f5764a7 100644 --- a/app/views/layouts/devise.html.haml +++ b/app/views/layouts/devise.html.haml @@ -2,7 +2,7 @@ %html{ lang: "en"} = render "layouts/head" %body.ui_mars.login-page.application - = render "layouts/empty_head_panel" + = render "layouts/header/empty" = render "layouts/broadcast" .container.navless-container .content diff --git a/app/views/layouts/errors.html.haml b/app/views/layouts/errors.html.haml index 25cce11990a..2e3a2b16eb7 100644 --- a/app/views/layouts/errors.html.haml +++ b/app/views/layouts/errors.html.haml @@ -2,7 +2,7 @@ %html{ lang: "en"} = render "layouts/head" %body{class: "#{app_theme} application"} - = render "layouts/empty_head_panel" + = render "layouts/header/empty" .container.navless-container = render "layouts/flash" .error-page diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml new file mode 100644 index 00000000000..43076ee8869 --- /dev/null +++ b/app/views/layouts/header/_default.html.haml @@ -0,0 +1,43 @@ +%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } + .container + .header-logo + = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do + = brand_header_logo + %h3 GitLab + .header-content + %h1.title + = title + + %button.navbar-toggle{type: 'button', data: {target: '.navbar-collapse', toggle: 'collapse'}} + %span.sr-only Toggle navigation + = icon('bars') + + .navbar-collapse.collapse + %ul.nav.navbar-nav + %li.hidden-sm.hidden-xs + = render 'layouts/search' + %li.visible-sm.visible-xs + = link_to search_path, title: 'Search', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('search') + %li + = link_to help_path, title: 'Help', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('question-circle fw') + %li + = link_to explore_root_path, title: 'Explore', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('globe fw') + %li + = link_to user_snippets_path(current_user), title: 'Your snippets', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('clipboard fw') + - if current_user.is_admin? + %li + = link_to admin_root_path, title: 'Admin area', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('wrench fw') + - if current_user.can_create_project? + %li + = link_to new_project_path, title: 'New project', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('plus fw') + %li + = link_to profile_path, title: 'Profile settings', data: {toggle: 'tooltip', placement: 'bottom'} do + = icon('cog fw') + += render 'shared/outdated_browser' diff --git a/app/views/layouts/header/_empty.html.haml b/app/views/layouts/header/_empty.html.haml new file mode 100644 index 00000000000..16fbf6d4020 --- /dev/null +++ b/app/views/layouts/header/_empty.html.haml @@ -0,0 +1,4 @@ +%header.navbar.navbar-fixed-top.navbar-empty + .container + %h4.center + = image_tag 'logo-white.png', width: 32, height: 32 diff --git a/app/views/layouts/header/_public.html.haml b/app/views/layouts/header/_public.html.haml new file mode 100644 index 00000000000..6a031722aaa --- /dev/null +++ b/app/views/layouts/header/_public.html.haml @@ -0,0 +1,14 @@ +%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } + .container + .header-logo + = link_to explore_root_path, class: "home" do + = brand_header_logo + %h3 GitLab + .header-content + %h1.title= title + + - unless current_controller?('sessions') + .pull-right + = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in btn-success btn-sm' + += render 'shared/outdated_browser' -- cgit v1.2.1 From a74dfa6e74947a97f10b6c13bf77a135df29ad56 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Mon, 1 Jun 2015 17:10:04 +0200 Subject: Fix header overflow for big title Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/generic/common.scss | 2 +- app/assets/stylesheets/generic/header.scss | 27 +++++---------------------- 2 files changed, 6 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss index b69c5c4b574..1419a9cded9 100644 --- a/app/assets/stylesheets/generic/common.scss +++ b/app/assets/stylesheets/generic/common.scss @@ -307,7 +307,7 @@ table { } .btn-sign-in { - margin-top: 5px; + margin-top: 7px; text-shadow: none; } diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 3a227d11ee0..5e6102e14ab 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -97,7 +97,6 @@ header { border-bottom: 1px solid #EEE; padding-right: 35px; height: $header-height; - overflow: hidden; .title { position: relative; @@ -131,6 +130,7 @@ header { } .search-input { + width: 220px; background-image: image-url("icon-search.png"); background-repeat: no-repeat; background-position: 10px; @@ -151,10 +151,6 @@ header { } } -.search .search-input { - width: 300px; -} - @mixin collapsed-header { .header-logo { width: $sidebar_collapsed_width; @@ -171,19 +167,11 @@ header { } } -@media (max-width: 1200px) { - .search .search-input { - width: 200px; - } -} - -@media (max-width: $screen-xs-max) { - #nprogress .spinner { - right: 35px !important; +@media (max-width: $screen-md-max) { + header .container .title { + max-width: 43%; } -} -@media (max-width: $screen-md-max) { .header-collapsed, .header-expanded { @include collapsed-header; } @@ -200,15 +188,10 @@ header { @media (max-width: $screen-xs-max) { header .container { - border-width: 0; font-size: 18px; .title { - @include str-truncated(70%); - } - - .navbar-collapse { - margin-top: 47px; + max-width: 70%; } .navbar-nav { -- cgit v1.2.1 From 01f6ae235173ff46ff23498ec91accbeb1845863 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Mon, 1 Jun 2015 17:55:20 +0200 Subject: improve navbar collapse for mobile views Signed-off-by: Dmitriy Zaporozhets --- app/assets/javascripts/application.js.coffee | 4 ++++ app/assets/stylesheets/generic/header.scss | 15 ++++----------- app/views/layouts/header/_default.html.haml | 4 ++-- 3 files changed, 10 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index ea2a4b97101..9fc313db9d0 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -177,6 +177,10 @@ $ -> $(@).next('table').show() $(@).remove() + $('.navbar-toggle').on 'click', -> + $('.header-content .title').toggle() + $('.header-content .navbar-collapse').toggle() + # Show/hide comments on diff $("body").on "click", ".js-toggle-diff-comments", (e) -> $(@).toggleClass('active') diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 5e6102e14ab..71afccba001 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -42,15 +42,12 @@ header { } } - .nav { - float: right; - margin-right: 0; - } - .navbar-toggle { color: #666; margin: 0; border-radius: 0; + position: absolute; + right: 2px; &:hover { background-color: #EEE; @@ -195,7 +192,8 @@ header { } .navbar-nav { - margin: 5px 0; + margin: 0px; + float: none !important; .visible-xs, .visable-sm { display: table-cell !important; @@ -205,11 +203,6 @@ header { li { display: table-cell; width: 1%; - - a { - text-align: center; - font-size: 18px !important; - } } } } diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index 43076ee8869..2970af377f5 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -8,12 +8,12 @@ %h1.title = title - %button.navbar-toggle{type: 'button', data: {target: '.navbar-collapse', toggle: 'collapse'}} + %button.navbar-toggle %span.sr-only Toggle navigation = icon('bars') .navbar-collapse.collapse - %ul.nav.navbar-nav + %ul.nav.navbar-nav.pull-right %li.hidden-sm.hidden-xs = render 'layouts/search' %li.visible-sm.visible-xs -- cgit v1.2.1