core: use a single column for flow executor flow

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-21 14:53:02 +01:00
parent c834f0a372
commit bb9fbb55b6
2 changed files with 43 additions and 28 deletions

View File

@ -4,16 +4,6 @@
{% load i18n %}
{% load authentik_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">
@ -30,7 +20,7 @@
</div>
<ak-message-container></ak-message-container>
<div class="pf-c-login">
<div class="pf-c-login__container">
<div class="ak-login-container">
<header class="pf-c-login__header">
<div class="pf-c-brand ak-brand">
<img src="{{ config.authentik.branding.logo }}" alt="authentik icon" />
@ -38,23 +28,6 @@
<p>{{ config.authentik.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.authentik.footer_links %}
<li>
<a href="{{ link.href }}">{{ link.name }}</a>
</li>
{% endfor %}
{% if config.authentik.branding.title != "authentik" %}
<li>
<a href="https://goauthentik.io">
{% trans 'Powered by authentik' %}
</a>
</li>
{% endif %}
</ul>
</footer>
</header>
{% block main_container %}
<main class="pf-c-login__main">
@ -70,6 +43,23 @@
</div>
</main>
{% endblock %}
<footer class="pf-c-login__footer">
<p></p>
<ul class="pf-c-list pf-m-inline">
{% for link in config.authentik.footer_links %}
<li>
<a href="{{ link.href }}">{{ link.name }}</a>
</li>
{% endfor %}
{% if config.authentik.branding.title != "authentik" %}
<li>
<a href="https://goauthentik.io">
{% trans 'Powered by authentik' %}
</a>
</li>
{% endif %}
</ul>
</footer>
</div>
</div>
{% endblock %}

View File

@ -15,10 +15,35 @@ html > input {
z-index: 0;
}
/*****************************
* Login adjustments
*****************************/
/* Ensure card is displayed on small screens */
.pf-c-login__main {
display: block;
}
.ak-login-container {
height: calc(100vh - var(--pf-global--spacer--lg) - var(--pf-global--spacer--lg));
width: 35rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.pf-c-login__header {
flex-grow: 1;
}
.pf-c-login__main {
flex-shrink: 1;
}
.pf-c-login__footer {
flex-grow: 1;
}
.pf-c-login__footer ul.pf-c-list.pf-m-inline {
justify-content: center;
}
/*****************************
* End Login adjustments
*****************************/
.pf-c-content h1 {
display: flex;