flows: fix header/footer moving around on login template when card changes size

This commit is contained in:
Jens Langhammer 2020-12-02 15:07:19 +01:00
parent dc4a7d98e8
commit 05aeeafacc
2 changed files with 42 additions and 32 deletions

View file

@ -4,6 +4,16 @@
{% load i18n %}
{% load passbook_utils %}
{% block head %}
{{ block.super }}
<style>
/* Fix logo/header/footer block moving around when card size changes */
.pf-c-login__header {
grid-row-start: 3;
}
</style>
{% endblock %}
{% block body %}
<div class="pf-c-background-image">
<svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
@ -28,6 +38,23 @@
<p>{{ config.passbook.branding.title }}</p>
{% endif %}
</div>
<footer class="pf-c-login__footer">
<p></p>
<ul class="pf-c-list pf-m-inline">
{% for link in config.passbook.footer_links %}
<li>
<a href="{{ link.href }}">{{ link.name }}</a>
</li>
{% endfor %}
{% if config.passbook.branding.title != "passbook" %}
<li>
<a href="https://github.com/beryju/passbook">
{% trans 'Powered by passbook' %}
</a>
</li>
{% endif %}
</ul>
</footer>
</header>
{% block main_container %}
<main class="pf-c-login__main">
@ -43,23 +70,6 @@
</div>
</main>
{% endblock %}
<footer class="pf-c-login__footer">
<p></p>
<ul class="pf-c-list pf-m-inline">
{% for link in config.passbook.footer_links %}
<li>
<a href="{{ link.href }}">{{ link.name }}</a>
</li>
{% endfor %}
{% if config.passbook.branding.title != "passbook" %}
<li>
<a href="https://github.com/beryju/passbook">
{% trans 'Powered by passbook' %}
</a>
</li>
{% endif %}
</ul>
</footer>
</div>
</div>
{% endblock %}

View file

@ -6,21 +6,21 @@
{% block head %}
{{ block.super }}
<style>
.pb-loading,
.pf-c-login__main >iframe {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
.pb-hidden {
display: none
}
.pf-c-background-image::before {
background-image: url("{{ background_url }}");
background-position: center;
}
.pb-loading,
.pf-c-login__main >iframe {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
.pb-hidden {
display: none
}
.pf-c-background-image::before {
background-image: url("{{ background_url }}");
background-position: center;
}
</style>
{% endblock %}