From aecda4898f6da04d25ded36271eb864c0f1f1334 Mon Sep 17 00:00:00 2001
From: Thomas Schneider <thomas@fsmpi.rwth-aachen.de>
Date: Thu, 5 Sep 2024 15:31:28 +0200
Subject: [PATCH] examples/static/schild.css: Dynamic content scaling for
preview
---
examples/static/schild.css | 33 ++++++++++++++++++++++-----
schilder2000/templates/schild.html.j2 | 10 ++++----
2 files changed, 33 insertions(+), 10 deletions(-)
diff --git a/examples/static/schild.css b/examples/static/schild.css
index d445ba2..0443bb2 100644
--- a/examples/static/schild.css
+++ b/examples/static/schild.css
@@ -3,11 +3,32 @@
margin: 50px;
}
+* {
+ box-sizing: border-box;
+}
+
body {
font-size: 48px;
font-family: "Noto Sans", sans-serif;
padding: 0;
margin: 0;
+ display: flex;
+ flex-direction: column;
+ @media not print {
+ /* This magic constant approximately corresponds to 48px at A4 size, but scales
+ * with the viewport/iframe size
+ */
+ font-size: 4.27426536064114vw;
+ padding: 4.27426536064114vw;
+ width: 100vw;
+ height: 100vh;
+ max-width: 100vw;
+ max-height: 100vh;
+ }
+}
+
+main {
+ flex-grow: 1;
}
img {
@@ -19,16 +40,16 @@ img {
#logo {
width: 15%;
- position: fixed;
- bottom: 0;
- right: 0;
}
footer {
- position: fixed;
- bottom: 0;
- left: 0;
font-size: 0.5em;
+ display: flex;
+ align-items: flex-end;
+}
+
+#footer {
+ flex-grow: 1;
}
h1 {
diff --git a/schilder2000/templates/schild.html.j2 b/schilder2000/templates/schild.html.j2
index 8915deb..87c47fb 100644
--- a/schilder2000/templates/schild.html.j2
+++ b/schilder2000/templates/schild.html.j2
@@ -43,10 +43,12 @@
</div>
<div>
<h2>Vorschau</h2>
- <iframe
- class="preview"
- id="preview"
- src="{{ url_for('instance.schild_html', ident=schild.ident) }}" />
+ <div class="preview-container" id="preview-container">
+ <iframe
+ class="preview"
+ id="preview"
+ src="{{ url_for('instance.schild_html', ident=schild.ident) }}" />
+ </div>
</div>
{% endif %}
{% endblock main %}
--
GitLab