trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
passbook/core/templates/login/base_full.html
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,21 +38,6 @@
<p>{{ config.passbook.branding.title }}</p>
{% endif %}
</div>
</header>
{% block main_container %}
<main class="pf-c-login__main">
<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
{% block card_title %}
{% endblock %}
</h1>
</header>
<div class="pf-c-login__main-body">
{% block card %}
{% endblock %}
</div>
</main>
{% endblock %}
<footer class="pf-c-login__footer">
<p></p>
<ul class="pf-c-list pf-m-inline">
@ -60,6 +55,21 @@
{% endif %}
</ul>
</footer>
</header>
{% block main_container %}
<main class="pf-c-login__main">
<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
{% block card_title %}
{% endblock %}
</h1>
</header>
<div class="pf-c-login__main-body">
{% block card %}
{% endblock %}
</div>
</main>
{% endblock %}
</div>
</div>
{% endblock %}

14
passbook/flows/templates/flows/shell.html
View File

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