diff --git a/css/style.css b/css/style.css
index 89639943b..56a6a5d31 100644
--- a/css/style.css
+++ b/css/style.css
@@ -372,13 +372,21 @@ a[href="javascript:;"] {
display: none;
}
#index-search {
+ padding-right: 1.5em;
width: 100px;
transition: color .25s, border-color .25s, width .25s;
}
-#index-search:hover,
-#index-search:focus {
+#index-search[data-searching] {
width: 200px;
}
+#index-search-clear {
+ color: gray;
+ margin-left: -1.25em;
+}
+#index-search::-webkit-search-cancel-button,
+#index-search:not([data-searching]) + #index-search-clear {
+ display: none;
+}
.summary {
text-decoration: none;
}
diff --git a/html/General/Index-navlinks.html b/html/General/Index-navlinks.html
index 7d3b04da7..cb69adae9 100644
--- a/html/General/Index-navlinks.html
+++ b/html/General/Index-navlinks.html
@@ -1,3 +1,4 @@
[Catalog]
[]
+
diff --git a/src/General/Index.coffee b/src/General/Index.coffee
index 77b10aa5f..5a492f7fe 100644
--- a/src/General/Index.coffee
+++ b/src/General/Index.coffee
@@ -58,6 +58,7 @@ Index =
$.on window, 'popstate', @cb.popstate
$.on @pagelist, 'click', @cb.pageNav
$.on @searchInput, 'input', @onSearchInput
+ $.on $('#index-search-clear', @navLinks), 'click', @clearSearch
$.asap (-> $('.pagelist', doc) or d.readyState isnt 'loading'), ->
$.replace $('.board'), Index.root
$.replace $('.pagelist'), Index.pagelist
@@ -297,7 +298,7 @@ Index =
offset = 0
for threadRoot, i in Index.sortedNodes by 2 when Get.threadFromRoot(threadRoot).isOnTop
Index.sortedNodes.splice offset++ * 2, 0, Index.sortedNodes.splice(i, 2)...
- if Index.searchInput.value
+ if Index.isSearching
Index.sortedNodes = Index.querySearch(Index.searchInput.value) or Index.sortedNodes
buildIndex: ->
if Conf['Index Mode'] is 'paged'
@@ -311,7 +312,15 @@ Index =
$.event 'IndexBuild', nodes
$.add Index.root, nodes
+ isSearching: false
+ clearSearch: ->
+ Index.searchInput.value = null
+ Index.onSearchInput()
onSearchInput: ->
+ if Index.isSearching = !!Index.searchInput.value.trim()
+ Index.searchInput.dataset.searching = 1
+ else
+ delete Index.searchInput.dataset.searching
Index.sort()
Index.buildIndex()
querySearch: (query) ->