Merge pull request #4561 from open-formulieren/issue/4560-submission-…

…pdf-overlap 🐛 [#4560] Use row based layout for submission report
open-formulieren · Jul 26, 2024 · ae8c6a0 · ae8c6a0
2 parents 56f3038 + 523f2bf
commit ae8c6a0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/src/openforms/scss/pdfs/_submission-step-row.scss b/src/openforms/scss/pdfs/_submission-step-row.scss
@@ -1,8 +1,7 @@
 @import '~microscope-sass/lib/typography';
 
 .submission-step-row {
-  // TODO this fixes overlap on next page but also adds empty pages in case of long values
-  break-inside: avoid-page;
+  break-inside: avoid-page; // needed to avoid spreading labels and their values across two pages
 
   & + & {
     margin-top: 1mm;
@@ -37,22 +36,25 @@
     padding-top: $grid-margin-2;
   }
 
+  &__fieldset-label {
+    @include body();
+    font-size: 1.25em;
+    font-weight: bold;
+  }
+
   &__label {
     @include body();
-    width: 40%;
-    padding-right: 2em;
-    // float is used here, because flexbox/grid/tables are really slow with
-    // weasyprint, especially if large textareas are used
-    // see: https://github.com/open-formulieren/open-forms/issues/4255
-    float: left;
+    font-weight: bold;
   }
 
   &__value {
     @include body();
-    width: 60%;
     word-break: break-all;
-    margin-left: 40%;
-    min-height: 1.5em; // required to ensure styling still works if value has no text
+    margin-bottom: 0.5em;
+
+    &--empty {
+      font-style: italic;
+    }
 
     // wysiwyg content
     p {
@@ -63,11 +65,4 @@
       max-width: 100%;
     }
   }
-
-  // Avoid rows from overlapping in case the field label is more than 1 line (#4450)
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
 }
diff --git a/src/openforms/submissions/templates/report/submission_report.html b/src/openforms/submissions/templates/report/submission_report.html
@@ -55,13 +55,18 @@ <h2 class="subtitle">{{ submission_step_node.render }}</h2>
                                     {% if component_node.spans_full_width %}
                                         {{ component_node.display_value }}
                                     {% else %}
-                                        <div class="submission-step-row__label">
-                                            {{ component_node.label }}
-                                        </div>
+                                        {% if component_node.component.type == "fieldset" %}
+                                            <span class="submission-step-row__fieldset-label">{{ component_node.label }}</span>
+                                        {% else %}
+                                            <div class="submission-step-row__label">
+                                                {{ component_node.label }}
+                                            </div>
 
-                                        <div class="submission-step-row__value">
-                                            {{ component_node.display_value }}
-                                        </div>
+                                            <div class="submission-step-row__value{% if not component_node.display_value %} submission-step-row__value--empty{% endif %}">
+                                                {% trans "(not filled in)" as empty_value %}
+                                                {{ component_node.display_value|default:empty_value }}
+                                            </div>
+                                        {% endif %}
                                     {% endif %}
                                 </div>
                             {% endif %}