diff --git a/android.html b/android.html index 1dc01546883..3f4606e0a5e 100644 --- a/android.html +++ b/android.html @@ -21,20 +21,13 @@
-
+
Bangle.js
App Loader
 -
-
@@ -43,7 +36,6 @@

- -
-
+
-
+
+
All apps -
-
- - - - - - - - - - - - - - +
+ + All apps + + +
+
+ + Sort by: + + +
- - +
-
-
- - -
-
+
@@ -128,7 +128,7 @@

App Loader

-

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

@@ -136,19 +136,25 @@

App Loader

Utilities

- - - - + + + + +

+ + + + +

- - - - - + + + + +

- - + +

Settings

@@ -170,7 +176,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.
diff --git a/css/main.css b/css/main.css index ab40a931999..988275ef4ae 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; } @@ -59,19 +53,18 @@ padding-left: 1em; border: solid 1px #dadee4; box-shadow: none; - margin: -1; + margin: 0; } .panel-header { padding-left: 0px; - } .panel { border-radius: 1em; padding-left: 0rem; padding-right: 0rem; - margin: 0px !important; + border: none; } @@ -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,11 +96,31 @@ } .btn.input-group-btn { - border-bottom-right-radius: 1em; border-top-right-radius: 1em; } + .menu-item { + cursor: pointer; + } + + .menu .menu-item>a { + border-radius: 1em; + 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, @@ -144,7 +139,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"); } @@ -152,18 +146,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"); } @@ -185,10 +176,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; @@ -205,8 +197,6 @@ padding: 1em; } - - .btn.btn-favourite { display: inline-flex; align-items: center; @@ -233,7 +223,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 { @@ -243,15 +232,12 @@ } } - - /* TABS */ .tab.tab-block .tab-item { border-bottom: none; } .tab.tab-item.active { - border-bottom: none; } @@ -263,6 +249,13 @@ gap: 1em; } + .inline-icon { + display: inline-block; + width: 1em; + height: 1em; + vertical-align: sub; + margin-right: 5px; + } #tab-navigate { position: relative; @@ -295,25 +288,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, @@ -325,11 +312,25 @@ border-bottom-color: transparent !important; } - - .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%; + margin-right: 0em; + } + + #searchform { + flex: 1; + min-width: 450px !important; + } + + #searchform .form-input { + width: 100%; } a.btn.btn-link.dropdown-toggle { @@ -377,15 +378,40 @@ 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*/ } + /* DROPDOWNS */ + .dropdown { + position: relative; + } + + .dropdown .menu { + position: absolute; + top: 100%; + left: 0; + z-index: 10000; + } + .long-dropdown{ + min-height: 520px !important; + } + + .dropdown .menu.align-right { + left: auto; + right: 0; + } + + /* Allow tooltips on filter menu items to escape the dropdown */ + .filter-nav .menu { + overflow: visible; + } + .sort-nav .menu { + overflow: visible; + } .tile .tile-content br { display: block; @@ -393,37 +419,32 @@ 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; @@ -454,12 +475,10 @@ height: auto; } - .modal-container { border-radius: 1.5em; background-color: rgb(253, 253, 255); padding: 1em; - } .bar { @@ -467,19 +486,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; @@ -501,9 +514,6 @@ max-width: 99%; } - - - /*override spectre*/ .icon.icon-interface::before { position: absolute; left: 50%; @@ -518,15 +528,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; @@ -535,21 +537,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; @@ -563,7 +562,6 @@ .terminal__focus { position: absolute; top: -100px; - /* hide it */ } .terminal a { @@ -581,4 +579,4 @@ .terminal--webcam.focus .terminal__cursor { text-shadow: none; animation: blink_webcam 1s step-end 0s infinite; - } + } \ No newline at end of file diff --git a/index.html b/index.html index 429cd422ade..5dbbb501063 100644 --- a/index.html +++ b/index.html @@ -21,20 +21,13 @@
-
+
Bangle.js
App Loader
 -
-
@@ -43,7 +36,6 @@

- -
-
+
-
+
+
All apps @@ -70,39 +62,50 @@
  • All apps
    • -
    - - - - - - - - - - - - - - +
    + + All apps + + +
    +
    + + Sort by: + + +
    - - + +
    -
    -
    - - -
    -
    +
    @@ -126,7 +129,7 @@

    App Loader

    -

    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

    @@ -134,20 +137,20 @@

    App Loader

    Utilities

    - - - - + + + +

    - - - - - + + + + +

    - +

    - +

    Settings

    @@ -173,7 +176,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.
    @@ -212,9 +215,7 @@

    Device info

    @@ -224,7 +225,7 @@

    Device info

    UART.ports = UART.ports.filter(e => e.includes("Bluetooth")); // all watches are Bluetooth Const.CONNECTION_DEVICE = "Bluetooth"; // force Bluetooth because we know (don't look it up)# // If "?dev=Bangle.js abcd" specified in URL, filter by that name - if (window.location.search) { + if (window.location.search) { let searchParams = new URLSearchParams(window.location.search); if (searchParams.has("dev")) UART.optionsBluetooth.filters=[{name:searchParams.get("dev")}]; @@ -245,4 +246,4 @@

    Device info

    - + \ No newline at end of file