From 05aeeafacc3d03f8efc4710e101c885142e536f8 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 2 Dec 2020 15:07:19 +0100
Subject: [PATCH] flows: fix header/footer moving around on login template when
 card changes size

---
 passbook/core/templates/login/base_full.html | 44 ++++++++++++--------
 passbook/flows/templates/flows/shell.html    | 30 ++++++-------
 2 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/passbook/core/templates/login/base_full.html b/passbook/core/templates/login/base_full.html
index 1954057e1..583978a5e 100644
--- a/passbook/core/templates/login/base_full.html
+++ b/passbook/core/templates/login/base_full.html
@@ -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 %}
diff --git a/passbook/flows/templates/flows/shell.html b/passbook/flows/templates/flows/shell.html
index ed4950463..6d2f9993a 100644
--- a/passbook/flows/templates/flows/shell.html
+++ b/passbook/flows/templates/flows/shell.html
@@ -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 %}