From dd0552c36d0e043ae202c2fbb2927ffe99a6de79 Mon Sep 17 00:00:00 2001 From: Job van der Voort Date: Fri, 9 Oct 2015 13:45:37 +0800 Subject: Animate the logo on hover The logo is now rendered as pure SVG, rather than image referencing a svg. The SVG has an id and the shapes of the logo have a shared class. The shapes change their fill color on hover with a transition. --- CHANGELOG | 3 ++- app/assets/images/logo.svg | 16 ++++++++-------- app/assets/stylesheets/framework/sidebar.scss | 14 +++++++++++--- app/helpers/appearances_helper.rb | 2 +- app/views/shared/_logo.svg | 21 +++++++++++++++++++++ 5 files changed, 43 insertions(+), 13 deletions(-) create mode 100644 app/views/shared/_logo.svg diff --git a/CHANGELOG b/CHANGELOG index e956d074d72..f407fcbe18a 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -62,7 +62,7 @@ v 8.1.0 (unreleased) - Move CI web hooks page to project settings area - Fix User Identities API. It now allows you to properly create or update user's identities. - Add user preference to change layout width (Peter Göbel) - - Use commit status in merge request widget as preffered source of CI status + - Use commit status in merge request widget as preferred source of CI status - Integrate CI commit and build pages into project pages - Move CI services page to project settings area - Add "Quick Submit" behavior to input fields throughout the application. Use @@ -85,6 +85,7 @@ v 8.1.0 (unreleased) v 8.0.5 - Correct lookup-by-email for LDAP logins - Fix loading spinner sometimes not being hidden on Merge Request tab switches + - Animate the logo on hover v 8.0.4 - Fix Message-ID header to be RFC 2111-compliant to prevent e-mails being dropped (Stan Hu) diff --git a/app/assets/images/logo.svg b/app/assets/images/logo.svg index c09785cb96f..f4e19b67008 100644 --- a/app/assets/images/logo.svg +++ b/app/assets/images/logo.svg @@ -10,17 +10,17 @@ - - - - - - - + + + + + + + - \ No newline at end of file + diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index c5ea3aca7ca..cd5234a1e0e 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -239,9 +239,7 @@ padding: 10px 22px; overflow: hidden; - img { - width: 36px; - height: 36px; + #tanuki-logo { float: left; } @@ -265,3 +263,13 @@ } } } + + +.tanuki-shape { + transition: all 0.8s; + + &:hover { + fill: rgb(255, 255, 255); + transition: all 0.1s; + } +} diff --git a/app/helpers/appearances_helper.rb b/app/helpers/appearances_helper.rb index 14df8d4cbd7..c5820bf4c50 100644 --- a/app/helpers/appearances_helper.rb +++ b/app/helpers/appearances_helper.rb @@ -16,6 +16,6 @@ module AppearancesHelper end def brand_header_logo - image_tag 'logo.svg' + render 'shared/logo.svg' end end diff --git a/app/views/shared/_logo.svg b/app/views/shared/_logo.svg new file mode 100644 index 00000000000..da49c48acd3 --- /dev/null +++ b/app/views/shared/_logo.svg @@ -0,0 +1,21 @@ + -- cgit v1.2.1