Skip to content

App Loader: Add dropdowns for sorting and filtering #4150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
RKBoss6 wants to merge 15 commits into
base: master
Choose a base branch
from
Draft

App Loader: Add dropdowns for sorting and filtering #4150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3f00839
Add styles for menu items and dropdowns
RKBoss6 Feb 3, 2026
6207a03
Update index.html
RKBoss6 Feb 3, 2026
fe519d2
Remove duplicate 'Favourites' menu item
RKBoss6 Feb 3, 2026
32b588f
Update for better menus/name explore to random
RKBoss6 Feb 3, 2026
3eb3517
Reduce border-radius of menu item link for concentricity
RKBoss6 Feb 3, 2026
8c3b644
Update css/main.css
RKBoss6 Feb 4, 2026
5558f57
Update css/main.css
RKBoss6 Feb 4, 2026
87358b1
Update index.html
RKBoss6 Feb 4, 2026
2df0684
Update index.html
RKBoss6 Feb 4, 2026
bd05443
Update index.html
RKBoss6 Feb 4, 2026
c4246d8
Update index.html
RKBoss6 Feb 4, 2026
4a5697e
Update index.html
RKBoss6 Feb 4, 2026
da47eee
Update css/main.css
RKBoss6 Feb 4, 2026
7d33726
Change sortid from 'explore' to 'random'
RKBoss6 Feb 4, 2026
7f8cd74
Update css/main.css
RKBoss6 Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 52 additions & 1 deletion css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,22 @@
border-bottom-right-radius: 1em;
border-top-right-radius: 1em;
}

.menu-item{
cursor: pointer;
}
.menu .menu-item>a{
border-radius: 0.9em;
padding-left:1em;
}
.menu{
border-radius: 1em;
}
.dropdowns-pill{
background-color: rgba(87, 85, 217, 0.066);
border-radius: 1em;
padding-left: 1em;
padding-right: 1em;
}
.btn.btn-favourite:focus,
.btn.btn-favourite:focus-visible,
.btn-favourite:focus,
Expand Down Expand Up @@ -330,6 +345,22 @@
.dropdown-container {
padding-left: 1rem;
padding-right: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
margin-left:0.7em;
margin-right:0.7em;
}

#searchform {
flex: 1;
min-width: 450px !important;
}

#searchform .form-input {
width: 100%;
}

a.btn.btn-link.dropdown-toggle {
Expand Down Expand Up @@ -386,7 +417,27 @@
/* stop long text like links pushing the width out too far*/
}

/* Base dropdown alignment */
.dropdown { position: relative; }

.dropdown .menu {
position: absolute; /* use fixed instead if your parent clips */
top: 100%;
left: 0;
z-index: 600;
}

/* Note:
Use position: fixed instead of absolute for the dropdown menu
when its parent or an ancestor has overflow: hidden, auto,
or scroll and clips the menu. Fixed positioning anchors the
menu to the viewport so it is not cut off by the clipping
container, but it will no longer scroll with the parent. */
/* Right-align when needed */
.dropdown .menu.align-right {
left: auto;
right: 0;
}
Comment on lines +437 to +440
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The .align-right class for right-aligning dropdown menus is defined but not used anywhere in the codebase. If this class is not needed, consider removing it to reduce code clutter. If it's intended for future use, add a comment explaining its purpose.

