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

14
Props/Pages/Search.cshtml
View File

@ -8,16 +8,19 @@
<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="tear">
<div class="container invisible"> <div class="container invisible">
<h1 class="my-2 display-2">Configuration</h1> <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"> <div class="row justify-content-md-center">
<section class="col-lg"> <section class="col-lg">
<h3>Price</h3> <h3>Price</h3>
@ -94,7 +97,7 @@
<div class="mb-3"> <div class="mb-3">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" id="keep-unrated"> <input class="form-check-input" type="checkbox" id="keep-unrated">
<label class="form-check-label" for="keep-unrated">Keep Minimum Rating</label> <label class="form-check-label" for="keep-unrated">Keep Unrated Items</label>
</div> </div>
</div> </div>
</section> </section>
@ -105,6 +108,7 @@
</section> </section>
</div> </div>
</div> </div>
</div>
</div> </div>
@* TODO: Add results display and default results display *@ @* TODO: Add results display and default results display *@

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;