ydeng/props
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Bootstrap collapse animation to configuration.

Browse Source
This commit is contained in:
Harrison Deng 2021-07-22 21:24:39 -05:00
parent 22dd766db3
commit d91acd36f7
2 changed files with 95 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
Props/Pages/Search.cshtml
View File

@ -8,101 +8,105 @@
<div class="my-4 less-concise mx-auto"> <div class="my-4 less-concise mx-auto">
<div class="input-group"> <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="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"> <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>
<label class="btn btn-outline-secondary" for="config-check-toggle"><i class="bi bi-sliders"></i></label>
<button class="btn btn-outline-primary" type="button" id="search-btn">Search</button> <button class="btn btn-outline-primary" type="button" id="search-btn">Search</button>
</div> </div>
</div> </div>
</div> </div>
<div class="tear d-none" id="configuration"> <div class="collapse" id="configuration">
<div class="container invisible"> <div class="tear">
<h1 class="my-2 display-2">Configuration</h1> <div class="container invisible">
<div class="row justify-content-md-center"> <div class="d-flex">
<section class="col-lg"> <h1 class="my-2 display-2 me-auto">Configuration</h1>
<h3>Price</h3> <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 class="mb-3"> </div>
<label for="max-price" class="form-label">Maximum Price</label> <div class="row justify-content-md-center">
<div class="input-group"> <section class="col-lg">
<div class="input-group-text"> <h3>Price</h3>
<input class="form-check-input mt-0" type="checkbox" id="max-price-enabled"> <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> </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> <div class="mb-3">
<div class="mb-3"> <label for="min-price" class="form-label">Minimum Price</label>
<label for="min-price" class="form-label">Minimum Price</label> <div class="input-group">
<div class="input-group"> <span class="input-group-text">$</span>
<span class="input-group-text">$</span> <input type="number" class="form-control" min="0" id="min-price">
<input type="number" class="form-control" min="0" id="min-price"> <span class="input-group-text">.00</span>
<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> </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> <div class="mb-3">
<div class="mb-3"> <label for="max-shipping" class="form-label">Maximum Shipping Fee</label>
<div class="form-check"> <div class="input-group">
<input class="form-check-input" type="checkbox" id="keep-unknown-shipping"> <div class="input-group-text">
<label class="form-check-label" for="keep-unknown-shipping">Keep Unknown Shipping</label> <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>
</div> <div class="mb-3">
</section> <div class="form-check">
<section class="col-lg"> <input class="form-check-input" type="checkbox" id="keep-unknown-shipping">
<h3>Metrics</h3> <label class="form-check-label" for="keep-unknown-shipping">Keep Unknown Shipping</label>
<div class="mb-3"> </div>
<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> </section>
<div class="mb-3"> <section class="col-lg">
<div class="form-check"> <h3>Metrics</h3>
<input class="form-check-input" type="checkbox" id="keep-unknown-purchases"> <div class="mb-3">
<label class="form-check-label" for="keep-unknown-purchases">Keep Unknown Purchases</label> <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> <div class="mb-3">
<div class="mb-3"> <div class="form-check">
<label for="min-reviews" class="form-label">Minimum Reviews</label> <input class="form-check-input" type="checkbox" id="keep-unknown-purchases">
<div class="input-group"> <label class="form-check-label" for="keep-unknown-purchases">Keep Unknown Purchases</label>
<input type="number" class="form-control" min="0" id="min-reviews"> </div>
<span class="input-group-text">Reviews</span>
</div> </div>
</div> <div class="mb-3">
<div class="mb-3"> <label for="min-reviews" class="form-label">Minimum Reviews</label>
<div class="form-check"> <div class="input-group">
<input class="form-check-input" type="checkbox" id="keep-unknown-reviews"> <input type="number" class="form-control" min="0" id="min-reviews">
<label class="form-check-label" for="keep-unknown-reviews">Keep Unknown Number of Reviews</label> <span class="input-group-text">Reviews</span>
</div>
</div> </div>
</div> <div class="mb-3">
<div class="mb-1"> <div class="form-check">
<label for="min-rating" class="form-label">Minimum Rating</label> <input class="form-check-input" type="checkbox" id="keep-unknown-reviews">
<input type="range" class="form-range" id="min-rating" min="0" max="100" step="1"> <label class="form-check-label" for="keep-unknown-reviews">Keep Unknown Number of Reviews</label>
<div id="min-rating-display" class="form-text"></div> </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> </div>
</div> <div class="mb-1">
</section> <label for="min-rating" class="form-label">Minimum Rating</label>
<section class="col-md"> <input type="range" class="form-range" id="min-rating" min="0" max="100" step="1">
<h3>Shops Enabled</h3> <div id="min-rating-display" class="form-text"></div>
<div class="mb-3 px-3" id="shop-checkboxes"> </div>
</div> <div class="mb-3">
</section> <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> </div>
</div> </div>

19
Props/assets/js/specific/search.js
View File

@ -22,18 +22,21 @@ async function main() {
await setupInitialValues((await apiHttp.get("/Search/Default/Outline/Filters")).data); await setupInitialValues((await apiHttp.get("/Search/Default/Outline/Filters")).data);
await setupShopToggles((await apiHttp.get("/Search/Shops/Available")).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() { function setupInteractiveBehavior() {
document.getElementById("config-check-toggle").addEventListener("change", function () { let configurationElem = document.getElementById("configuration");
let configElem = document.getElementById("configuration"); let configurationToggle = document.getElementById("configuration-toggle");
if (this.checked) { configurationElem.addEventListener("show.bs.collapse", function () {
configElem.classList.remove("d-none"); console.log("shown");
} else { configurationToggle.classList.add("active");
configElem.classList.add("d-none");
}
}); });
configurationElem.addEventListener("hidden.bs.collapse", function () {
console.log("closed");
configurationToggle.classList.remove("active");
});
inputs.maxPriceEnabled.addEventListener("change", function () { inputs.maxPriceEnabled.addEventListener("change", function () {
inputs.maxPrice.disabled = !this.checked; inputs.maxPrice.disabled = !this.checked;