From a1fbdbb6b106bcf6a959eb8f9a2a89dec6a15c9c Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Thu, 9 Jun 2016 12:37:47 -0500
Subject: [PATCH] Move tanuki icon to center of nav bar; keep nav closed by
default; remove collapsed nav cookie
---
app/assets/javascripts/application.js.coffee | 7 +----
app/assets/javascripts/sidebar.js.coffee | 9 -------
app/assets/stylesheets/framework/header.scss | 18 +++++++++++++
app/assets/stylesheets/framework/nav.scss | 1 +
app/assets/stylesheets/framework/sidebar.scss | 27 ++++++++++---------
app/views/layouts/_collapse_button.html.haml | 5 +---
app/views/layouts/_page.html.haml | 7 +++--
app/views/layouts/header/_default.html.haml | 6 ++++-
8 files changed, 44 insertions(+), 36 deletions(-)
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index e0ca546350b..35b7d4a044a 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -241,7 +241,6 @@ $ ->
$this.attr 'value', $this.val()
$sidebarGutterToggle = $('.js-sidebar-toggle')
- $navIconToggle = $('.toggle-nav-collapse')
$(document)
.off 'breakpoint:change'
@@ -251,10 +250,6 @@ $ ->
if $gutterIcon.hasClass('fa-angle-double-right')
$sidebarGutterToggle.trigger('click')
- $navIcon = $navIconToggle.find('.fa')
- if $navIcon.hasClass('fa-angle-left')
- $navIconToggle.trigger('click')
-
fitSidebarForSize = ->
oldBootstrapBreakpoint = bootstrapBreakpoint
bootstrapBreakpoint = bp.getBreakpointSize()
@@ -263,7 +258,7 @@ $ ->
checkInitialSidebarSize = ->
bootstrapBreakpoint = bp.getBreakpointSize()
- if bootstrapBreakpoint is "xs" or "sm"
+ if bootstrapBreakpoint is "xs"
$(document).trigger('breakpoint:change', [bootstrapBreakpoint])
$(window)
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
index ea4ac52da31..2ce63c16428 100644
--- a/app/assets/javascripts/sidebar.js.coffee
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -4,8 +4,6 @@ expanded = 'page-sidebar-expanded'
toggleSidebar = ->
$('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
$('header').toggleClass("header-collapsed header-expanded")
- $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
- $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
setTimeout ( ->
niceScrollBars = $('.nicescroll').niceScroll();
@@ -17,10 +15,3 @@ $(document).on("click", '.toggle-nav-collapse, .side-nav-toggle', (e) ->
toggleSidebar()
)
-
-$ ->
- size = bp.getBreakpointSize()
-
- if size is "xs" or size is "sm"
- if $('.page-with-sidebar').hasClass(expanded)
- toggleSidebar()
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index b8d4233537b..f883ad1b8db 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -122,9 +122,18 @@ header {
margin-top: -5px;
}
+ .header-logo {
+ position: absolute;
+ left: 50%;
+ margin-left: -18px;
+ top: 7px;
+ }
+
.title {
margin: 0;
font-size: 19px;
+ max-width: 250px;
+ display: inline-block;
line-height: $header-height;
font-weight: normal;
color: $gl-text-color;
@@ -190,6 +199,15 @@ header {
}
}
+.tanuki-shape {
+ transition: all 0.8s;
+
+ &:hover, &.highlight {
+ fill: rgb(255, 255, 255);
+ transition: all 0.1s;
+ }
+}
+
@media (max-width: $screen-xs-max) {
header .container-fluid {
font-size: 18px;
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index a036799e15a..8982eaa6833 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -1,6 +1,7 @@
@mixin fade($gradient-direction, $rgba, $gradient-color) {
visibility: visible;
opacity: 1;
+ z-index: 2;
position: absolute;
bottom: 12px;
width: 43px;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 06a688690f8..05c87cf0d49 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -66,19 +66,8 @@
}
}
-
-.tanuki-shape {
- transition: all 0.8s;
-
- &:hover, &.highlight {
- fill: rgb(255, 255, 255);
- transition: all 0.1s;
- }
-}
-
-
.nav-sidebar {
- margin-top: 22 + $header-height;
+ margin-top: 22px;
margin-bottom: 116px;
transition-duration: .3s;
list-style: none;
@@ -217,6 +206,20 @@
}
}
+.gitlab-text-container {
+ height: 50px;
+ padding: 5px;
+ text-align: center;
+
+ h3 {
+ color: white;
+ margin: 0;
+ font-size: 19px;
+ line-height: 41px;
+ font-weight: normal;
+ }
+}
+
.page-sidebar-expanded {
padding-left: $sidebar_width;
diff --git a/app/views/layouts/_collapse_button.html.haml b/app/views/layouts/_collapse_button.html.haml
index 2ed51d87ca1..61c0e71f031 100644
--- a/app/views/layouts/_collapse_button.html.haml
+++ b/app/views/layouts/_collapse_button.html.haml
@@ -1,4 +1 @@
-- if nav_menu_collapsed?
- = link_to icon('angle-right'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
-- else
- = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
+= link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 261038ef940..def874008f4 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,9 +1,8 @@
-.page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
+.page-with-sidebar.page-sidebar-collapsed{ class: "#{page_gutter_class}" }
.sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
= link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
- .header-logo
- #logo
- = brand_header_logo
+ .gitlab-text-container
+ %h3 GitLab
- if defined?(sidebar) && sidebar
= render "layouts/nav/#{sidebar}"
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index c33740e23fa..184dac32e5a 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,4 +1,4 @@
-%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
+%header.navbar.navbar-fixed-top.navbar-gitlab.header-collapsed
%div{ class: fluid_layout ? "container-fluid" : "container-fluid" }
.header-content
%button.side-nav-toggle{type: 'button'}
@@ -50,6 +50,10 @@
%h1.title= title
+ .header-logo
+ #logo
+ = brand_header_logo
+
= yield :header_content
= render 'shared/outdated_browser'
--
GitLab