diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/js/userbar.js b/wagtail/wagtailadmin/static_src/wagtailadmin/js/userbar.js index 8c48d1a0b8..09a5f4ebd2 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/js/userbar.js +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/js/userbar.js @@ -1,12 +1,24 @@ 'use strict'; document.addEventListener('DOMContentLoaded', function() { + var trigger = document.querySelectorAll('[data-wagtail-userbar-trigger]')[0]; var userbar = document.querySelectorAll('[data-wagtail-userbar]')[0]; var className = 'is-active'; - userbar.addEventListener("mouseenter", showUserbar, false); + if ('ontouchstart' in window) { + userbar.classList.add("touch"); + } else { + userbar.classList.add("no-touch"); + } + + trigger.addEventListener("mouseenter", showUserbar, false); userbar.addEventListener("mouseleave", hideUserbar, false); + trigger.addEventListener("touchstart", toggleUserbar, false); + + // make sure userbar is hidden when navigating back + window.addEventListener('pageshow', hideUserbar, false); + function showUserbar() { userbar.classList.add(className); } @@ -14,5 +26,8 @@ document.addEventListener('DOMContentLoaded', function() { function hideUserbar() { userbar.classList.remove(className); } -}); + function toggleUserbar() { + userbar.classList.toggle(className); + } +}); diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar.scss index 7ea37925ee..0a2a98bffc 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar.scss @@ -9,39 +9,33 @@ $size-home-button: 3.5em; position: fixed; z-index: 9999; bottom: 2em; - right: 1.5em; - - a { - display: block; - overflow: hidden; - text-decoration: none; - } + right: 2em; } - .wagtail-userbar__home { + .wagtail-userbar__trigger { width: $size-home-button; height: $size-home-button; + overflow: hidden; + background-color: $color-white; border-radius: 50%; color: $color-black; padding: 0; - &:focus, - &:hover { - color: $color-black; - } + cursor: pointer; &.icon:before { - @include transition(color 0.2s ease); + @include transition(color .2s ease); font-size: 35px; - margin: 0.2em 0.15em; + margin: .25em .15em .2em .175em; display: block; } box-shadow: 0 0 1px 0 rgba(107, 214, 230, 1), 0 1px 10px 0 rgba(107, 214, 230, .7); transition: all 0.2s ease-in-out; - &:hover { + .wagtail-userbar.touch.is-active &, + .no-touch &:hover { box-shadow: 0 0 1px 0 rgba(107, 214, 230, 1), 0 3px 15px 0 rgba(107, 214, 230, .95); } } @@ -56,7 +50,7 @@ $size-home-button: 3.5em; right: 0; margin: 0; padding-bottom: $width-arrow * 2; - min-width:16em; + min-width: 17em; visibility: hidden; @@ -93,22 +87,22 @@ $size-home-button: 3.5em; background-color: $color-grey-1; &:first-child { - border-top-left-radius: 0.5em; - border-top-right-radius: 0.5em; + border-top-left-radius: .5em; + border-top-right-radius: .5em; } &:last-child { - border-bottom-right-radius: 0.5em; - border-bottom-left-radius: 0.5em; + border-bottom-right-radius: .5em; + border-bottom-left-radius: .5em; } & + li { - border-top: 1px solid darken($color-grey-1, 4%); + border-top: 1px solid darken($color-grey-1, 3%); } transform: translateY(1em); opacity: 0; - transition-duration: .15s; + transition-duration: .125s; transition-timing-function: cubic-bezier(.55,0,.1,1); .wagtail-userbar.is-active & { @@ -126,6 +120,8 @@ $size-home-button: 3.5em; li a, li .action { color: #aaa; + display: block; + text-decoration: none; &:hover, &:focus { diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/userbar/base.html b/wagtail/wagtailadmin/templates/wagtailadmin/userbar/base.html index 280f8a6745..1a4d4977a9 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/userbar/base.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/userbar/base.html @@ -5,7 +5,7 @@ {% endcompress %}
- {% trans 'Go to Wagtail admin interface' %} +
{% trans 'Go to Wagtail admin interface' %}