Hopiu/wagtail
1
0
Fork 0
mirror of https://github.com/Hopiu/wagtail.git synced 2026-03-16 22:10:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

adds new image for accessible logo background, updates html and css for desktop and mobile to account for new image

Browse source
This commit is contained in:
Brian Edelman 2019-07-27 09:46:16 -04:00 committed by Thibaud Colas
parent eb0612c21c
commit e0672d60b3
6 changed files with 85 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
client/scss/components/_logo.scss
View file

@ -11,8 +11,23 @@
.logo {
display: block;
color: #aaa;
padding: 0.9em 1.2em;
-webkit-font-smoothing: auto;
position: relative;
&:hover {
color: $color-white;
}
}
@include media-breakpoint-down(xs) {
.logo {
padding: 0 1.2em;
margin: 0.9em 0;
height: 28px;
position: relative;
display: flex;
align-items: center;
}
}
// Desktop styling (override mobile styling):
@ -24,24 +39,62 @@
}
.wagtail-logo-container__mobile {
.wagtail-logo {
width: 20px;
position: relative;
.wagtail-logo,
.wagtail-logo-container__background {
float: left;
}
.wagtail-logo,
.wagtail-logo-container-inner {
width: 20px;
}
.wagtail-logo {
border: 0;
margin-right: 1em;
}
.wagtail-logo-container__background {
width: 28px;
margin-right: 5px;
}
.wagtail-logo-container-inner {
height: 20px;
margin-left: 4px;
margin-top: 3px;
position: absolute;
}
&:hover {
color: $color-white;
}
}
.wagtail-logo-container__desktop {
display: block;
margin: auto;
width: 60px;
height: 75px;
position: relative;
width: 80px;
height: 80px;
.wagtail-logo-container__background {
position: absolute;
top: -3px;
left: 0;
}
.wagtail-logo-container-inner {
width: 45px;
height: 75px;
margin: auto;
position: relative;
}
}
.wagtail-logo-container-inner,
.wagtail-logo-container__desktop.animated-logo-container {
display: block;
transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1);
.wagtail-logo {

3
wagtail/admin/static_src/wagtailadmin/images/logo-background.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="Oval" fill="#007D7E" cx="40" cy="40" r="40"></circle>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 221 B

2
wagtail/admin/static_src/wagtailadmin/js/core.js
View file

@ -122,7 +122,7 @@ $(function() {
function initLogo() {
var sensitivity = 8; // the amount of times the user must stroke the wagtail to trigger the animation
var $logoContainer = $('.wagtail-logo-container__desktop');
var $logoContainer = $('.animated-logo-container');
var mouseX = 0;
var lastMouseX = 0;
var dir = '';

7
wagtail/admin/templates/wagtailadmin/base.html
View file

@ -8,11 +8,14 @@
{% block branding_logo %}
{# Mobile-only logo: #}
<div class="wagtail-logo-container__mobile u-hidden@sm">
<img class="wagtail-logo wagtail-logo__full" src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="Wagtail" width="80" />
<img class="wagtail-logo-container__background" src="{% versioned_static 'wagtailadmin/images/logo-background.svg' %}" alt=""/>
<div class="wagtail-logo-container-inner">
<img class="wagtail-logo wagtail-logo__full" src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="Wagtail" width="80" />
</div>
</div>
{# Desktop logo (animated): #}
{% include "wagtailadmin/shared/animated_logo.html" %}
{% include "wagtailadmin/shared/animated_logo_background.html" %}
{% endblock %}
<span class="u-hidden@sm">{% trans "Dashboard" %}</span>
</a>

10
wagtail/admin/templates/wagtailadmin/shared/animated_logo.html
View file

@ -1,8 +1,8 @@
{% load wagtailadmin_tags %}
<div class="wagtail-logo-container__desktop u-hidden@xs">
<img class="wagtail-logo wagtail-logo__body" src="{% versioned_static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
<img class="wagtail-logo wagtail-logo__tail" src="{% versioned_static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--open" src="{% versioned_static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--closed" src="{% versioned_static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
<div class="wagtail-logo-container__desktop animated-logo-container u-hidden@xs">
<img class="wagtail-logo wagtail-logo__body" src="{% versioned_static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
<img class="wagtail-logo wagtail-logo__tail" src="{% versioned_static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--open" src="{% versioned_static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--closed" src="{% versioned_static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
</div>

11
wagtail/admin/templates/wagtailadmin/shared/animated_logo_background.html Normal file
View file

@ -0,0 +1,11 @@
{% load wagtailadmin_tags static %}
<div class="wagtail-logo-container__desktop u-hidden@xs">
<img class="wagtail-logo wagtail-logo-container__background" src="{% static 'wagtailadmin/images/logo-background.svg' %}" alt=""/>
<div class="wagtail-logo-container-inner animated-logo-container">
<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>
</div>