DSS-836: FE Print detailed listing page

Author: OleksandrBohuslavskyi

frontend/src/app/common/layout/layout.component.html

@@ -5,15 +5,15 @@
             <div class="main-title">Short-Term Rental Data Portal</div>
         </div>
         <div *ngIf="userDataService.currentUser" class="user-container">
-            {{userDataService.currentUser.displayName || 'Unknown User'}} <button pButton icon="pi pi-angle-down"
-                (click)="op.toggle($event)"></button>
+            {{userDataService.currentUser.displayName || 'Unknown User'}} <button pButton class="do-not-print-it"
+                icon="pi pi-angle-down" (click)="op.toggle($event)"></button>
             <p-overlayPanel #op>
                 <button pButton [iconPos]="'right'" class="p-button-transparent" icon="pi pi-sign-out"
                     (click)="logout()">Logout</button>
             </p-overlayPanel>
         </div>
     </div>
-    <div class="header-menu">
+    <div class="header-menu do-not-print-it">
         <div class="menu-container">
             <p-menubar [model]="items"></p-menubar>
         </div>
@@ -23,7 +23,7 @@
 <div class="content">
     <router-outlet />
 </div>
-<div class="footer">
+<div class="footer do-not-print-it">
     <div class="cc">© 2024 Government of British Columbia.</div>
 </div>
 

frontend/src/app/common/layout/layout.component.scss

@@ -6,6 +6,18 @@
     align-items: center;
 }
 
+@media print {
+    .header {
+        .header-top {
+            padding: 0 !important;
+
+            .logo-container {
+                display: none !important;
+            }
+        }
+    }
+}
+
 .header {
     width: 100%;
     position: sticky;
@@ -91,4 +103,10 @@
     position: sticky;
     bottom: 0;
     z-index: 10;
+}
+
+@media print {
+    .content {
+        width: 100%;
+    }
 }

frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html

@@ -4,10 +4,10 @@ <h2>Detailed Listing Information for</h2>
 
         <a target="_blank" class="listing-url-lnk"
             [href]="listing.platformListingUrl">{{listing.platformListingNo}}</a>&nbsp; <i
-            class="pi pi-external-link"></i>
+            class="pi pi-external-link do-not-print-it"></i>
     </div>
     <div class="legend-container">
-        <button pButton id="view-more-history-btn" class="p-button-link" (click)="showLegend()">
+        <button pButton id="view-more-history-btn" class="p-button-link do-not-print-it" (click)="showLegend()">
             <i class="pi pi-question-circle"></i>&nbsp;Legend
         </button>
     </div>
@@ -21,10 +21,10 @@ <h2>Detailed Listing Information for</h2>
         </div>
     </div>
     <div class="column">
-        <button *ngIf="!isCEU" pButton (click)="sendNoticeOfNonCompliance()" class="p-button-outlined ">
+        <button *ngIf="!isCEU" pButton (click)="sendNoticeOfNonCompliance()" class="p-button-outlined do-not-print-it">
             <span class="nonc-icon"></span> Send Notice Of
             Non-Compliance </button>
-        <button *ngIf="!isCEU" pButton (click)="sendTakedownRequest()" class="p-button-outlined"><span
+        <button *ngIf="!isCEU" pButton (click)="sendTakedownRequest()" class="p-button-outlined do-not-print-it"><span
                 class="tdr-icon"></span> Send
             Takedown
             Request</button>
@@ -290,7 +290,8 @@ <h2>Detailed Listing Information for</h2>
                 <ng-template #changed>
                     <strong>Business Licence Information was removed from this listing.</strong>
                 </ng-template>
-                <button pButton (click)="showBlMatchPopup()" class="p-button-link">Click here to link this listing
+                <button pButton (click)="showBlMatchPopup()" class="p-button-link do-not-print-it">Click here to link
+                    this listing
                     to a business licence record</button>
 
             </div>
@@ -421,7 +422,8 @@ <h2>Detailed Listing Information for</h2>
                 <div class="spacer-hr">
                 </div>
                 <div class="row">
-                    <button pButton (click)="showBlUnlinkPopup()" class="p-button-link">Click here to unlink this
+                    <button pButton (click)="showBlUnlinkPopup()" class="p-button-link do-not-print-it">Click here to
+                        unlink this
                         listing from this business licence record</button>
                 </div>
             </ng-template>

frontend/src/app/features/components/listings-table/listing-details/listing-details.component.scss

@@ -5,6 +5,20 @@
     display: flex;
     flex-direction: column;
 
+    @media print {
+        .content {
+            display: block !important;
+            padding: 0 !important;
+
+            .main-block,
+            .sidebar {
+                padding: 0 !important;
+                display: block !important;
+                width: 100% !important;
+            }
+        }
+    }
+
     .message {
         margin-top: 12px;
         padding: 16px;

frontend/src/styles.scss

@@ -28,6 +28,12 @@
     font-weight: 400;
 }
 
+@media print {
+    .do-not-print-it {
+        display: none !important;
+    }
+}
+
 body {
     margin: 0;