From 73e5bd9a86147ccc7135dfa3e017515c1ed6e5a1 Mon Sep 17 00:00:00 2001 From: Ben Vreeland Date: Sat, 15 Mar 2025 19:32:09 -0400 Subject: [PATCH] Moves reset button out of navigation bar --- core/calculator.css | 63 ++++++++++++++++++++++++------------------ core/calculator.html | 20 ++++++++------ core/src/calculator.ts | 6 +++- 3 files changed, 52 insertions(+), 37 deletions(-) diff --git a/core/calculator.css b/core/calculator.css index 28ad3c36..2034ed0b 100644 --- a/core/calculator.css +++ b/core/calculator.css @@ -70,58 +70,67 @@ body { .search_bar { margin-bottom: 10px; - -} - -.search_label_wrapper { - float:left; - padding: 5px 10px; border: 2px solid #8b90a1; - border-right: 0; - background: #D8D9ED; - border-radius: 5px 0 0 5px; -} -.search_label { + border-radius: 5px; + display: flex; + flex-direction: row; + justify-content: space-between; } .search_box_wrapper { - display: block; overflow: hidden; + flex-grow: 1; } .search_box { width: 100%; - box-sizing:border-box; + box-sizing: border-box; padding: 5px; margin: 0; color: #000; font-family: sans-serif; background-color: #fff; border: none; - border-top: 2px solid #8b90a1; - border-bottom: 2px solid #8b90a1; font-size: 1em; } - - - -.hide_unused_wrapper { - float:right; - padding: 5px 10px; - border: 2px solid #8b90a1; - border-radius: 0 5px 5px 0; +.search_bar_button { + padding: 5px 9px; + border: none; + border-left: 2px solid #8b90a1; + outline: none; background: #FFF; transition: background-color 0.1s linear, color 0.1s linear; + font-size: inherit; + cursor: pointer; +} + +#search_label_wrapper { + background: #D8D9ED; + border: none; + border-right: 2px solid #8b90a1; + cursor: none; +} +@media (max-width:768px) { + #search_label_wrapper { + display: none; + } +} +.hide_unused_wrapper { + display: inline-block; } .hide_unused_wrapper:hover { background: #D8D9ED; } - .hide_unused_label { - cursor: pointer; + cursor: inherit; +} +#reset_item_count { + display: inline-block; + background-color: #ffbcbc +} +#reset_item_count:hover { + background-color: #ff8282 } - - #item_list { diff --git a/core/calculator.html b/core/calculator.html index 918f329c..3c0233d9 100644 --- a/core/calculator.html +++ b/core/calculator.html @@ -30,7 +30,6 @@
-
Reset Item Counts
Report An Issue
Contribute
About
 @@ -57,16 +56,19 @@
-
- - -
-
+
- - - +
+ +
+
+
+ + +
+ +
diff --git a/core/src/calculator.ts b/core/src/calculator.ts index fa1c44c9..c3029c4b 100644 --- a/core/src/calculator.ts +++ b/core/src/calculator.ts @@ -30,8 +30,12 @@ const inventory_amount_input_elem = document.getElementById("i | "Reset Item Counts" Button Logic | \******************************************************************************/ function clear_item_counts() { + if (!confirm("Are you sure you want to clear all items?")) { + return; + } + document.querySelectorAll(".desired_item").forEach((desired_item) => { - let field = desired_item.querySelector(".desired_item_count"); + const field = desired_item.querySelector(".desired_item_count"); field.value = ""; set_textbox_background(field); });