From 9cc321ca17d775c417c7bbeb1fb9b0636dd338b4 Mon Sep 17 00:00:00 2001
From: Roman Rott <roman.rott@gmail.com>
Date: Wed, 3 Feb 2016 19:18:55 +0200
Subject: [PATCH] fixed issue with poor logo transition animation on safari

updates after code review: moved coffee code to appropriate file, updated css to not use js-prefixed selectors

Updated comments and Changelog

Removed duplicate line in changelog
---
 CHANGELOG                                     |  1 +
 app/assets/javascripts/logo.js.coffee         |  5 +++++
 app/assets/stylesheets/framework/sidebar.scss | 15 ++++++++++++++-
 app/views/layouts/_page.html.haml             |  3 ++-
 app/views/layouts/ci/_page.html.haml          |  3 ++-
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index b7e8822fdd6..d9adc13bf5f 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -33,6 +33,7 @@ v 8.5.0 (unreleased)
   - Add sort dropdown to dashboard projects page
   - Hide remove source branch button when the MR is merged but new commits are pushed (Zeger-Jan van de Weg)
   - In seach autocomplete show only groups and projects you are member of
+  - Fixed logo animation on Safari.
 
 v 8.4.3
   - Increase lfs_objects size column to 8-byte integer to allow files larger
diff --git a/app/assets/javascripts/logo.js.coffee b/app/assets/javascripts/logo.js.coffee
index a5879c8b793..e7d884662ea 100644
--- a/app/assets/javascripts/logo.js.coffee
+++ b/app/assets/javascripts/logo.js.coffee
@@ -42,3 +42,8 @@ work = ->
 
 $(document).on('page:fetch',  start)
 $(document).on('page:change', stop)
+
+$ ->
+  # Make logo clickable
+  $('#logo').on 'click', ->
+    $('#js-shortcuts-home').get(0).click()
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index b7f532c0771..b141928f706 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -45,6 +45,19 @@
     overflow: hidden;
     transition-duration: .3s;
 
+    .home {
+      z-index: 1;
+      position: absolute;
+      left: 0px;
+    }
+
+    #logo {
+      z-index: 2;
+      position: absolute;
+      width: 58px;
+      cursor: pointer;
+    }
+
     a {
       float: left;
       height: $header-height;
@@ -70,7 +83,7 @@
           width: 158px;
           float: left;
           margin: 0;
-          margin-left: 14px;
+          margin-left: 50px;
           font-size: 19px;
           line-height: 41px;
           font-weight: normal;
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 0c1b5eec95a..e53d5b07801 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -2,8 +2,9 @@
   = render "layouts/broadcast"
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
     .header-logo
-      = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home' do
+      %a#logo
         = brand_header_logo
+      = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home' do
         .gitlab-text-container
           %h3 GitLab
 
diff --git a/app/views/layouts/ci/_page.html.haml b/app/views/layouts/ci/_page.html.haml
index 7e90af21b21..3cfd36720f0 100644
--- a/app/views/layouts/ci/_page.html.haml
+++ b/app/views/layouts/ci/_page.html.haml
@@ -2,8 +2,9 @@
   = render "layouts/broadcast"
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
     .header-logo
-      = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home' do
+      %a#logo
         = brand_header_logo
+      = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home' do
         .gitlab-text-container
           %h3 GitLab