From 3f00839977a4eab722c56f595a5c34b3b8de35a7 Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Mon, 2 Feb 2026 21:31:04 -0500 Subject: [PATCH 01/18] Add styles for menu items and dropdowns --- css/main.css | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/css/main.css b/css/main.css index ab40a93199..ad78d02b09 100644 --- a/css/main.css +++ b/css/main.css @@ -125,7 +125,19 @@ border-bottom-right-radius: 1em; border-top-right-radius: 1em; } + .menu-item{ + cursor: pointer; + } + .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, @@ -262,6 +274,13 @@ padding-right: 0.3em !important; gap: 1em; } + .inline-icon { + display: inline-block; /* Ensures the image behaves inline but allows width/height adjustments */ + width: 1em; /* Set the desired width */ + height: 1em; /* Set the desired height */ + vertical-align:sub; + margin-right: 5px; + } #tab-navigate { @@ -330,6 +349,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 { @@ -386,7 +421,21 @@ /* stop long text like links pushing the width out too far*/ } + /* Base dropdown alignment */ + .dropdown { position: relative; } + .dropdown .menu { + position: absolute; /* or fixed if your parent clips, see note below */ + top: 100%; + left: 0; + z-index: 10000; + } + + /* Right-align when needed */ + .dropdown .menu.align-right { + left: auto; + right: 0; + } .tile .tile-content br { display: block; line-height: 100; From 6207a0384e09e343b1d30616b723a868a8b94d8f Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Mon, 2 Feb 2026 21:32:22 -0500 Subject: [PATCH 02/18] Update index.html --- index.html | 81 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 62 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 21ff5e5443..c1c7ebcc0d 100644 --- a/index.html +++ b/index.html @@ -61,17 +61,67 @@
-
- - All apps - - - +
+
+ + All apps + + + +
+
+ + All apps + + + +
+
+ + Sort by: + + + +
+
+
+ +
+ +
+
+
+
+
+
-
-
-
- - -
-
-
-
+
From 32b588f71d52114ea034a59b8926ac6b15cb9f58 Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Tue, 3 Feb 2026 08:29:30 -0500 Subject: [PATCH 04/18] Update for better menus/name explore to random --- css/main.css | 4 ++++ index.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/css/main.css b/css/main.css index ad78d02b09..37a6f16e13 100644 --- a/css/main.css +++ b/css/main.css @@ -128,6 +128,10 @@ .menu-item{ cursor: pointer; } + .menu .menu-item>a{ + border-radius: 1em; + padding-left:1em; + } .menu{ border-radius: 1em; } diff --git a/index.html b/index.html index 9e3681d609..1612a9291a 100644 --- a/index.html +++ b/index.html @@ -106,7 +106,7 @@
  • Updated
  • Installed
  • Favourited
    • -
  • Explore
    • +
  • Random
    • From 3eb3517fddef3313f05af30fbdada2a5bdf9b009 Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Tue, 3 Feb 2026 16:32:44 -0500 Subject: [PATCH 05/18] Reduce border-radius of menu item link for concentricity --- css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/main.css b/css/main.css index 37a6f16e13..d6899bbee6 100644 --- a/css/main.css +++ b/css/main.css @@ -129,7 +129,7 @@ cursor: pointer; } .menu .menu-item>a{ - border-radius: 1em; + border-radius: 0.9em; padding-left:1em; } .menu{ From 8c3b6444a1d301decb3ef5ea2d64ce6aec82d723 Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Tue, 3 Feb 2026 22:02:29 -0500 Subject: [PATCH 06/18] Update css/main.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- css/main.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/main.css b/css/main.css index d6899bbee6..89126fc363 100644 --- a/css/main.css +++ b/css/main.css @@ -140,7 +140,6 @@ border-radius: 1em; padding-left: 1em; padding-right: 1em; - } .btn.btn-favourite:focus, .btn.btn-favourite:focus-visible, From 5558f57e34026c32c78f941345fc9d7c6578ec74 Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Tue, 3 Feb 2026 22:02:59 -0500 Subject: [PATCH 07/18] Update css/main.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- css/main.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/css/main.css b/css/main.css index 89126fc363..8b806d04a6 100644 --- a/css/main.css +++ b/css/main.css @@ -428,12 +428,18 @@ .dropdown { position: relative; } .dropdown .menu { - position: absolute; /* or fixed if your parent clips, see note below */ + position: absolute; /* use fixed instead if your parent clips */ top: 100%; left: 0; z-index: 10000; } + /* 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; From 87358b15a5fd566080d1d8c8e651057e7f301ed9 Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Tue, 3 Feb 2026 22:03:11 -0500 Subject: [PATCH 08/18] Update index.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 1612a9291a..2e7261d1b7 100644 --- a/index.html +++ b/index.html @@ -117,7 +117,7 @@
    -
    +
    - - -
    From da47eeed62e166cdf310ab26287f511f30a61b42 Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Tue, 3 Feb 2026 22:15:34 -0500 Subject: [PATCH 13/18] Update css/main.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/main.css b/css/main.css index 8b806d04a6..ceae5b0e4d 100644 --- a/css/main.css +++ b/css/main.css @@ -431,7 +431,7 @@ position: absolute; /* use fixed instead if your parent clips */ top: 100%; left: 0; - z-index: 10000; + z-index: 600; } /* Note: From 7d3372622faa8f75ed142e92dcacb9ba73bc38da Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Wed, 4 Feb 2026 12:59:37 -0500 Subject: [PATCH 14/18] Change sortid from 'explore' to 'random' --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 7d785b70e6..92d2bfe442 100644 --- a/index.html +++ b/index.html @@ -106,7 +106,7 @@
  • Updated
  • Installed
  • Favourited
    • -
  • Random
    • +
  • Random
    • From 7f8cd740574599bedd0cae51cc44f4355281aef2 Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Fri, 13 Feb 2026 12:56:29 -0500 Subject: [PATCH 15/18] Update css/main.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- css/main.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/css/main.css b/css/main.css index ceae5b0e4d..3595b1f678 100644 --- a/css/main.css +++ b/css/main.css @@ -277,13 +277,6 @@ padding-right: 0.3em !important; gap: 1em; } - .inline-icon { - display: inline-block; /* Ensures the image behaves inline but allows width/height adjustments */ - width: 1em; /* Set the desired width */ - height: 1em; /* Set the desired height */ - vertical-align:sub; - margin-right: 5px; - } #tab-navigate { From 0f5c1c0951f8bddbe307b4fa38ac75c68d98a995 Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Fri, 10 Apr 2026 12:55:35 -0400 Subject: [PATCH 16/18] fix deletion of inline icon class, re-add tooltips, and format index.html and main.css --- css/main.css | 159 +++++++++++++++++---------------------------------- 1 file changed, 51 insertions(+), 108 deletions(-) diff --git a/css/main.css b/css/main.css index 3595b1f678..5b2d2761dd 100644 --- a/css/main.css +++ b/css/main.css @@ -1,4 +1,4 @@ - /* NAVIGATION BAR AND GENERAL STYLES */ +/* NAVIGATION BAR AND GENERAL STYLES */ body { color: #3c3c3c; padding-left: 1em; @@ -15,8 +15,6 @@ font-weight: bold; } - - header.navbar, .navbar-primary { margin-left: calc(-1em); @@ -45,10 +43,6 @@ gap: 0.75rem; } - - - - .navbar-brand.mr-2>img { margin-left: 0.3rem; } @@ -64,7 +58,6 @@ .panel-header { padding-left: 0px; - } .panel { @@ -81,35 +74,17 @@ gap: 0.75rem; align-items: stretch; justify-content: center; - } /* BUTTONS */ @keyframes squishAnim { - 0% { - transform: scale(1, 1); - } - - 15% { - transform: scale(1.08, 1.24); - } - - 40% { - transform: scale(1.22, 1.08); - } - - 65% { - transform: scale(1.15, 1.28); - } - - 85% { - transform: scale(1.06, 1.12); - } - - 100% { - transform: scale(1, 1); - } + 0% { transform: scale(1, 1); } + 15% { transform: scale(1.08, 1.24); } + 40% { transform: scale(1.22, 1.08); } + 65% { transform: scale(1.15, 1.28); } + 85% { transform: scale(1.06, 1.12); } + 100% { transform: scale(1, 1); } } .btn { @@ -121,26 +96,30 @@ } .btn.input-group-btn { - border-bottom-right-radius: 1em; border-top-right-radius: 1em; } - .menu-item{ + + .menu-item { cursor: pointer; } - .menu .menu-item>a{ - border-radius: 0.9em; - padding-left:1em; + + .menu .menu-item>a { + border-radius: 1em; + padding-left: 1em; } - .menu{ + + .menu { border-radius: 1em; } - .dropdowns-pill{ + + .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, @@ -159,7 +138,6 @@ .icon.icon-emulator { text-indent: 0px; - /*override spectre*/ content: url("data:image/svg+xml,%3Csvg fill='rgb(87, 85, 217)' xmlns='http://www.w3.org/2000/svg' viewBox='4 4 40 40' width='1em' height='1em'%3E%3Cpath d='M 8.5 5 C 6.0324991 5 4 7.0324991 4 9.5 L 4 30.5 C 4 32.967501 6.0324991 35 8.5 35 L 17 35 L 17 40 L 13.5 40 A 1.50015 1.50015 0 1 0 13.5 43 L 18.253906 43 A 1.50015 1.50015 0 0 0 18.740234 43 L 29.253906 43 A 1.50015 1.50015 0 0 0 29.740234 43 L 34.5 43 A 1.50015 1.50015 0 1 0 34.5 40 L 31 40 L 31 35 L 39.5 35 C 41.967501 35 44 32.967501 44 30.5 L 44 9.5 C 44 7.0324991 41.967501 5 39.5 5 L 8.5 5 z M 8.5 8 L 39.5 8 C 40.346499 8 41 8.6535009 41 9.5 L 41 30.5 C 41 31.346499 40.346499 32 39.5 32 L 29.746094 32 A 1.50015 1.50015 0 0 0 29.259766 32 L 18.746094 32 A 1.50015 1.50015 0 0 0 18.259766 32 L 8.5 32 C 7.6535009 32 7 31.346499 7 30.5 L 7 9.5 C 7 8.6535009 7.6535009 8 8.5 8 z M 17.5 12 C 16.136406 12 15 13.136406 15 14.5 L 15 25.5 C 15 26.863594 16.136406 28 17.5 28 L 30.5 28 C 31.863594 28 33 26.863594 33 25.5 L 33 14.5 C 33 13.136406 31.863594 12 30.5 12 L 17.5 12 z M 18 18 L 30 18 L 30 25 L 18 25 L 18 18 z M 20 35 L 28 35 L 28 40 L 20 40 L 20 35 z'/%3E%3C/svg%3E"); } @@ -167,18 +145,15 @@ text-indent: 0px; } - /*override spectre*/ .icon.icon-favourite-active { text-indent: 0px; color: #EEE } - /*override spectre*/ .icon.icon-favourite::before { content: url("data:image/svg+xml,%3Csvg fill='rgb(255, 0, 0)' xmlns='http://www.w3.org/2000/svg' viewBox='0 -3 50 47' width='1.5em' height='1.5em'%3E%3Cpath d='M 16.375 9 C 10.117188 9 5 14.054688 5 20.28125 C 5 33.050781 19.488281 39.738281 24.375 43.78125 L 25 44.3125 L 25.625 43.78125 C 30.511719 39.738281 45 33.050781 45 20.28125 C 45 14.054688 39.882813 9 33.625 9 C 30.148438 9 27.085938 10.613281 25 13.0625 C 22.914063 10.613281 19.851563 9 16.375 9 Z M 16.375 11 C 19.640625 11 22.480469 12.652344 24.15625 15.15625 L 25 16.40625 L 25.84375 15.15625 C 27.519531 12.652344 30.359375 11 33.625 11 C 38.808594 11 43 15.144531 43 20.28125 C 43 31.179688 30.738281 37.289063 25 41.78125 C 19.261719 37.289063 7 31.179688 7 20.28125 C 7 15.144531 11.1875 11 16.375 11 Z'/%3E%3C/svg%3E"); } - .icon.icon-favourite-active::before { content: url("data:image/svg+xml,%3Csvg fill='rgb(255, 0, 0)' xmlns='http://www.w3.org/2000/svg' viewBox='0 -3 50 47' width='1.5em' height='1.5em'%3E%3Cpath d='M 25 44.296875 L 24.363281 43.769531 C 23.363281 42.941406 22.019531 42.027344 20.46875 40.96875 C 14.308594 36.765625 5 30.414063 5 20.285156 C 5 14.0625 10.097656 9 16.363281 9 C 19.714844 9 22.851563 10.457031 25 12.957031 C 27.148438 10.457031 30.289063 9 33.636719 9 C 39.902344 9 45 14.0625 45 20.285156 C 45 30.414063 35.691406 36.765625 29.53125 40.96875 C 27.976563 42.027344 26.636719 42.941406 25.636719 43.769531 Z'/%3E%3C/svg%3E"); } @@ -200,10 +175,11 @@ .icon.icon-interface { text-indent: 0px; } + .fav-count { display: inline-block; - margin-right: 0.3rem!important; - margin-left:0em!important; + margin-right: 0.3rem !important; + margin-left: 0em !important; font-size: 0.7rem; vertical-align: middle; text-align: center; @@ -220,8 +196,6 @@ padding: 1em; } - - .btn.btn-favourite { display: inline-flex; align-items: center; @@ -248,7 +222,6 @@ gap: 0.35rem; } - /* Collapse to one column for thinner screens */ @media (max-width: 720px) { .tile.column.col-6.col-sm-12.col-xs-12.app-tile { @@ -258,15 +231,12 @@ } } - - /* TABS */ .tab.tab-block .tab-item { border-bottom: none; } .tab.tab-item.active { - border-bottom: none; } @@ -278,6 +248,13 @@ gap: 1em; } + .inline-icon { + display: inline-block; + width: 1em; + height: 1em; + vertical-align: sub; + margin-right: 5px; + } #tab-navigate { position: relative; @@ -310,25 +287,19 @@ will-change: transform, width; } - /* Move the indicator to the second tab */ #tab-navigate:has(li:nth-child(2).active)::after { transform: translateX(100%); } - /* Move the indicator to the third tab */ #tab-navigate:has(li:nth-child(3).active)::after { transform: translateX(200%); } - - .tab.tab-block .tab-item:focus { outline: none; box-shadow: none; } - - .tab .tab-item a, .tab .tab-item a:focus, .tab .tab-item a:active, @@ -340,8 +311,6 @@ border-bottom-color: transparent !important; } - - .dropdown-container { padding-left: 1rem; padding-right: 1rem; @@ -350,8 +319,8 @@ gap: 0.75rem; flex-wrap: wrap; justify-content: center; - margin-left:0.7em; - margin-right:0.7em; + margin-left: 0.7em; + margin-right: 0.7em; } #searchform { @@ -408,73 +377,70 @@ border-bottom: 1px solid #EEE; margin-bottom: 4px; min-height: 11em; - /* reduced so tiles can be thinner */ } .tile-content { position: relative; overflow-wrap: anywhere; - /* stop long text like links pushing the width out too far*/ } - /* Base dropdown alignment */ - .dropdown { position: relative; } + /* DROPDOWNS */ + .dropdown { + position: relative; + } .dropdown .menu { - position: absolute; /* use fixed instead if your parent clips */ + position: absolute; top: 100%; left: 0; - z-index: 600; + z-index: 10000; + } + .long-dropdown{ + min-height: 520px !important; } - /* 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; } + + /* Allow tooltips on filter menu items to escape the dropdown */ + .filter-nav .menu { + overflow: visible; + } + .tile .tile-content br { display: block; line-height: 100; padding: 2em; } - .tile .tile-content p { margin: 0 0 0.2rem 0; } .tile.column.col-6.col-sm-12.col-xs-12.app-tile { background-color: rgba(87, 85, 217, 0.025); - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.025); - border: solid 1.3px #dadee47c; margin: 0; - /* spacing handled by container gap */ padding: 0.9em; border-radius: 1em; - - box-sizing: border-box; - /* allow tiles to be two columns on wide screens, collapse to one on small screens */ flex: 1 1 calc(50% - 0.75rem); max-width: calc(50% - 0.75rem); - min-width: 220px; /* ensures tiles wrap down to one column when viewport is too narrow */ + min-width: 220px; } + .tile.column.col-6.col-sm-12.col-xs-12.app-tile.updateTile { background-color: rgba(255, 149, 0, 0.069) !important; box-shadow: 0px 3px 6px rgba(151, 111, 0, 0.036); } - .chip{ - border-radius: 0.7em; + .chip { + border-radius: 0.7em; } + .link-github { position: absolute; top: 36px; @@ -505,12 +471,10 @@ height: auto; } - .modal-container { border-radius: 1.5em; background-color: rgb(253, 253, 255); padding: 1em; - } .bar { @@ -518,19 +482,13 @@ } .devicechooser { - border-radius: 1em; - justify-content: center; display: flex; justify-content: center; - /* Centers horizontally */ align-items: center; - /* Centers vertically */ text-align: left; - } - /* Support older index.js which puts the count inside the as a span */ .btn.btn-favourite .icon.icon-favourite span { position: static; top: auto; @@ -552,9 +510,6 @@ max-width: 99%; } - - - /*override spectre*/ .icon.icon-interface::before { position: absolute; left: 50%; @@ -569,15 +524,7 @@ overflow-y: unset; } - /* Normally tooltips don't wrap, but if you enable it, then they wrap until they are really thin! - Not sure how to get 'normal' wrap behaviour (eg fill up until max-width, then wrap) */ - /*.tooltip:hover::after { - white-space: normal; - min-width: 160px; - }*/ - /* Terminal */ - /* ----------------------------------------------------- */ .terminal { font-size: 12px; background-color: #222; @@ -586,21 +533,18 @@ border: 0; padding: 10px; overflow: auto; - /* adds scrollbar if needed */ border-radius: 1em; position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; - -o-user-select: text; -moz-user-select: text; -webkit-user-select: text; user-select: text; } - .termLine { font-family: Fixed, monospace; tab-size: 4; @@ -614,7 +558,6 @@ .terminal__focus { position: absolute; top: -100px; - /* hide it */ } .terminal a { @@ -632,4 +575,4 @@ .terminal--webcam.focus .terminal__cursor { text-shadow: none; animation: blink_webcam 1s step-end 0s infinite; - } + } \ No newline at end of file From 1f4c5c30ff9b9d051aaad9fe7f6458df59b8086d Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Fri, 10 Apr 2026 12:59:24 -0400 Subject: [PATCH 17/18] forgot to commit index.html changes --- index.html | 119 +++++++++++++++++------------------------------------ 1 file changed, 37 insertions(+), 82 deletions(-) diff --git a/index.html b/index.html index 92d2bfe442..c5f323de15 100644 --- a/index.html +++ b/index.html @@ -21,20 +21,13 @@
    -
    +
    Bangle.js
    App Loader
     -
    -
    @@ -43,7 +36,6 @@

    - -
    -
    +
    - - + +
    - - -
    -

    Can't connect? Check out the Bangle.js Troubleshooting page +

    Can't connect? Check out the Bangle.js Troubleshooting page

    Check out the Source on GitHub, or find out how to add your own app

    @@ -177,20 +136,20 @@

    App Loader

    Utilities

    - - - - + + + +

    - - - - - + + + + +

    - +

    - +

    Settings

    @@ -216,7 +175,7 @@

    Settings

    Used for 'Sort by Installed/Favourited' functionality. See the privacy policy.
    -   Translations (BETA - more info). Any apps that are uploaded to Bangle.js after changing this will have any text automatically translated.
    @@ -249,20 +208,16 @@

    Device info

    -
    - + @@ -283,4 +238,4 @@

    Device info

    - + \ No newline at end of file From f73b12205f8ff76caf261952f49d7cd109e44f06 Mon Sep 17 00:00:00 2001 From: RKBoss6 Date: Mon, 25 May 2026 21:24:28 -0400 Subject: [PATCH 18/18] Add sort tooltips --- css/main.css | 3 +++ index.html | 10 +++++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/css/main.css b/css/main.css index 5b2d2761dd..d0ce9f80d9 100644 --- a/css/main.css +++ b/css/main.css @@ -408,6 +408,9 @@ .filter-nav .menu { overflow: visible; } + .sort-nav .menu { + overflow: visible; + } .tile .tile-content br { display: block; diff --git a/index.html b/index.html index c5f323de15..81dd796a0f 100644 --- a/index.html +++ b/index.html @@ -90,11 +90,11 @@