From a2f15d4faa2410c472ae46306e1efc9d92491546 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/generic/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 f9a4d17fa16..9a24267adfa 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -37,13 +37,14 @@ 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 Cmd+Enter on Mac and Ctrl+Enter on Windows/Linux. - Fix position of hamburger in header for smaller screens (Han Loong Liauw) - Fix bug where Emojis in Markdown would truncate remaining text (Sakata Sinji) + - 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/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index c5ea3aca7ca..cd5234a1e0e 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/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