Skip to content

Commit a4dac36

Browse files
prplwtfprplwtf
committed
feat: this is fine
1 parent 53a8b95 commit a4dac36

File tree

1 file changed

+104
-44
lines changed

1 file changed

+104
-44
lines changed

‎browse/index.html

Lines changed: 104 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -110,55 +110,99 @@ <h1 class="display-4 fw-normal lh-1 mb-2 d-lg-none d-block text-center byte-txt"
110110
</div>
111111
</div>
112112

113-
<!-- Sorting -->
114-
<div class="container mb-4 position-sticky g-5" style="top: 90px; z-index: 5;">
115-
<div
116-
class="row bg-dark-subtle rounded-3 border py-2"
117-
style="border: rgba(255,255,255,0.15) 1px;"
118-
>
119-
<div class="d-flex flex-row py-1">
120-
121-
<!-- Search -->
122-
<div class="input-group me-sm-2">
123-
<span class="input-group-text border-0 pe-0"><i class="bi bi-search"></i></span>
124-
<button
125-
id="filterDropdown"
126-
class="btn btn-secondary bg-body-tertiary border-0 dropdown-toggle"
127-
type="button"
128-
data-bs-toggle="dropdown"
129-
aria-expanded="false"
130-
>
131-
<span id="filterTypeLabel">Products</span>
132-
</button>
133-
<ul class="dropdown-menu dropdown-menu-end gap-1 p-2 rounded-3 mx-0 border-0 shadow" aria-labelledby="filterDropdown">
134-
<li><a class="dropdown-item rounded-2" id="toggleFilterProducts" data-filter="products">Products</a></li>
135-
<li><a class="dropdown-item rounded-2" id="toggleFilterAuthors" data-filter="authors">Authors</a></li>
136-
</ul>
137-
<input
138-
type="text"
139-
class="form-control bg-dark border-0"
140-
id="productSearch"
141-
placeholder="Search products..">
142-
</div>
113+
<!-- Sorting -->
114+
<div class="container mb-4 position-sticky g-5" style="top: 90px; z-index: 5;">
115+
<div
116+
class="row bg-dark-subtle rounded-3 border py-2"
117+
style="border: rgba(255,255,255,0.15) 1px;"
118+
>
119+
<div class="d-flex flex-row py-1">
120+
121+
<!-- Search -->
122+
<div class="input-group me-2">
123+
<span class="input-group-text border-0 pe-0"><i class="bi bi-search"></i></span>
124+
<button
125+
id="filterDropdown"
126+
class="btn btn-secondary bg-body-tertiary border-0 dropdown-toggle"
127+
type="button"
128+
data-bs-toggle="dropdown"
129+
aria-expanded="false"
130+
>
131+
<span id="filterTypeLabel">Products</span>
132+
</button>
133+
<ul class="dropdown-menu dropdown-menu-end gap-1 p-2 rounded-3 mx-0 border-0 shadow" aria-labelledby="filterDropdown">
134+
<li><a class="dropdown-item rounded-2" id="toggleFilterProducts" data-filter="products">Products</a></li>
135+
<li><a class="dropdown-item rounded-2" id="toggleFilterAuthors" data-filter="authors">Authors</a></li>
136+
</ul>
137+
<input
138+
type="text"
139+
class="form-control bg-dark border-0"
140+
id="productSearch"
141+
placeholder="Search products..">
142+
</div>
143143

