Enotf print view

assets/components/enotf/topbar.php

@@ -27,6 +27,11 @@
                 </a>
             <?php endif; ?>
 
+            <a href="<?= BASE_PATH ?>enotf/print/index.php?enr=<?= $enr ?>" id="print" class="edivi__iconlink">
+                <i class="las la-file-alt"></i><br>
+                <small>Papieransicht</small>
+            </a>
+
             <?php if (Permissions::check(['admin', 'edivi.edit'])) : ?>
                 <a href="<?= BASE_PATH ?>admin/enotf/qm-actions.php?id=<?= $daten['id'] ?>" id="qma" target="_blank" class="edivi__iconlink">
                     <i class="las la-exclamation"></i><br>

assets/css/print.css

@@ -0,0 +1,272 @@
+body {
+  --bs-body-bg: gray;
+}
+
+.print__paper {
+  height: 297mm;
+  width: 210mm;
+  background-color: #fff;
+  margin: 0 auto;
+  padding: 1.27cm;
+}
+
+h6.print__heading {
+  text-transform: uppercase;
+  font-size: 8pt;
+  margin-bottom: 0;
+}
+
+h5.print__heading {
+  font-size: 8pt;
+  margin-bottom: 0;
+}
+
+h1.print__heading-main {
+  font-size: 14pt;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.print__divider {
+  margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
+  margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
+}
+
+.print__text-small {
+  font-size: 6pt;
+}
+
+p.print__text-small {
+  margin-bottom: 0;
+}
+
+input[type=radio] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 6pt;
+  height: 6pt;
+  border: 1px solid #000;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  vertical-align: middle;
+  margin-right: 2px;
+  cursor: default;
+}
+
+input[type=radio]:checked {
+  background-color: #000;
+  border-color: #000;
+}
+
+.print__field-wrapper {
+  position: relative;
+  margin-bottom: 4pt;
+}
+.print__field-wrapper::after {
+  content: attr(data-field-name);
+  position: absolute;
+  right: 3pt;
+  bottom: 0;
+  font-size: 5pt;
+}
+.print__field-wrapper::before {
+  content: attr(data-vp-name);
+  position: absolute;
+  left: 3pt;
+  top: 0;
+  font-size: 5pt;
+}
+.print__field-wrapper .print__field {
+  font-size: 11pt;
+  font-weight: 600;
+  border: 1px solid #000;
+  border-top: 0;
+  padding-left: 0.35rem;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+  caret-color: transparent;
+}
+.print__field-wrapper .print__field:focus {
+  outline: none;
+}
+.print__field-wrapper .print__field-vitals {
+  font-size: 11pt;
+  font-weight: 600;
+  border: 1px solid #000;
+  border-top: 0;
+  border-right: 0;
+  padding-left: 0.35rem;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+  caret-color: transparent;
+  margin-top: 5pt;
+}
+.print__field-wrapper .print__field-vitals:focus {
+  outline: none;
+}
+.print__field-wrapper .print__textbox {
+  font-size: 7pt;
+  border: 0;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+  caret-color: transparent;
+}
+.print__field-wrapper .print__textbox:focus {
+  outline: none;
+}
+
+.print__full-height {
+  height: 100%;
+}
+
+.print__vitals-table {
+  border-collapse: collapse;
+}
+.print__vitals-table th,
+.print__vitals-table td {
+  border: 1px solid #000;
+  padding: 3pt !important;
+}
+.print__vitals-table th {
+  background-color: #f0f0f0;
+  font-weight: bold;
+}
+.print__vitals-table tbody tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+.print__vitals-table tbody tr:hover {
+  background-color: #f0f0f0;
+}
+
+.topbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid #ddd;
+  background: white;
+  color: #333;
+  text-decoration: none;
+  margin-left: 5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 20px;
+}
+
+.topbar-btn:hover {
+  background: #f0f0f0;
+  border-color: #bbb;
+  color: #000;
+}
+
+.topbar-btn:active {
+  background: #e0e0e0;
+}
+
+body {
+  transform-origin: top center;
+  transition: transform 0.2s ease;
+}
+
+@media print {
+  @page {
+    size: A4;
+    margin: 0;
+  }
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    color-adjust: exact !important;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    background: white !important;
+    transform: none !important;
+  }
+
+  .print__paper {
+    page-break-after: always;
+    page-break-inside: avoid;
+    margin: 0;
+    padding: 1.27cm;
+    width: 210mm;
+    height: 297mm;
+    box-sizing: border-box;
+    transform: none !important;
+  }
+
+  .print__paper:last-child {
+    page-break-after: auto;
+  }
+
+  .row {
+    page-break-inside: avoid;
+    display: flex !important;
+    flex-wrap: wrap !important;
+  }
+
+  .col,
+[class*=col-] {
+    flex-shrink: 0;
+  }
+
+  canvas {
+    max-width: 100% !important;
+    height: auto !important;
+    display: block !important;
+  }
+
+  .col:has(#vitalChart) {
+    border-left: 1px solid #000 !important;
+    border-bottom: 1px solid #000 !important;
+  }
+
+  .border {
+    border-color: #000 !important;
+  }
+
+  input[type=radio] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 6pt;
+    height: 6pt;
+    border: 1px solid #000 !important;
+    border-radius: 50%;
+    background: white;
+  }
+
+  input[type=radio]:checked {
+    background-color: #000 !important;
+  }
+
+  input[type=text],
+textarea,
+select {
+    border-color: #000 !important;
+    background: white !important;
+    color: black !important;
+  }
+
+  * {
+    color: black !important;
+  }
+
+  .print__heading,
+.print__heading-main,
+.print__text-small {
+    color: black !important;
+  }
+
+  #topbar {
+    display: none !important;
+  }
+}