core: improve loading speed of flow background

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-06-02 14:20:23 +02:00
parent 0adb5a79f6
commit eba339ba27
4 changed files with 24 additions and 2 deletions

View File

@ -5,6 +5,7 @@
{% block head_before %} {% block head_before %}
{{ block.super }} {{ block.super }}
<link rel="prefetch" href="{{ flow.background_url }}" />
{% if flow.compatibility_mode and not inspector %} {% if flow.compatibility_mode and not inspector %}
<script>ShadyDOM = { force: !navigator.webdriver };</script> <script>ShadyDOM = { force: !navigator.webdriver };</script>
{% endif %} {% endif %}
@ -19,7 +20,7 @@ window.authentik.flow = {
{% block head %} {% block head %}
<script src="{% static 'dist/flow/FlowInterface.js' %}" type="module"></script> <script src="{% static 'dist/flow/FlowInterface.js' %}" type="module"></script>
<style> <style>
.pf-c-background-image::before { :root {
--ak-flow-background: url("{{ flow.background_url }}"); --ak-flow-background: url("{{ flow.background_url }}");
} }
</style> </style>

View File

@ -4,13 +4,19 @@
{% load i18n %} {% load i18n %}
{% block head_before %} {% block head_before %}
<link rel="prefetch" href="/static/dist/assets/images/flow_background.jpg" />
<link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.min.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.min.css' %}">
{% endblock %} {% endblock %}
{% block head %} {% block head %}
<style> <style>
.pf-c-background-image::before { :root {
--ak-flow-background: url("/static/dist/assets/images/flow_background.jpg"); --ak-flow-background: url("/static/dist/assets/images/flow_background.jpg");
--pf-c-background-image--BackgroundImage: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage-2x: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--sm: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background);
} }
/* Form with user */ /* Form with user */
.form-control-static { .form-control-static {

View File

@ -9,10 +9,19 @@
<link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/patternfly.min.css"> <link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/patternfly.min.css">
<link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/authentik.css"> <link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/authentik.css">
<link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/custom.css"> <link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/custom.css">
<link rel="prefetch" href="/outpost.goauthentik.io/static/dist/assets/images/flow_background.jpg" />
<style> <style>
.pf-c-background-image::before { .pf-c-background-image::before {
--ak-flow-background: url("/outpost.goauthentik.io/static/dist/assets/images/flow_background.jpg"); --ak-flow-background: url("/outpost.goauthentik.io/static/dist/assets/images/flow_background.jpg");
} }
:root {
--ak-flow-background: url("/outpost.goauthentik.io/static/dist/assets/images/flow_background.jpg");
--pf-c-background-image--BackgroundImage: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage-2x: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--sm: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background);
}
</style> </style>
</head> </head>
<body> <body>

View File

@ -9,6 +9,12 @@
--ak-dark-background-light: #1c1e21; --ak-dark-background-light: #1c1e21;
--ak-dark-background-light-ish: #212427; --ak-dark-background-light-ish: #212427;
--ak-dark-background-lighter: #2b2e33; --ak-dark-background-lighter: #2b2e33;
--pf-c-background-image--BackgroundImage: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage-2x: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--sm: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background);
} }
html { html {