Added Bootstrap collapse animation to configuration.
This commit is contained in:
parent
22dd766db3
commit
d91acd36f7
@ -8,101 +8,105 @@
|
||||
<div class="my-4 less-concise mx-auto">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="What are you looking for?" aria-label="Search" aria-describedby="search-btn" id="search-bar">
|
||||
<input type="checkbox" class="btn-check" id="config-check-toggle" autocomplete="off">
|
||||
<label class="btn btn-outline-secondary" for="config-check-toggle"><i class="bi bi-sliders"></i></label>
|
||||
<button class="btn btn-outline-secondary" type="button" id="configuration-toggle" data-bs-toggle="collapse" data-bs-target="#configuration"><i class="bi bi-sliders"></i></button>
|
||||
<button class="btn btn-outline-primary" type="button" id="search-btn">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tear d-none" id="configuration">
|
||||
<div class="container invisible">
|
||||
<h1 class="my-2 display-2">Configuration</h1>
|
||||
<div class="row justify-content-md-center">
|
||||
<section class="col-lg">
|
||||
<h3>Price</h3>
|
||||
<div class="mb-3">
|
||||
<label for="max-price" class="form-label">Maximum Price</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<input class="form-check-input mt-0" type="checkbox" id="max-price-enabled">
|
||||
<div class="collapse" id="configuration">
|
||||
<div class="tear">
|
||||
<div class="container invisible">
|
||||
<div class="d-flex">
|
||||
<h1 class="my-2 display-2 me-auto">Configuration</h1>
|
||||
<button class="btn align-self-start" type="button" id="configuration-close" data-bs-toggle="collapse" data-bs-target="#configuration"><i class="bi bi-x-lg"></i></button>
|
||||
</div>
|
||||
<div class="row justify-content-md-center">
|
||||
<section class="col-lg">
|
||||
<h3>Price</h3>
|
||||
<div class="mb-3">
|
||||
<label for="max-price" class="form-label">Maximum Price</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<input class="form-check-input mt-0" type="checkbox" id="max-price-enabled">
|
||||
</div>
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="number" class="form-control" min="0" id="max-price">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="number" class="form-control" min="0" id="max-price">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="min-price" class="form-label">Minimum Price</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="number" class="form-control" min="0" id="min-price">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="max-shipping" class="form-label">Maximum Shipping Fee</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<input class="form-check-input mt-0" type="checkbox" id="max-shipping-enabled">
|
||||
<div class="mb-3">
|
||||
<label for="min-price" class="form-label">Minimum Price</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="number" class="form-control" min="0" id="min-price">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="number" class="form-control" min="0" id="max-shipping">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="keep-unknown-shipping">
|
||||
<label class="form-check-label" for="keep-unknown-shipping">Keep Unknown Shipping</label>
|
||||
<div class="mb-3">
|
||||
<label for="max-shipping" class="form-label">Maximum Shipping Fee</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<input class="form-check-input mt-0" type="checkbox" id="max-shipping-enabled">
|
||||
</div>
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="number" class="form-control" min="0" id="max-shipping">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-lg">
|
||||
<h3>Metrics</h3>
|
||||
<div class="mb-3">
|
||||
<label for="min-purchases" class="form-label">Minimum Purchases</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" min="0" id="min-purchases">
|
||||
<span class="input-group-text">Purchases</span>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="keep-unknown-shipping">
|
||||
<label class="form-check-label" for="keep-unknown-shipping">Keep Unknown Shipping</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="keep-unknown-purchases">
|
||||
<label class="form-check-label" for="keep-unknown-purchases">Keep Unknown Purchases</label>
|
||||
</section>
|
||||
<section class="col-lg">
|
||||
<h3>Metrics</h3>
|
||||
<div class="mb-3">
|
||||
<label for="min-purchases" class="form-label">Minimum Purchases</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" min="0" id="min-purchases">
|
||||
<span class="input-group-text">Purchases</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="min-reviews" class="form-label">Minimum Reviews</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" min="0" id="min-reviews">
|
||||
<span class="input-group-text">Reviews</span>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="keep-unknown-purchases">
|
||||
<label class="form-check-label" for="keep-unknown-purchases">Keep Unknown Purchases</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="keep-unknown-reviews">
|
||||
<label class="form-check-label" for="keep-unknown-reviews">Keep Unknown Number of Reviews</label>
|
||||
<div class="mb-3">
|
||||
<label for="min-reviews" class="form-label">Minimum Reviews</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" min="0" id="min-reviews">
|
||||
<span class="input-group-text">Reviews</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="min-rating" class="form-label">Minimum Rating</label>
|
||||
<input type="range" class="form-range" id="min-rating" min="0" max="100" step="1">
|
||||
<div id="min-rating-display" class="form-text"></div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="keep-unrated">
|
||||
<label class="form-check-label" for="keep-unrated">Keep Minimum Rating</label>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="keep-unknown-reviews">
|
||||
<label class="form-check-label" for="keep-unknown-reviews">Keep Unknown Number of Reviews</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-md">
|
||||
<h3>Shops Enabled</h3>
|
||||
<div class="mb-3 px-3" id="shop-checkboxes">
|
||||
</div>
|
||||
</section>
|
||||
<div class="mb-1">
|
||||
<label for="min-rating" class="form-label">Minimum Rating</label>
|
||||
<input type="range" class="form-range" id="min-rating" min="0" max="100" step="1">
|
||||
<div id="min-rating-display" class="form-text"></div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="keep-unrated">
|
||||
<label class="form-check-label" for="keep-unrated">Keep Unrated Items</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-md">
|
||||
<h3>Shops Enabled</h3>
|
||||
<div class="mb-3 px-3" id="shop-checkboxes">
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -22,18 +22,21 @@ async function main() {
|
||||
await setupInitialValues((await apiHttp.get("/Search/Default/Outline/Filters")).data);
|
||||
await setupShopToggles((await apiHttp.get("/Search/Shops/Available")).data);
|
||||
|
||||
document.getElementById("configuration").querySelector(".invisible").classList.remove("invisible"); // Load completed, show the UI.
|
||||
document.querySelector("#configuration .invisible").classList.remove("invisible"); // Load completed, show the UI.
|
||||
}
|
||||
|
||||
function setupInteractiveBehavior() {
|
||||
document.getElementById("config-check-toggle").addEventListener("change", function () {
|
||||
let configElem = document.getElementById("configuration");
|
||||
if (this.checked) {
|
||||
configElem.classList.remove("d-none");
|
||||
} else {
|
||||
configElem.classList.add("d-none");
|
||||
}
|
||||
let configurationElem = document.getElementById("configuration");
|
||||
let configurationToggle = document.getElementById("configuration-toggle");
|
||||
configurationElem.addEventListener("show.bs.collapse", function () {
|
||||
console.log("shown");
|
||||
configurationToggle.classList.add("active");
|
||||
});
|
||||
configurationElem.addEventListener("hidden.bs.collapse", function () {
|
||||
console.log("closed");
|
||||
configurationToggle.classList.remove("active");
|
||||
});
|
||||
|
||||
|
||||
inputs.maxPriceEnabled.addEventListener("change", function () {
|
||||
inputs.maxPrice.disabled = !this.checked;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user