From 0a7eb3b7310bc628d916952fe04f8a05819cdc67 Mon Sep 17 00:00:00 2001
From: xdpirate <1757462+xdpirate@users.noreply.github.com>
Date: Tue, 12 Mar 2024 02:10:10 +0100
Subject: [PATCH] Put filter clear button inside filter box

---
 index.php          | 10 +++++-----
 js/startscripts.js | 15 +++++++++++----
 2 files changed, 16 insertions(+), 9 deletions(-)
diff --git a/index.php b/index.php
index 4e0e2ae..2d61959 100644
--- a/index.php
+++ b/index.php
@@ -77,7 +77,7 @@
     </head>
     
     <body>
-        <?php if(!isset($_GET['update'])) { ?><div id="modalbg" style="display: none;" onclick="document.getElementById('modalbg').style.display = 'none';">
+        <?php if(!isset($_GET['update'])) { ?><div id="modalbg" style="display: none;" onclick="this.style.display = 'none';">
             <div id="modal" onclick="event.stopPropagation();">
                 <form id="editForm">
                     <b>Name:</b>
@@ -172,7 +172,7 @@
                 <div class="tableWrapper" id="unreleasedWrapper">
                     <h2>Unreleased
                         <div class="searchbox">
-                            <input type="search" placeholder="Filter Unreleased..." oninput="filterTable('unreleased', this.value);" autocomplete="off"> <span class="pointer clearSearch" title="Clear filter" onclick="this.previousElementSibling.value = ''; filterTable('unreleased', '');">❌</span>
+                            <input type="search" placeholder="Filter Unreleased..." oninput="filterTable('unreleased', this.value);" autocomplete="off"> <span class="pointer clearSearch" title="Clear filter" onclick="this.previousElementSibling.value = ''; filterTable('unreleased', '');">x</span>
                         </div>
                     </h2>
 
@@ -240,7 +240,7 @@
                 <div class="tableWrapper" id="tbaWrapper">
                     <h2>Announced
                         <div class="searchbox">
-                            <input type="search" placeholder="Filter Announced..." oninput="filterTable('tba', this.value);" autocomplete="off"> <span class="pointer clearSearch" title="Clear filter" onclick="this.previousElementSibling.value = ''; filterTable('tba', '');">❌</span>
+                            <input type="search" placeholder="Filter Announced..." oninput="filterTable('tba', this.value);" autocomplete="off"> <span class="pointer clearSearch" title="Clear filter" onclick="this.previousElementSibling.value = ''; filterTable('tba', '');">x</span>
                         </div>
                     </h2>
 
@@ -283,7 +283,7 @@
                 <div class="tableWrapper" id="releasedWrapper">
                     <h2>Released
                         <div class="searchbox">
-                            <input type="search" placeholder="Filter Released..." oninput="filterTable('released', this.value);" autocomplete="off"> <span class="pointer clearSearch" title="Clear filter" onclick="this.previousElementSibling.value = ''; filterTable('released', '');">❌</span>
+                            <input type="search" placeholder="Filter Released..." oninput="filterTable('released', this.value);" autocomplete="off"> <span class="pointer clearSearch" title="Clear filter" onclick="this.previousElementSibling.value = ''; filterTable('released', '');">x</span>
                         </div>
                     </h2>
 
@@ -325,7 +325,7 @@
                 <div class="tableWrapper" id="collectionWrapper">
                     <h2>Collection
                         <div class="searchbox">
-                            <input type="search" placeholder="Filter Collection..." oninput="filterTable('collection', this.value);" autocomplete="off"> <span class="pointer clearSearch" title="Clear filter" onclick="this.previousElementSibling.value = ''; filterTable('collection', '');">❌</span>
+                            <input type="search" placeholder="Filter Collection..." oninput="filterTable('collection', this.value);" autocomplete="off"> <span class="pointer clearSearch" title="Clear filter" onclick="this.previousElementSibling.value = ''; filterTable('collection', '');">x</span>
                         </div>
                     </h2>
                     
diff --git a/js/startscripts.js b/js/startscripts.js
index 556e82f..5f6e6e7 100644
--- a/js/startscripts.js
+++ b/js/startscripts.js
@@ -230,18 +230,25 @@ function applyTheme(themeName) {
         }
 
         span.clearSearch {
+            display: inline-block;
             font-size: 0.6em;
+            position: relative;
+            left: -1.5em;
+            width: 0;
+            user-select: none;
         }
 
-        input[type=search] {
-            width: 15em;
-        }
-
+        
         input[type=search], input[type=text], input[type=date], input[type=button], input[type=submit] {
             border: 1px solid ${themes[themeName].foreground};
             border-radius: 10px;
             padding: 5px;
         }
+        
+        input[type=search] {
+            width: 15em;
+            padding-right: 1.5em;
+        }
 
         h1 > a {
             text-decoration: none;