144-
<!-- Filters -->
145-
<div class="d-sm-flex flex-row d-none" style="width: auto;">
146-
<div class="input-group flex-row me-2" style="flex-wrap: nowrap;">
147-
<span class="input-group-text border-0">
148-
<input class="form-check-input mt-0" type="checkbox" value="" id="filterExtensions">
149-
</span>
150-
<span class="input-group-text ps-0 border-0"><label for="filterExtensions">Extensions</label></span>
144+
<!-- Filters -->
145+
<div class="d-sm-flex flex-row d-none" style="width: auto;">
146+
<div class="input-group flex-row me-2" style="flex-wrap: nowrap;">
147+
<span class="input-group-text border-0">
148+
<input class="form-check-input mt-0" type="checkbox" value="" id="filterExtensions">
149+
</span>
150+
<span class="input-group-text ps-0 border-0"><label for="filterExtensions">Extensions</label></span>
151+
</div>
152+
<div class="input-group flex-row" style="flex-wrap: nowrap;">
153+
<span class="input-group-text border-0">
154+
<input class="form-check-input mt-0" type="checkbox" value="" id="filterThemes">
155+
</span>
156+
<span class="input-group-text ps-0 border-0"><label for="filterThemes">Themes</label></span>
157+
</div>
158+
</div>
159+
<div class="d-flex flex-row d-sm-none" style="width: auto;">
160+
<div class="input-group flex-row" style="flex-wrap: nowrap;">
161+
<button
162+
class="btn btn-secondary bg-body-tertiary border-0"
163+
type="button"
164+
aria-expanded="false"
165+
data-bs-toggle="modal"
166+
data-bs-target="#filterModal"
167+
>
168+
<i class="bi bi-three-dots"></i>
169+
</button>
170+
</div>
171+
</div>
151172
</div>
152-
<div class="input-group flex-row" style="flex-wrap: nowrap;">
153-
<span class="input-group-text border-0">
154-
<input class="form-check-input mt-0" type="checkbox" value="" id="filterThemes">
155-
</span>
156-
<span class="input-group-text ps-0 border-0"><label for="filterThemes">Themes</label></span>
173+
</div>
174+
</div>
175+
176+
<div class="modal fade" id="filterModal" aria-hidden="true" aria-labelledby="filterModalToggleLabel" tabindex="-1">
177+
<div class="modal-dialog modal-dialog-centered">
178+
<div class="modal-content">
179+
<div class="modal-header">
180+
<h1 class="modal-title fs-5" id="filterModalToggleLabel"><i class="bi bi-filter"></i> Filters</h1>
181+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
182+
</div>
183+
<div class="modal-body">
184+
<div>
185+
<p>
186+
<b>Extension type</b>
187+
</p>
188+
<div class="input-group mb-2">
189+
<span class="input-group-text border-0">
190+
<input class="form-check-input mt-0" type="checkbox" value="" onclick='document.getElementById("filterExtensions").click()' id="filterModalExtensions">
191+
</span>
192+
<span class="input-group-text ps-0 border-0"><label for="filterModalExtensions">Extensions</label></span>
193+
</div>
194+
<div class="input-group">
195+
<span class="input-group-text border-0">
196+
<input class="form-check-input mt-0" type="checkbox" value="" onclick='document.getElementById("filterThemes").click()' id="filterModalThemes">
197+
</span>
198+
<span class="input-group-text ps-0 border-0"><label for="filterModalThemes">Themes</label></span>
199+
</div>
200+
</div>
201+
</div>
157202
</div>
158203
</div>
159204
</div>
160-
</div>
161-
</div>
205+
162206

163207

164208
<!-- Products -->
@@ -364,6 +408,7 @@ <h5 class="card-title text-truncate">${product.name} <span class="author-tag">by
364408
var filterExtensions = document.getElementById('filterExtensions')
365409

366410
function handleThemeFilter() {
411+
syncFilters()
367412
var a = document.getElementById("css-filter-themes");
368413
if (filterThemes.checked) {
369414
param('1', 'y')
@@ -375,6 +420,7 @@ <h5 class="card-title text-truncate">${product.name} <span class="author-tag">by
375420
byteconfused()
376421
}
377422
function handleExtensionFilter() {
423+
syncFilters()
378424
var a = document.getElementById("css-filter-extensions");
379425
if (filterExtensions.checked) {
380426
param('2', 'y')
@@ -397,6 +443,19 @@ <h5 class="card-title text-truncate">${product.name} <span class="author-tag">by
397443
else byte.style.display = "none"
398444
}
399445

446+
function syncFilters() {
447+
if(filterExtensions.checked) {
448+
document.getElementById('filterModalExtensions').checked = true
449+
} else {
450+
document.getElementById('filterModalExtensions').checked = false
451+
}
452+
if(filterThemes.checked) {
453+
document.getElementById('filterModalThemes').checked = true
454+
} else {
455+
document.getElementById('filterModalThemes').checked = false
456+
}
457+
}
458+
400459
filterThemes.addEventListener('change', handleThemeFilter)
401460
filterExtensions.addEventListener('change', handleExtensionFilter)
402461

@@ -415,6 +474,7 @@ <h5 class="card-title text-truncate">${product.name} <span class="author-tag">by
415474
else if(url.searchParams.get('2') == 'n') { b.innerHTML = ".filter-extensions { display: none }"; d.checked = false }
416475
else { b.innerHTML = ""; d.checked = true }
417476
byteconfused()
477+
syncFilters()
418478
}
419479
filter()
420480
byteconfused()

0 commit comments

Comments
 (0)