fix: broken html to pdf layout in application print (#3378)

* fix: update whitelist root cause packages * fix: after #3191, wkhtmltopdf does not support flex anymore
City-of-Helsinki · Oct 8, 2024 · 012302c · 012302c
1 parent 7dcb01b
commit 012302c
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 22 deletions.
diff --git a/backend/benefit/applications/templates/application.html b/backend/benefit/applications/templates/application.html
@@ -108,15 +108,18 @@ <h3 id="deminimis-heading">{{ _("De minimis aid received by the employer") }}</h
             </section>
             <section>
                 <h3>{{ _("Change negotiations or co-determination negotiations") }}</h3>
+                {% if application.co_operation_negotiations %}
+
                 <div class="row force-column">
                     <div class="value">
-                        {% if application.co_operation_negotiations %}
-                        {{ _("Yes, the organization has ongoing or completed change negotiations within the previous 12 months.") }}
-                        {% else %}
-                        {{ _("No, the organization does not have change negotiations in progress or that have ended in the previous 12 months.") }}
-                        {% endif %}
+                        <p>{{ _("Yes, the organization has ongoing or completed change negotiations within the previous 12 months.") }}</p>
                     </div>
                 </div>
+                {% else %}
+                <p>{{ _("No, the organization does not have change negotiations in progress or that have ended in the previous 12 months.") }}</p>
+
+                {% endif %}
+
                 {% if application.co_operation_negotiations %}
                 <div class="row">
                     <div class="label">{{ _("Describe the situation") }}</div>

diff --git a/backend/benefit/applications/templates/footer.html b/backend/benefit/applications/templates/footer.html
@@ -1,5 +1,7 @@
 {% load application_extras %}
 <footer>
-    <div class="page-printed-at">{{ _("Printed at") }} {{ today }}</div>
-    <div class="page-count">{{ page }} / 3</div>
+    <div class="left-column page-printed-at">
+        {{ _("Printed at") }} {{ today }}
+    </div>
+    <div class="right-column page-count">{{ page }} / 3</div>
 </footer>
diff --git a/backend/benefit/applications/templates/style.html b/backend/benefit/applications/templates/style.html
@@ -65,22 +65,32 @@
 
     .page-wrapper {
         position: relative;
-        margin: 10px 90px;
         display: flex;
         flex-flow: column;
     }
 
+    hr {
+        border-color: #000;
+    }
+
     footer {
         position: absolute;
-        display: flex;
-        border-top: 1px solid black;
-        top: 1340px;
+        display: block;
+        border-top: 1px solid #000;
+        top: 1250px;
         padding-top: 5px;
         width: 100%;
-        flex: 1;
-        justify-content: space-between;
+        float: left;
     }
 
+    footer > .left-column {
+        position: absolute;
+        left: 0;
+    }
+    footer > .right-column {
+        position: absolute;
+        right: 0;
+    }
     p,
     h1,
     h2,
@@ -92,8 +102,8 @@
     }
 
     h3 {
-        font-size: 23px;
-        margin-bottom: 20px;
+        font-size: 1.4375em;
+        margin-bottom: 0.25em;
     }
 
     section {
@@ -116,8 +126,8 @@
 
     .row {
         display: flex;
-        margin-bottom: 20px;
-        font-size: 18px;
+        margin-bottom: 0.5em;
+        font-size: 1.125em;
     }
 
     .row.force-column {
@@ -127,7 +137,7 @@
     .label {
         font-weight: 600;
         min-width: 200px;
-        max-width: 200px;
+        max-width: 400px;
         margin-right: 20px;
         line-height: 1.25;
     }
@@ -145,11 +155,10 @@
     }
 
     header {
-        font-size: 20px;
-        display: flex;
+        font-size: 1.25em;
         margin-top: 20px;
         margin-bottom: 20px;
-        justify-content: flex-start;
+        padding-bottom: 130px;
     }
 
     header > .left-column svg {
@@ -160,7 +169,14 @@
         margin-bottom: 0;
     }
 
+    header > .left-column {
+        position: absolute;
+        left: 0;
+    }
+
     header > .right-column {
+        position: absolute;
+        right: 0;
         margin-right: 30px;
         display: block;
         margin-left: auto;
@@ -172,7 +188,7 @@
 
     header div h1,
     header div h2 {
-        font-size: 16px;
+        font-size: 1em;
         font-weight: 400;
     }
 </style>