[CSS] Enhance UI, and add animations for an overall cleaner look

[RKBoss6]

There is a discussion for this where you can give your opinion to make this better here!

Description

As I was making a PR to improve favorites handling in AppLoaderCore, I noticed certain visual discrepancies and errors with the App Loader, such as a number in the 100s for favorites often clipping past the icon and becoming less readable as a result, so I decided to somewhat modernise the interface to feel fresh, as well as fix layout bugs and errors.

It is up on my personal app loader, if anyone wants to take a look. It doesn't have the updated AppLoaderCore to go along with it, so it won't have the pills and updated favorite buttons yet. What's up right now on my app loader is what the main. app loader will look like after this is merged. Anyone is welcome to pop in, take a look, and share what you think!

This PR, along with EspruinoAppLoaderCore #82:

• Adds more rounded edges
• Adds padding between app tiles
• Rounds the search bar and borders
• Moves the favorites count from inside the icon to beside it, for better readability
• Adds an animation when you favorite/unfavorite an app to help the UI feel more fluid
• Adds a pill-shaped background of the app buttons (favorite, install, open IDE, etc.)
• Adds rounded corners and more padding to modals
• Fixes alignment of device images in the select devices modal

This PR addresses all the stylistic changes, EspruinoAppLoaderCore #82 addresses the favorite animations and layout. These CSS changes are designed to work with the current version of AppLoaderCore, so both do not need to be merged at the same time, however, this needs to be merged first.

No user functionality was changed with this, this is purely a cosmetic upgrade to help the app loader feel fresh and fix bugs.

Screenshots

Before

After

Before

After

Favorites Animations

Screen.Recording.2025-12-01.at.3.36.54.PM.mov

[thyttan]

I like the look of this - round feels friendly.

tagging @gfwilliams

[gfwilliams]

Thanks! I like the look, but I do have a few reservations:

Can we remove the 'focus' border on the tabs when you click them? It just looks a bit odd now

The search box looks a bit odd. It's rounded loads on the left, but then the button on thr right is only rounded a little.

The 'Read more...' link has a load of padding top and bottom too.

In general there is a lot of padding now. In a large window on my 1440p monitor I now only see 8 apps whereas before I saw 12, on my phone I see only 2.5 apps when I first open the window.

On my phone I notice a lot of padding down the left and right - so much so that the app description probably only takes around 50% of the width of the display even though the text is quite small. The result is I just see an awful lot of blank space and not much actual data - there's going to be tons of scrolling and it'll make it even harder to find apps that aren't right at the top.

I think we could really do with some more input on this - I'll post on the main forum with a link here - but my feeling is I like the roundedness, but I think we should go a bit easier on the padding (maybe look at whether the description can be made to go all the way to the right of the tile rather than stopping at the buttons - that could help)

edit: it'd also be really good if you could set your personal app loader up with all the changes (I guess that would involve changing the URL of AppLoaderCore to your own personal one)

[RKBoss6]

Since I've made commits in here in order to bring my index.js changes, I'll mark this as a draft, and when everyone likes the new look, then I'll make a new PR with only code changes from this repository.

[thyttan]

Oops I suppose:

[RKBoss6]

Hmm, this is from a phone, right? What model? I think we can just adjust the pixel thresholds for it to become one list... What do you think of the tabs now? I added a bit of an animation, and tried to keep the existing style, while making it cleaner.

[gfwilliams]

I can just drag the window on desktop to be narrow and it happens too. It used to dynamically choose between 1 and 2 columns wide depending on the screen width, which I think was a really nice addition, so I'd really like to keep that functionality.

I'm losing track of issues/PRs now, but also I'd mentioned that it would be really cool if the text could go right to the edge of the box (eg the buttons in the top-right didn't take up the entire column). That's probably not a CSS-only thing, but it would be a really good improvement IMO.

[gfwilliams]

One more note on this: We need to make sure that espruino/EspruinoAppLoaderCore#82 doesn't break https://espruino.github.io/EspruinoApps/ which also uses it (also https://pip-boy.com/3000-mk-v/apps does too). I don't think that will be an issue right now but it's worth bearing in mind that other sites use the same code

[RKBoss6]

Ok, I can test it out and fix the 1-2 column switching. It also used to work here, but I think another piece of css has broken it.

[thyttan]

Ok, I can test it out and fix the 1-2 column switching. It also used to work here, but I think another piece of css has broken it.

It only started doing that weird split on my phone after c560860 I think.

[RKBoss6]

Thanks! That should be fixed now. @gfwilliams I've tried out what it looks like with only the index.js for other sites that use AppLoaderCore, and it looks mostly good, I will add some padding styled into the HTML to make sure that works. Obviously for the sites that don't have the updated css, they won't have the animations, but hopefully it won't look unpadded and strange.

[RKBoss6]

Or the other option for pip boy is that they just don't update the apploadercore submodule to it's latest version, which they don't do anyway.