App Loader Look and Feel changes

[gfwilliams]

Hi! @RKBoss6 has proposed some changes to the app loader, and I'd really like to get everyone's views on it. The full description and actual changes are at espruino/BangleApps#4078 and you can use an app loader with the changes at https://rkboss6.github.io/BangleApps/

Before

After

Personally, I feel like it looks a bit more modern and friendly, but I'm also a bit concerned that there's a bit too much padding so you don't see as many apps on the screen as you would have before.

[thyttan]

What if it got rid of padding between tiles and rounded just the outer corners of the top two app tiles? And also add the slight tint from RKBoss6's app tiles. Kinda like this:

Edit: But personally I prefer the style in RKBoss6's proposal to the middle-ground I present.

If we want we could move the "Read more..." around to make the tiles smaller as well. Fitting more apps on screen. (EDIT: I see you commented on that on the PR also Gordon. It feels like the "Read more..." padding is the biggest difference in height.)

[gfwilliams]

Yes - I actually liked the padding between apps - that felt like almost the main point of the PR.

Removing padding around Read more... (maybe moving it to the right and up?) would go a long way. Also getting the description to go right across (this will need more than just CSS though IMO)

There's also the padding at the very left+right of the page. It feels like a lot (especially on mobile) and the search box and info below it don't line up

[elcste]

Could Read more... go under the favourite/upload/menu buttons in the right column of the app card?

[RKBoss6]

I've looked at it a bit and there's no padding for the readme text itself, so somewhere along the line there's a <br> that I'll try to find. I personally also like the padding between app tiles, as well as the readme text position. I'll work on thinning out the app tiles and adjusting padding accordingly!

[RKBoss6]

Alright, I've made a few changes, the tiles should take up less space, and is comparable to the old app loader in terms of how many rows you can see now. Give it a try and let me know what you think!

[thyttan]

Would it be easy to widen the app tiles some? On my phone there's some room to expand into (EDIT: reading again I see Gordon already mentioned this as well)

[RKBoss6]

I have gotten my index.js changes into my app loader as well, favorites animations and the button container are now up!

[thyttan]

How cute is the animation! ❤️

[RKBoss6]

I really like it as well!! I was trying to go for a bouncy/squishy look, do you think it pulls it off?

[thyttan]

Yes!

[RKBoss6]

I've also changed the look of tabs to match the newer style, and increased & fixed the margins of the container, allowing for the expansion into the sides a bit, as thyttan and gfwilliams mentioned.

[thyttan]

Nice!

For the tabs (Library, My Apps, More...), I like the look of the new ones on my phone but on PC I think the old version looks better. Just my preference.

[RKBoss6]

Alright, what about the tabs did you like/dislike? We'll try to find a good medium...

[thyttan]

Hm, not entirely sure. But I feel like on PC they look a bit 'overstated'. Whereas on the phone they fit well with the rest of the aestetic and like something you want to press with your finger.

It's probably not a big deal though but wanted to share my opinion. 🙏

I'll get used to the new tab design on PC also if we go with it 🌞

[thyttan]

Maybe it's that I feel like the new tabs look too much like the rest of the updated UI also (specifically on PC). So both a bit overstated and too similar to the rest of the UI. Sometimes it's nice with a bit of distinction maybe. Talking about PC here.

Edit: They also have a fair bit more padding both over and under so pushes the rest of UI down as a consequence.

But again, not a super big deal. I feel guilty of bikeshedding 😅

[RKBoss6]

No, it's absolutely fine! I'm sure other people feel the same way, even I felt it was a bit much! I just wanted to get multiple opinions on it to ensure that everyone is happy with the changes made, and it doesn't hit you in the face when it's opened. Thanks so much for sharing your opinions, they will definitely help make an app loader that everyone enjoys using!

[gfwilliams]

I'm feeling pretty happy with how it's looking on https://rkboss6.github.io/BangleApps/ now.

Any last thoughts before we look at merging this in?

[RKBoss6]

I think everything looks good to me! I'll make a new PR with only the CSS changes, not the submodule changes I used to get the example working on my app loader.

[gfwilliams]

Thanks! Just so you know, there's no need to make new PRs though - once you do a PR, if you change your repository on the branch that you did the PR from, the original PR gets updated (so likely the original espruino/BangleApps#4078 had all the changes in you needed)

[RKBoss6]

Ah, no. The problem I had was that to get the index.js changes, I had to change the .gitmodules to use my fork, and I didn't want that change to get carried over to the parent repository

[RKBoss6]

I've made it so apps that need to be updated have a slightly orange tile instead, what do you all think?

[gfwilliams]

I'm happy with that? I guess it makes it easy to spot them

[RKBoss6]

Alright, then I think we can get the CSS changes merged!

[jeroenpeters1986]

I love this new style. It's not a radical redesign, we don't have to get used to a whole new style and find our way, but it is more modern. I really like the padding!