Fixed an issue that caused active system notifications to make certif…

…icates print weirdly.

projects/gameboard-ui/src/app/app.component.html

@@ -2,14 +2,14 @@
 <!-- Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information. -->
 
 <div class="app-container">
-  <div class="app-bar-container" [class.sticky-content]="(stickyMenu$ | async)">
+  <div class="app-bar-container print-hide" [class.sticky-content]="(stickyMenu$ | async)">
     <app-sponsor-select-banner></app-sponsor-select-banner>
     <div class="d-flex align-items-center" [class]="customBackground">
       <app-gameboard-signalr-hubs class="flex-grow-1"></app-gameboard-signalr-hubs>
       <app-nav></app-nav>
     </div>
   </div>
-  <app-system-notifications></app-system-notifications>
-  <app-message-board></app-message-board>
+  <app-system-notifications class="print-hide"></app-system-notifications>
+  <app-message-board class="print-hide"></app-message-board>
   <router-outlet></router-outlet>
 </div>

projects/gameboard-ui/src/app/app.component.scss

@@ -2,13 +2,6 @@
   min-height: 100vh;
 }
 
-@media print {
-  .app-bar-container,
-  .app-bar-container * {
-    display: none !important;
-  }
-}
-
 .sticky-content {
   top: 0px;
   left: 0px;

projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.html

@@ -1,20 +1,10 @@
 <div class="certificate-template-previewer-component">
-    <ng-container *ngIf="!isDownloading; else loading">
-        <div class="gameboard-print">
-            <img class="certificate-img" [src]="imageUrl" alt="Certificate Preview Image" (load)="handleImageLoad()"
-                *ngIf="imageUrl" (error)="handleError($event)" />
-        </div>
-
-        <ng-template #notPublished>
-            <div class="is-not-published">
-                This certificate either doesn't exist or has not been published by its owner.
-            </div>
-        </ng-template>
-    </ng-container>
-</div>
-
-<ng-template #loading>
-    <app-spinner>
+    <app-spinner *ngIf="isDownloading">
         Loading your preview...
     </app-spinner>
-</ng-template>
+
+    <div class="gameboard-print">
+        <img class="certificate-img" [src]="imageUrl" alt="Certificate Preview Image" (load)="handleImageLoad()"
+            *ngIf="imageUrl" (error)="handleError($event)" />
+    </div>
+</div>

projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.ts

@@ -5,7 +5,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { CertificatesService } from '@/api/certificates.service';
 import { SafeUrl } from '@angular/platform-browser';
 import { SpinnerComponent } from '@/standalone/core/components/spinner/spinner.component';
-import { WindowService } from '@/services/window.service';
 
 @Component({
   selector: 'app-certificate-previewer',
@@ -19,7 +18,7 @@ import { WindowService } from '@/services/window.service';
 })
 export class CertificatePreviewerComponent implements OnInit {
   protected errors: any[] = [];
-  protected isDownloading = false;
+  protected isDownloading = true;
   protected imageUrl?: SafeUrl;
   protected template?: SimpleEntity;
 
@@ -33,11 +32,18 @@ export class CertificatePreviewerComponent implements OnInit {
       this.errors.push("Template ID is required.");
     }
 
-    this.imageUrl = await this.certificatesService.getCertificatePreviewImage(templateId || "");
+    try {
+      this.imageUrl = await this.certificatesService.getCertificatePreviewImage(templateId || "");
+    }
+    catch (err) {
+      this.errors.push(err);
+      this.isDownloading = false;
+    }
   }
 
   protected handleError(ev: ErrorEvent) {
     this.errors.push(ev);
+    this.isDownloading = false;
   }
 
   protected handleImageLoad() {

projects/gameboard-ui/src/app/system-notifications/components/system-notifications/system-notifications.component.html

@@ -1,4 +1,4 @@
-<div class="notificatons-container sticky-top">
+<div class="notificatons-container sticky-top" *ngIf="notifications.length">
     <alert *ngFor="let notification of notifications" [dismissible]="notification.isDismissible"
         [type]="notification.notificationType | notificationTypeToAlertType" (onClose)="handleClosed(notification)">
         <div class="container" (click)="handleClicked(notification)">

projects/gameboard-ui/src/app/users/components/certificate-printer/certificate-printer.component.html

@@ -17,7 +17,7 @@
     </div>
 
     <ng-template #notPublished>
-        <div class="is-not-published">
+        <div class="is-not-published mt-5 text-center">
             This certificate either doesn't exist or has not been published by its owner.
         </div>
     </ng-template>

projects/gameboard-ui/src/app/users/components/certificate-printer/certificate-printer.component.scss

@@ -1,68 +1,64 @@
 @media print {
-    * {
-        --webkit-print-color-adjust: exact !important;
-        print-color-adjust: exact !important;
-    }
+  * {
+    --webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
 
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box;
-    }
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 
-    body {
-        border-width: 0px;
-        margin: 0mm !important;
-        padding: 0;
-    }
+  body {
+    border-width: 0px;
+    margin: 0mm !important;
+    padding: 0;
+  }
 
-    @page {
-        size: letter landscape;
-        margin: 0mm !important;
-        padding: 0;
-    }
+  @page {
+    size: letter landscape;
+    margin: 0mm !important;
+    padding: 0;
+  }
 
-    img {
-        width: 100%;
-        height: 100%;
-    }
+  img {
+    width: 100%;
+    height: 100%;
+  }
 
-    html, body * {
-        visibility: hidden;
-    }
-
-    .gameboard-print {
-        visibility: visible;
-    }
+  html,
+  body * {
+    visibility: hidden;
+  }
 
-    .print-button { 
-        display: none;
-        visibility: hidden;
-    }
+  .gameboard-print {
+    visibility: visible;
+  }
+
+  .print-button {
+    display: none;
+    visibility: hidden;
+  }
 }
 
 .certificate-printer-component {
-    position: relative;
+  position: relative;
 }
 
 .gameboard-print {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 img {
-    height: 100vh;
+  height: 100vh;
 }
 
 .print-button-container {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    top: 4px;
-    width: calc(100vw - 12px);
-}
-
-.is-not-published {
-    margin-top: 5rem;
-    text-align: center;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  top: 4px;
+  width: calc(100vw - 12px);
 }

projects/gameboard-ui/src/app/users/components/certificate-printer/certificate-printer.component.ts

@@ -67,9 +67,7 @@ export class CertificatePrinterComponent {
   }
 
   protected handlePrintClick() {
-    setTimeout(() => {
-      this.windowService.print();
-    }, 500);
+    setTimeout(() => this.windowService.print(), 500);
   }
 
   protected handleProvideNameClick() {

projects/gameboard-ui/src/styles.scss

@@ -1,5 +1,3 @@
-/* You can add global styles to this file, and also import other style files */
-
 @import "./scss/vis-timeline";
 @import "./scss/variables";
 @import "./scss/toastify";
@@ -103,16 +101,13 @@ app-root {
   min-height: 100vh;
 }
 
-.reader-slim {
-  max-width: 600px;
-  margin: 0 auto;
-}
-
 .reader {
   max-width: 800px;
   margin: 0 auto;
 }
 
+/* APP UTILITY CLASSES */
+
 .font-fixed-width {
   font-family: monospace;
 }
@@ -157,6 +152,13 @@ app-root {
   font-size: 2em;
 }
 
+@media print {
+  .print-hide {
+    display: none !important;
+    visibility: hidden !important;
+  }
+}
+
 .sticky-bottom {
   position: sticky;
   bottom: 0;