From b5dd4ba1d63ce852fb0acf2d8b03f89ab82943e0 Mon Sep 17 00:00:00 2001
From: jonasled <git@jonasled.de>
Date: Tue, 9 Mar 2021 22:35:57 +0100
Subject: [PATCH] add close button to image zoom dialog

---
 scss/_dialog.scss | 22 ++++++++++++++++++++++
 ts/dialog.ts      |  7 +++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/scss/_dialog.scss b/scss/_dialog.scss
index 1e49c54..3165f3e 100644
--- a/scss/_dialog.scss
+++ b/scss/_dialog.scss
@@ -31,3 +31,25 @@
     width: auto;
   }
 }
+
+a.dialogClose{
+  float:right;
+  margin-top:-30px;
+  margin-right:-30px;
+  cursor:pointer;
+  color: #fff;
+  border: 1px solid #AEAEAE;
+  border-radius: 30px;
+  background: #605F61;
+  font-size: 31px;
+  font-weight: bold;
+  display: inline-block;
+  line-height: 0;
+  padding: 11px 3px;
+  text-decoration: none;
+}
+
+.dialogClose:before {
+  content: "×";
+
+}
diff --git a/ts/dialog.ts b/ts/dialog.ts
index d101421..8e1dcc4 100644
--- a/ts/dialog.ts
+++ b/ts/dialog.ts
@@ -7,14 +7,17 @@ function createDialogImage(url:string) {
 }
 
 function createDialogHTML(html:string, customClasses = "") {
-    var dialog = document.createElement("div");
+    let dialog = document.createElement("div");
     dialog.classList.add("dialog");
     dialog.onclick = function () {
         fade(dialog, -0.04, true);
     }
 
     dialog.innerHTML = `
-    <div class="dialogContent ${customClasses}">${html}</div>`;
+    <div class="dialogContent ${customClasses}">
+    <a class="dialogClose"></a>
+        ${html}
+    </div>`;
 
     document.body.appendChild(dialog);
     fade(dialog, 0.04);