Put filter clear button inside filter box

xdpirate · Mar 12, 2024 · 0a7eb3b · 0a7eb3b
1 parent cae9ff5
commit 0a7eb3b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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;