Copilot uses AI. Check for mistakes.
.tile .tile-content br {
display: block;
line-height: 100;
Expand Down
79 changes: 60 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,17 +61,66 @@

<div class="container apploader-tab" id="librarycontainer">
<div class="dropdown-container">
<div class="dropdown devicetype-nav">
<a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
<span>All apps</span><i class="icon icon-caret"></i>
</a>
<!-- menu component -->
<ul class="menu">
<li class="menu-item"><a>All apps</a></li>
<li class="menu-item"><a dt="BANGLEJS">Bangle.js 1</a></li>
<li class="menu-item"><a dt="BANGLEJS2">Bangle.js 2</a></li>
</ul>
<div class="dropdowns-pill">
<div class="dropdown devicetype-nav">
<a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
<span>All apps</span><i class="icon icon-caret"></i>
</a>
<!-- menu component -->
<ul class="menu">
<li class="menu-item"><a>All apps</a></li>
<li class="menu-item"><a dt="BANGLEJS">Bangle.js 1</a></li>
<li class="menu-item"><a dt="BANGLEJS2">Bangle.js 2</a></li>
</ul>
</div>
<div class="dropdown filter-nav">
<a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
<span>All apps</span><i class="icon icon-caret"></i>
</a>
<!-- menu component -->
<ul class="menu">
<li class="menu-item"><a dt="">All apps</a></li>
<li class="menu-item"><a dt="favourites">Favourites</a></li>
<li class="menu-item"><a dt="clock">Clocks</a></li>
<li class="menu-item"><a dt="launch">Launchers</a></li>
<li class="menu-item"><a dt="game">Games</a></li>
<li class="menu-item"><a dt="tool">Tools</a></li>
<li class="menu-item"><a dt="textinput">Keyboards</a></li>
<li class="menu-item"><a dt="widget">Widgets</a></li>
<li class="menu-item"><a dt="bluetooth">Bluetooth</a></li>
<li class="menu-item"><a dt="outdoors">Outdoors</a></li>
<li class="menu-item"><a dt="ram">Online</a></li>
<li class="menu-item"><a dt="clkinfo">Clock Info</a></li>
<li class="menu-item"><a dt="health">Health</a></li>
<li class="menu-item"><a dt="fonts">Fonts</a></li>
Comment on lines +82 to +95
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The anchor tags within menu items lack href attributes, which can cause accessibility issues. Without href attributes, these elements are not properly recognized as interactive by screen readers and cannot be navigated to using keyboard-only navigation. Consider adding href="#" or href="javascript:void(0)" to these anchor tags, or add role="button" and tabindex="0" attributes to make them accessible. This pattern is consistent across all the dropdowns in this file (lines 71-73, 82-95, 104-109), but should be addressed for proper accessibility compliance.

Copilot uses AI. Check for mistakes.
</ul>
</div>
<div class="dropdown sort-nav">
<a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
<span>Sort by:</span><i class="icon icon-caret"></i>
</a>
<!-- menu component -->
<ul class="menu">
<li class="menu-item"><a sortid="">None</a></li>
<li class="menu-item"><a sortid="created">New</a></li>
Copy link
Copy Markdown
Member

@gfwilliams gfwilliams Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea of these is that New/Updated are hidden until we actually have the data to make them work - in the one you commented out <label class="chip hidden tooltip" sortid="created" data-tooltip="Most recent apps">New</label>you can see it says hidden

But at least in your app loader (https://rkboss6.github.io/BangleApps) this is now broken - appdates.csv can't be found but the menu items are still shown anyway, they just don't work.

I'm also a bit concerned that we had tooltips on all the items before so that people could hover and see what they actually meant - but you've deleted those?

<li class="menu-item"><a sortid="modified">Updated</a></li>
<li class="menu-item"><a sortid="installs">Installed</a></li>
<li class="menu-item"><a sortid="favourites">Favourited</a></li>
<li class="menu-item"><a sortid="random">Random</a></li>
</ul>
</div>
</div>
<div class="input-group" id="searchform">
<input class="form-input" type="text" placeholder="Search by app name, ID, author, or description...">
<button class="btn btn-primary input-group-btn">Search</button>
</div>
</div>
<div class="panel" style="clear:both">
<div class="panel-header"></div>
<div class="panel-body columns"><!-- apps go here --></div>
</div>
<!-- Old chip-based filtering UI (replaced by dropdowns above). Kept for reference.

<div class="filter-nav">
<label class="chip active" filterid="" data-tooltip="Show all apps">All</label>
<label class="chip tooltip" filterid="clock" data-tooltip="To tell the time!">Clocks</label>
Expand All @@ -96,17 +145,9 @@
<label class="chip hidden tooltip" sortid="installs" data-tooltip="Most installed by users">Installed</label>
Copy link
Copy Markdown
Member

@gfwilliams gfwilliams Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should really remove this rather than just commenting it out

<label class="chip hidden tooltip" sortid="favourites" data-tooltip="Most liked by users">Favourited</label>
</div>
-->
</div>

<div class="panel" style="clear:both">
<div class="panel-header">
<div class="input-group" id="searchform">
<input class="form-input" type="text" placeholder="Keywords...">
<button class="btn btn-primary input-group-btn">Search</button>
</div>
</div>
<div class="panel-body columns"><!-- apps go here --></div>
</div>
</div>

<div class="container apploader-tab" id="myappscontainer" style="display:none">
Expand Down
Loading