Skip to content

Commit

Permalink
feat /browse: make mobile friendly
Browse files Browse the repository at this point in the history
  • Loading branch information
@prplwtf
prplwtf committed Dec 29, 2024
1 parent ecf042b commit 1496eb8
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 17 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
wak.toml
7 changes: 7 additions & 0 deletions browse/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,13 @@
height: 40px !important;
}

@media screen and (max-width: 767px) {
#productSearch {
border-top-right-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
}
}

[data-bs-theme=light] .bp-fade { background-image: linear-gradient(to bottom, #ffffff00, #ffffff); }
[data-bs-theme=light] .bp-grid {
background-image:
Expand Down
106 changes: 89 additions & 17 deletions browse/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,34 +129,59 @@ <h1 class="display-4 fw-normal lh-1 mb-2 d-lg-none d-block text-center byte-txt"
<span id="filterTypeLabel">Products</span>
</button>
<ul class="dropdown-menu dropdown-menu-end gap-1 p-2 rounded-3 mx-0 border-0 shadow" aria-labelledby="filterDropdown">
<li><a class="dropdown-item rounded-2" id="toggleFilterProducts" data-filter="products">Products</a></li>
<li><a class="dropdown-item rounded-2" id="toggleFilterAuthors" data-filter="authors">Authors</a></li>
<li>
<a class="dropdown-item rounded-2" id="toggleFilterProducts" data-filter="products">
Products
</a>
</li>
<li>
<a class="dropdown-item rounded-2" id="toggleFilterAuthors" data-filter="authors">
Authors
</a>
</li>
</ul>
<input
type="text"
class="form-control bg-dark border-0"
id="productSearch"
placeholder="Search products..">

<span class="d-none d-md-block input-group-text border-0 pe-0"><i class="bi bi-sort-down"></i></span>
<button
id="filterDropdown"
class="btn btn-secondary bg-body-tertiary border-0 dropdown-toggle"
id="sortDropdown"
class="btn btn-secondary bg-body-tertiary border-0 dropdown-toggle d-none d-md-block"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<span id="sortLabel">Name</span>
</button>
<ul class="dropdown-menu dropdown-menu-end gap-1 p-2 rounded-3 mx-0 border-0 shadow" aria-labelledby="filterDropdown">
<li><a class="dropdown-item rounded-2" id="toggleSortName" data-sort="name">Name</a></li>
<li><a class="dropdown-item rounded-2" id="toggleSortCreated" data-sort="created">Created</a></li>
<li><a class="dropdown-item rounded-2" id="toggleSortAuthor" data-sort="author">Author</a></li>
<li><a class="dropdown-item rounded-2" id="toggleSortpopularity" data-sort="popularity">Popularity</a></li>
<li>
<a class="dropdown-item rounded-2" id="toggleSortName" data-sort="name">
Name
</a>
</li>
<li>
<a class="dropdown-item rounded-2" id="toggleSortCreated" data-sort="created">
Created
</a>
</li>
<li>
<a class="dropdown-item rounded-2" id="toggleSortAuthor" data-sort="author">
Author
</a>
</li>
<li>
<a class="dropdown-item rounded-2" id="toggleSortpopularity" data-sort="popularity">
Popularity
</a>
</li>
</ul>
</div>

<!-- Filters -->
<div class="d-sm-flex flex-row d-none" style="width: auto;">
<div class="d-md-flex flex-row d-none" style="width: auto;">
<div class="input-group flex-row me-2" style="flex-wrap: nowrap;">
<span class="input-group-text border-0">
<input class="form-check-input mt-0" type="checkbox" value="" id="filterExtensions">
Expand All @@ -170,7 +195,7 @@ <h1 class="display-4 fw-normal lh-1 mb-2 d-lg-none d-block text-center byte-txt"
<span class="input-group-text ps-0 border-0"><label for="filterThemes">Themes</label></span>
</div>
</div>
<div class="d-flex flex-row d-sm-none" style="width: auto;">
<div class="d-flex flex-row d-md-none" style="width: auto;">
<div class="input-group flex-row" style="flex-wrap: nowrap;">
<button
class="btn btn-secondary bg-body-tertiary border-0"
Expand All @@ -195,21 +220,63 @@ <h1 class="modal-title fs-5" id="filterModalToggleLabel"><i class="bi bi-filter"
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div>
<div class="mb-4">
<p>
<b>Extension type</b>
</p>
<div class="input-group mb-2">
<span class="input-group-text border-0">

<span class="input-group-text border-0 rounded-start-2">
<input class="form-check-input mt-0" type="checkbox" value="" onclick='document.getElementById("filterExtensions").click()' id="filterModalExtensions">
</span>
<span class="input-group-text ps-0 border-0"><label for="filterModalExtensions">Extensions</label></span>
</div>
<div class="input-group">
<span class="input-group-text border-0">
<span class="input-group-text ps-0 border-0 rounded-end-2 me-2"><label for="filterModalExtensions">Extensions</label></span>

<span class="input-group-text border-0 rounded-start-2">
<input class="form-check-input mt-0" type="checkbox" value="" onclick='document.getElementById("filterThemes").click()' id="filterModalThemes">
</span>
<span class="input-group-text ps-0 border-0"><label for="filterModalThemes">Themes</label></span>
<span class="input-group-text ps-0 border-0 rounded-end-2"><label for="filterModalThemes">Themes</label></span>

</div>
</div>
<div>
<p>
<b>Sorting</b>
</p>
<div class="input-group mb-2">

<span class="input-group-text border-0 pe-0"><i class="bi bi-sort-down"></i></span>
<button
id="mobileSortDropdown"
class="btn btn-secondary bg-body-tertiary border-0 dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<span id="mobileSortLabel">Name</span>
</button>
<ul class="dropdown-menu dropdown-menu-end gap-1 p-2 rounded-3 mx-0 border-0 shadow" aria-labelledby="filterDropdown">
<li>
<a class="dropdown-item rounded-2" id="mobileToggleSortName" data-sort="name">
Name
</a>
</li>
<li>
<a class="dropdown-item rounded-2" id="mobileToggleSortCreated" data-sort="created">
Created
</a>
</li>
<li>
<a class="dropdown-item rounded-2" id="mobileToggleSortAuthor" data-sort="author">
Author
</a>
</li>
<li>
<a class="dropdown-item rounded-2" id="mobileToggleSortpopularity" data-sort="popularity">
Popularity
</a>
</li>
</ul>

</div>
</div>
</div>
Expand Down Expand Up @@ -271,6 +338,7 @@ <h1 class="modal-title fs-5" id="filterModalToggleLabel"><i class="bi bi-filter"
<script>
const filterTypeLabel = document.getElementById("filterTypeLabel"),
sortLabel = document.getElementById("sortLabel"),
mobileSortLabel = document.getElementById("mobileSortLabel"),
searchInput = document.getElementById("productSearch");

/**
Expand Down Expand Up @@ -460,21 +528,25 @@ <h5 class="card-title text-truncate">${
switch (selectedSort) {
case "name":
sortLabel.textContent = "Name";
mobileSortLabel.textContent = "Name";
sortType = "name";
break;

case "created":
sortLabel.textContent = "Created";
mobileSortLabel.textContent = "Created";
sortType = "created";
break;

case "author":
sortLabel.textContent = "Author";
mobileSortLabel.textContent = "Author";
sortType = "author";
break;

case "popularity":
sortLabel.textContent = "Popularity";
mobileSortLabel.textContent = "Popularity";
sortType = "popularity";
break;
}
Expand Down

0 comments on commit 1496eb8

Please sign in to comment.