diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css index 63566c3..c62d21e 100644 --- a/src/main/resources/static/main.css +++ b/src/main/resources/static/main.css @@ -42,6 +42,7 @@ header { left: 0; z-index: 1; } + #tool-bar { display: flex; flex-direction: row; @@ -77,18 +78,6 @@ header { text-align: center; } - -/* -#search .datasets:empty { - background: url("sad-looking-glass.svg"); - height: 7rem; - width: 7rem; - padding: var(--pad-main); -} - - */ - - .hidden { display: none; } @@ -103,10 +92,6 @@ header { gap: 1rem; } - - - - @container (width < 60ch) { .datasets { grid-template-columns: 1fr; @@ -133,7 +118,7 @@ header { gap: .5em; } /* Buttons */ -.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn { +.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #reset-tools-btn { background: var(--icon-url) no-repeat; background-size: contain; border: none; @@ -163,6 +148,11 @@ header { --icon-size: 1rem; } +#reset-tools-btn { + --icon-url: url(reset.svg); + --icon-size: 1rem; +} + #sort-btn { --icon-url: url(sort.svg); --icon-size: 1rem; diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 28c6acc..aa82a16 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -15,6 +15,7 @@ const filterButton = document.getElementById("filter-btn"); const searchButton = document.getElementById("search-btn"); const searchBar = document.getElementById("search-entry"); const sortButton = document.getElementById("sort-btn"); +const resetButton = document.getElementById("reset-tools-btn"); const upvoteButtons = document.getElementsByClassName("upvote-btn"); const downvoteButtons = document.getElementsByClassName("downvote-btn"); export const searchSection = document.getElementById("search"); @@ -32,7 +33,9 @@ addButton.addEventListener("click", () => { filterButton.addEventListener("change", () => { const filterString = filterButton.value; - filter(filterString); + if (filterString !== filterButton.querySelector("#default-filter").value) { + filter(filterString); + } }); searchButton.addEventListener("click", () => { @@ -61,6 +64,13 @@ sortButton.addEventListener("change", () => { sort(sortString); }); +resetButton.addEventListener("click", () => { + searchBar.value = ""; + filterButton.value = filterButton.querySelector("#default-filter").value; + sortButton.value = sortButton.querySelector("#default-sort").value; + updateSections(); +}) + // Consider moving this to datasets.js completely const upvoteButtonClickListener = e => { const entryID = e.target.parentElement.parentElement.dataset.id; @@ -86,6 +96,7 @@ function navigateToAdd() { } function filter(filterString) { + updateSections(); filterString = filterString.toUpperCase(); let fetchURL = new URL(apiEndpoint, baseURL); fetchURL.searchParams.append("type", filterString); @@ -95,9 +106,9 @@ function filter(filterString) { } function search(searchString) { + updateSections(); let fetchURL = new URL(apiEndpoint + "/search", baseURL); fetchURL.searchParams.append("search", searchString.length === 0 ? "%" : searchString); - console.log(fetchURL); // TODO: remove fetchQuery(fetchURL); } @@ -109,6 +120,7 @@ function sort(sortString) { } else { query[1] = "desc"; } + updateSections(); let fetchURL = new URL(apiEndpoint, baseURL); fetchURL.searchParams.append("sort", query[0]); fetchURL.searchParams.append("direction", query[1]); @@ -140,14 +152,17 @@ function incrementPageCount() { } function updateSections() { - if (searchBar.value === "") { + if (searchBar.value === "" && sortButton.value === sortButton.querySelector("#default-sort").value + && filterButton.value === filterButton.querySelector("#default-filter").value) { searchSection.classList.add("hidden"); recentSection.classList.remove("hidden"); mostLikedSection.classList.remove("hidden"); + resetButton.classList.add("hidden"); } else { searchSection.classList.remove("hidden"); recentSection.classList.add("hidden"); mostLikedSection.classList.add("hidden"); + resetButton.classList.remove("hidden"); } } diff --git a/src/main/resources/static/reset.svg b/src/main/resources/static/reset.svg new file mode 100644 index 0000000..6915802 --- /dev/null +++ b/src/main/resources/static/reset.svg @@ -0,0 +1,52 @@ + + + + diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index a16f045..c894c6a 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -32,8 +32,9 @@
+