From aed6791088b81c9435bc92f0d3b0d4501b5df7af Mon Sep 17 00:00:00 2001 From: kapito Date: Tue, 1 Aug 2017 10:57:10 +0100 Subject: [PATCH] Optimise caudal oscillation parameters on logo (#3740) --- CHANGELOG.txt | 1 + client/scss/_utilities.scss | 38 +++++- docs/releases/1.12.rst | 1 + .../wagtailadmin/images/logo-body.svg | 1 + .../wagtailadmin/images/logo-eyeclosed.svg | 1 + .../wagtailadmin/images/logo-eyeopen.svg | 1 + .../wagtailadmin/images/logo-tail.svg | 1 + .../wagtailadmin/scss/components/_logo.scss | 109 ++++++++++++++++++ .../static_src/wagtailadmin/scss/core.scss | 46 +------- .../templates/wagtailadmin/base.html | 67 ++++++++++- 10 files changed, 218 insertions(+), 48 deletions(-) create mode 100644 wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-body.svg create mode 100644 wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeclosed.svg create mode 100644 wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeopen.svg create mode 100644 wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-tail.svg create mode 100644 wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_logo.scss diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 0db8f8383..af5b90c69 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -14,6 +14,7 @@ Changelog * Users can no longer remove their own active / superuser flags through Settings -> Users (Stein Strindhaug, Huub Bouma) * The `process_form_submission` method of form pages now return the created form submission object (cho-leukeleu) * Added `WAGTAILUSERS_PASSWORD_ENABLED` and `WAGTAILUSERS_PASSWORD_REQUIRED` settings to permit creating users with no Django-side passwords, to support external authentication setups (Matt Westcott) + * Optimised caudal oscillation parameters on logo (Jack Paine) * Fix: FieldBlocks in StreamField now call the field's `prepare_value` method (Tim Heap) * Fix: Initial disabled state of InlinePanel add button is now set correctly on non-default tabs (Matthew Downey) * Fix: Redirects with unicode characters now work (Rich Brennan) diff --git a/client/scss/_utilities.scss b/client/scss/_utilities.scss index 826c2b152..48246016b 100644 --- a/client/scss/_utilities.scss +++ b/client/scss/_utilities.scss @@ -1,3 +1,39 @@ .u-hidden { - display: none; + display: none !important; +} + +.u-hidden\@medium { + @include medium { + display: none !important; + } +} + +.u-hidden\@small { + @include small { + display: none !important; + } +} + +.u-inline\@medium { + @include medium { + display: inline !important; + } +} + +.u-inline\@small { + @include small { + display: inline !important; + } +} + +.u-block\@medium { + @include medium { + display: block !important; + } +} + +.u-block\@small { + @include small { + display: block !important; + } } diff --git a/docs/releases/1.12.rst b/docs/releases/1.12.rst index 18d12fe6c..cb3ad48d6 100644 --- a/docs/releases/1.12.rst +++ b/docs/releases/1.12.rst @@ -34,6 +34,7 @@ Other features * Users can no longer remove their own active / superuser flags through Settings -> Users (Stein Strindhaug, Huub Bouma) * The ``process_form_submission`` method of form pages now return the created form submission object (Christine Ho) * Added ``WAGTAILUSERS_PASSWORD_ENABLED`` and ``WAGTAILUSERS_PASSWORD_REQUIRED`` settings to permit creating users with no Django-side passwords, to support external authentication setups (Matt Westcott) + * Optimised caudal oscillation parameters on logo (Jack Paine) Bug fixes ~~~~~~~~~ diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-body.svg b/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-body.svg new file mode 100644 index 000000000..69bdbb9db --- /dev/null +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-body.svg @@ -0,0 +1 @@ + diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeclosed.svg b/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeclosed.svg new file mode 100644 index 000000000..aa1302c4d --- /dev/null +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeclosed.svg @@ -0,0 +1 @@ + diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeopen.svg b/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeopen.svg new file mode 100644 index 000000000..155a7bdf4 --- /dev/null +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeopen.svg @@ -0,0 +1 @@ + diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-tail.svg b/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-tail.svg new file mode 100644 index 000000000..f6715a00f --- /dev/null +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-tail.svg @@ -0,0 +1 @@ + diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_logo.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_logo.scss new file mode 100644 index 000000000..0cf288baf --- /dev/null +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_logo.scss @@ -0,0 +1,109 @@ +@import 'wagtailadmin/scss/variables'; +@import 'wagtailadmin/scss/mixins'; +@import 'wagtailadmin/scss/grid'; + +.logo { + display: block; + text-align: left; + text-decoration: none; + color: #aaa; + padding: 0.9em 1.2em; + margin: 0; + -webkit-font-smoothing: auto; +} + +// Desktop styling (override mobile styling): +@media screen and (min-width: $breakpoint-mobile) { + .logo { + margin: 1em auto; + text-align: center; + } +} + +.wagtail-logo-container__mobile { + .wagtail-logo { + width: 20px; + float: left; + border: 0; + margin-right: 1em; + } + + &:hover { + color: $color-white; + } +} + +.wagtail-logo-container__desktop { + display: block; + margin: auto; + width: 60px; + height: 75px; + position: relative; + transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1); + + .wagtail-logo { + display: block; + left: 0; + top: 0; + width: 60px; + position: absolute; + transition: inherit; + + &.wagtail-logo__eye--open { + display: inline !important; // doesn't work without `!important`, likely a specificity issue + } + + &.wagtail-logo__eye--closed { + display: none !important; + } + } + + // Wagtail 'serious' animation (nod): + &.logo-serious { + &:hover { + transform: rotate(4deg); + } + } + + // Wagtail 'playful' animation (tail-wag, triggered by JS in base.html): + &.logo-playful { + &:hover { + @keyframes nod { + from { + transform: rotate(2deg); + } + + to { + transform: rotate(8deg); + } + } + + @keyframes tail-wag { + from { + transform: rotate(-3deg); + } + + to { + transform: rotate(7deg); + } + } + + animation: nod 1.2s forwards; + + .wagtail-logo { + &.wagtail-logo__tail { + animation: tail-wag 0.09s alternate; + animation-iteration-count: infinite; + } + + &.wagtail-logo__eye--open { + display: none !important; + } + + &.wagtail-logo__eye--closed { + display: inline !important; + } + } + } + } +} diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss index d0a03427a..24acc0994 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss @@ -17,6 +17,7 @@ @import 'wagtailadmin/scss/components/main-nav'; @import 'wagtailadmin/scss/components/indicator'; @import 'wagtailadmin/scss/components/tooltips'; +@import 'wagtailadmin/scss/components/logo'; @import 'wagtailadmin/scss/fonts'; @@ -84,27 +85,6 @@ body { transition: transform 0.2s ease; } -.logo { - display: block; - text-align: left; - text-decoration: none; - color: #aaa; - padding: 0.9em 1.2em; - margin: 0; - -webkit-font-smoothing: auto; - - img { - width: 20px; - float: left; - border: 0; - margin-right: 1em; - } - - &:hover { - color: $color-white; - } -} - .content-wrapper { box-sizing: border-box; width: 100%; @@ -410,30 +390,6 @@ footer, border-bottom-right-radius: 5px; } - .logo { - margin: 1em auto; - text-align: center; - - span { - display: none; - } - - img { - width: 60px; - float: none; - margin: auto; - display: block; - } - - img.wagtail-logo { - transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1); - } - - img.wagtail-logo:hover { - transform: rotate(4deg); - } - } - footer { margin-left: $desktop-nice-padding; margin-right: $desktop-nice-padding; diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/base.html b/wagtail/wagtailadmin/templates/wagtailadmin/base.html index 3ced08793..bcb20e920 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/base.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/base.html @@ -6,9 +6,20 @@
{% menu_search %} @@ -37,3 +48,55 @@
{% endblock %} + +{# Animation easter-egg: #} +{% block extra_js %} + +{% endblock %}