From 952cfa28bf71a7d42f75d17524b3a5db602d2023 Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Mon, 10 Jun 2024 07:26:55 +0200
Subject: [PATCH] Added guide for saving as pdf

---
 src/routes/zhen/cv/epos/+page.svelte | 58 ++++++++++++++++++++++++++--
 1 file changed, 54 insertions(+), 4 deletions(-)

diff --git a/src/routes/zhen/cv/epos/+page.svelte b/src/routes/zhen/cv/epos/+page.svelte
index 33abc89..8eb57ee 100644
--- a/src/routes/zhen/cv/epos/+page.svelte
+++ b/src/routes/zhen/cv/epos/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     // Left side
     import NameAndImage from "../Comps/NameAndImage.svelte";
     import ShortProfile from "../Comps/ShortProfile.svelte"
@@ -18,8 +18,32 @@
 
     // Cedit
     import LinkToSource from "../Comps/LinkToSource.svelte";
+
+    // Print detection setup
+    import { onMount } from "svelte";
+    onMount(() => {
+        // Check if the query parameter exists in the URL
+        const urlParams = new URLSearchParams(window.location.search);
+        const hideOnPrintParam = urlParams.get('hideOnPrint');
+
+        // If the query parameter is not detected, reload the page with the parameter added
+        if (!hideOnPrintParam) {
+            window.location.href = `${window.location.href}?hideOnPrint=1`;
+        }
+    });
+
 </script>
 
+<div class="cv-info-container hide-on-print">
+    <div>
+        Under here is my CV for an Epos application. This page has been able to be saved as PDF.    
+        This can be done by pressing <div class="keyboard-key">P</div> + <div class="keyboard-key">CTRL</div>, then set scaling to 100% and no margins. Lastly, select save to PDF or print.
+        <br/>
+        <br/>
+        I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :(
+    </div>
+</div>
+
 <div class="cv-container-container include-in-print">
     <div class="cv-container sections decorations">
         <div id="left-section">
@@ -50,6 +74,35 @@
 </div> 
 
 <style lang="scss">
+    .cv-info-container {
+        height: 40mm;
+        background-color: #2b2a2a;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .keyboard-key {
+            display: inline;
+            padding-left: 1mm;
+            padding-right: 1mm;
+
+            border-radius: 2mm;
+
+            background-color: #3e3d3d;
+        }
+
+        > div {
+            width: 80%;
+            height: 60%;
+        }
+    }
+
+    @media print {
+    .hide-on-print {
+        display: none;
+    }
+}
+
     .cv-container-container{
         width: 100%;
         height: 100%;
@@ -127,9 +180,6 @@
 
                 // Disable interactivity for padding
                 pointer-events:none;
-                > * {
-                    pointer-events:all;
-                }
             }
         }
     }