From 31763528bf4da5d4aed829e49dfceee153773cca Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Fri, 15 Apr 2022 04:19:05 +0700
Subject: [PATCH] feat: add image resize percent

---
 web/app/src/EditPostPanel.svelte |  2 +-
 web/app/src/ViewPostPanel.svelte |  2 +-
 web/app/src/routes/Post.svelte   | 14 +++++++++++---
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/web/app/src/EditPostPanel.svelte b/web/app/src/EditPostPanel.svelte
index 17d0a30..392a618 100644
--- a/web/app/src/EditPostPanel.svelte
+++ b/web/app/src/EditPostPanel.svelte
@@ -56,7 +56,7 @@
                 <strong>Original:</strong>
             </div>
             <div class="row">
-                <a href={post.image_path}>Image</a>
+                <a href={post.image_path} target="_blank">Image</a>
             </div>
         </div>
         <div class="panel-block column">
diff --git a/web/app/src/ViewPostPanel.svelte b/web/app/src/ViewPostPanel.svelte
index a36da9e..c153cbc 100644
--- a/web/app/src/ViewPostPanel.svelte
+++ b/web/app/src/ViewPostPanel.svelte
@@ -26,7 +26,7 @@
             <strong>Original:</strong>
         </div>
         <div class="row">
-            <a href={post.image_path}>Image</a>
+            <a href={post.image_path} target="_blank">Image</a>
         </div>
     </div>
     <div class="panel-block column">
diff --git a/web/app/src/routes/Post.svelte b/web/app/src/routes/Post.svelte
index 845a84c..47a3593 100644
--- a/web/app/src/routes/Post.svelte
+++ b/web/app/src/routes/Post.svelte
@@ -40,6 +40,13 @@
     const toggleEditMenu = () => {
         editMenuShown = !editMenuShown;
     };
+
+    let imagePercentage = "0%";
+
+    $: {
+        if (post)
+            imagePercentage = ((1000 * 100) / post.width).toFixed(0) + "%";
+    }
 </script>
 
 {#if post}
@@ -82,8 +89,10 @@
                 <div class="column box">
                     {#if post.width > 1000}
                         <div class="notification is-info">
-                            The image has been resized due to size. The original
-                            image link is in the sidebar
+                            Resized to {imagePercentage} of the original image.
+                            <a href={post.image_path} target="_blank"
+                                >View original</a
+                            >
                         </div>
                         <figure class="image">
                             <img alt={post.id} src={post.preview_path} />
@@ -97,5 +106,4 @@
             </div>
         </section>
     </div>
-
 {/if}