Improve print layout - still need to handle virtual scroll

src/app/app.component.html

@@ -1,6 +1,6 @@
 <ion-app class="dark">
   <ion-split-pane contentId="main-content" *ngIf="ready$ | async">
-    <ion-menu class="sidebar" menuId="main-menu" contentId="main-content" content="content" type="push" side="start" *ngIf="!api.isPublicUser">
+    <ion-menu class="sidebar no-print" menuId="main-menu" contentId="main-content" content="content" type="push" side="start" *ngIf="!api.isPublicUser">
       <ion-header>
         <ion-toolbar color="primary">
           <ion-title style="font-weight: bold; color: white;">{{ appName }}

src/app/components/wysiwyg/wysiwyg.component.scss

@@ -1,11 +1,17 @@
 .editable-base {
-  padding: 20px;
+  padding: 15px;
 
   &.focused {
     background: aliceblue;
   }
 }
 
+@media print {
+  .editable-base {
+    padding: 10px;
+  }
+}
+
 .toolbar-base {
   min-height: 40px;
   border: 1px solid lightgray;

src/app/pages/editor/editor.page.html

@@ -16,7 +16,7 @@
           ></ion-input>
         </div>
       </ion-title>
-      <ion-buttons slot="end">
+      <ion-buttons slot="end" class="no-print">
         <button
           class="save-button"
           (click)="editorService.triggerSave()"
@@ -53,8 +53,8 @@
           *ngFor="let node of editorService.immutableNodes"
         >
           <div class="host-icons" *ngIf="!isFilloutMode">
-            <i class="type-icon fa" [ngClass]="typeIcons[(node.isNorm() ? 'node' : node.type)] + ' ' + (node.isNorm() ? 'node' : (node.isForm() ? 'form-input ' + node.type : node.type))"></i>
+            <i class="type-icon fa no-print" [ngClass]="typeIcons[(node.isNorm() ? 'node' : node.type)] + ' ' + (node.isNorm() ? 'node' : (node.isForm() ? 'form-input ' + node.type : node.type))"></i>
-            <button (click)="onOptionsClick($event, node)" *ngIf="editorService.canEdit()" class="clear-btn">
+            <button (click)="onOptionsClick($event, node)" *ngIf="editorService.canEdit()" class="clear-btn no-print">
               <i class="fa fa-ellipsis-v" title="Node options"></i>
             </button>
           </div>
@@ -80,7 +80,7 @@
             <editor-node-form-input style="flex: 1;" [isFilloutMode]="isFilloutMode" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-node-form-input>
           </ng-container>
         </div>
-        <button *ngIf="editorService.canEdit() && !isFilloutMode" class="host-add-button" (click)="onAddClick($event)">
+        <button *ngIf="editorService.canEdit() && !isFilloutMode" class="host-add-button no-print" (click)="onAddClick($event)">
           <i class="fa fa-plus"></i> Add Node
         </button>
       </div>

src/global.scss

@@ -235,3 +235,9 @@ body.dark {
     pointer-events: auto !important;
   }
 }
+
+@media print {
+  .no-print {
+    display: none;
+  }
+}