Optimise caudal oscillation parameters on logo (#3740)

pull/3740/merge
kapito 2017-08-01 10:57:10 +01:00 zatwierdzone przez Matt Westcott
rodzic f9824236a8
commit aed6791088
10 zmienionych plików z 218 dodań i 48 usunięć

Wyświetl plik

@ -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)

Wyświetl plik

@ -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;
}
}

Wyświetl plik

@ -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
~~~~~~~~~

Wyświetl plik

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path clip-path="url(#SVGID_2_)" fill="#FFF" d="M353 12.8v24s-42.6-16-70 13c-20 21-21.6 44.3-12.5 75.5C361 125.3 375 176 375 176l-9.4-58.3L394 83c0-41-34-68-41-70.2"/><path clip-path="url(#SVGID_2_)" d="M374 176s-14-69.4-104.4-50.7C260.6 94 262 71 282 49.8c27.5-29 70-13 70-13v-24C337 6.2 322.8 5 307 5c-58 0-90.3 43.3-104 72.8L39.4 378l46.2-8.6 19.3 24.2c127.6 0 291.7-46 269-217.7"/><path clip-path="url(#SVGID_2_)" fill="#231F20" d="M430 117.7L394 83l-28.4 34.7"/><path clip-path="url(#SVGID_2_)" fill="#FFF" d="M127.2 356.7s4.2-1 11.7-2.5c7.3-1.7 18-4 30.4-7.5 6.3-1.7 13-3.7 20-6 7.2-2.4 14.6-5.2 22-8.3 7.6-3 15-6.8 22.5-11 7.4-4 14.6-8.7 21.4-14 1.7-1.3 3.5-2.5 5-4l5-4c3-3 6.2-6 9-9 3-3.2 5.4-6.5 8-9.7 1.3-1.6 2.4-3.3 3.6-5l1.8-2.4 1.6-2.6 3-5c1-1.8 2-3.5 2.8-5.2.5-1 1-1.7 1.3-2.6l1.2-2.7 2.3-5 3.7-10 2.8-9.7 2-9 1.4-8c.4-2.7.6-5 .8-7.3l.7-6.2.6-11.6 6.7.2-1 12c0 2-.4 4-.7 6.4-.3 2.3-.5 4.8-1 7.5-.6 2.6-1.2 5.4-1.7 8.4l-2.4 9c-1 3.3-2 6.6-3.2 10l-4 10.2c-1 1.8-1.8 3.5-2.6 5.3L301 260l-1.5 2.7-3 5.3-3.3 5.2-1.7 2.6-2 2.5c-1 1.7-2.4 3.4-3.7 5-2.8 3.3-5.5 6.6-8.6 9.7-3 3.2-6.2 6-9.5 9l-5 4.2-5.3 4c-7 5-14.5 9.8-22.2 13.7-7.6 4-15.3 7.4-23 10.4-7.6 3-15 5.6-22.2 7.7-7 2.3-14 4-20.3 5.7-12.7 3-23.3 5.3-30.8 6.7l-11.8 2.3"/></svg>

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 1.3 KiB

Wyświetl plik

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path d="M341 77.4c.2 0 .4 0 .5-.3l.6-.6.5-.6.4-1s.2 0 .4-.3c0-.3.4-.5.6-.8 0-.2.4-.5.7-.7l.7-.4c.4 0 .5-.4 1-.6l.6-.4c.2 0 .3-.2.5-.3l.7-.4.5-.4.7-.4.7-.5.8-.4.5-.3c.3-.3.5-.3 1-.5l.6-.4.6-.2s.4 0 .7-.3l.7-.3c.4 0 .7-.2 1-.4h.7l.5-.3h.6l.7-.4h.6l.7-.2h4.5c.4.2.7.2 1 .2h.8c.3 0 .4 0 .6.2h1l.5.2h.5c.3 0 .5.4.7.4h.7c0 .2.4.2 1 .4l.7.3h.8l.7.4h.5" stroke-opacity="null" stroke-width="12" stroke="#231F20" fill="none"/></svg>

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 511 B

Wyświetl plik

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path clip-path="url(#SVGID_2_)" fill="#231F20" d="M371.8 71.3c0 6-4.8 11-11 11s-10.7-5-10.7-11 5-11 11-11 10.8 5 10.8 11"/></svg>

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 218 B

Wyświetl plik

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path clip-path="url(#SVGID_2_)" d="M109 369.7l-22.4-4.3L2 528.4 61 518l45-128.4"/></svg>

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 177 B

Wyświetl plik

@ -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;
}
}
}
}
}

Wyświetl plik

@ -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;

Wyświetl plik

@ -6,9 +6,20 @@
<div class="inner">
<a href="{% url 'wagtailadmin_home' %}" class="logo" title="Wagtail v.{% wagtail_version %}">
{% block branding_logo %}
<img class="wagtail-logo" src="{% static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="Wagtail" width="80" />
{# Mobile-only logo: #}
<div class="wagtail-logo-container__mobile u-hidden@medium">
<img class="wagtail-logo wagtail-logo__full" src="{% static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="Wagtail" width="80" />
</div>
{# Desktop logo (animated): #}
<div class="wagtail-logo-container__desktop u-hidden@small">
<img class="wagtail-logo wagtail-logo__body" src="{% static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
<img class="wagtail-logo wagtail-logo__tail" src="{% static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--open" src="{% static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--closed" src="{% static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
</div>
{% endblock %}
<span>{% trans "Dashboard" %}</span>
<span class="u-hidden@medium">{% trans "Dashboard" %}</span>
</a>
{% menu_search %}
@ -37,3 +48,55 @@
</div>
</div>
{% endblock %}
{# Animation easter-egg: #}
{% block extra_js %}
<script>
$(function() {
var sensitivity = 8; // the amount of times the user must stroke the wagtail to trigger the animation
var $logoContainer = $('.wagtail-logo-container__desktop');
var mouseX = 0;
var lastMouseX = 0;
var dir = '';
var lastDir = '';
var dirChangeCount = 0;
function enableWag() {
$logoContainer.removeClass('logo-serious').addClass('logo-playful');
}
function disableWag() {
$logoContainer.removeClass('logo-playful').addClass('logo-serious');
}
$logoContainer.mousemove(function(event) {
mouseX = event.pageX;
if (mouseX > lastMouseX) {
dir = 'r';
} else if (mouseX < lastMouseX) {
dir = 'l';
}
if (dir != lastDir && lastDir != '') {
dirChangeCount += 1;
}
if (dirChangeCount > sensitivity) {
enableWag();
}
lastMouseX = mouseX;
lastDir = dir;
})
$logoContainer.mouseleave(function() {
dirChangeCount = 0;
disableWag();
})
disableWag();
})
</script>
{% endblock %}