search

navidrome / navidrome

🎧☁️ Modern Music Server and Streamer compatible with Subsonic/Airsonic
https://www.navidrome.org
GNU General Public License v3.0
10.47k stars 798 forks source link

Make spotify-ish more spotify-ish #914

Closed samarsault closed 3 years ago

samarsault commented 3 years ago

I've introduced some possible overrides like NDAlbumGridView, NDAlbumDetails etc. to make theming much more flexible.

I'm trying to modify the player as well, but overriding audioTitle (from below), after assigning a class doesn't seem to work. https://github.com/navidrome/navidrome/blob/01ba00ccdd3b98248ffef8bfb59bdc43a873d693/ui/src/audioplayer/Player.js#L24-L35

samarsault commented 3 years ago

Previews

Screenshot 2021-03-27 at 12 44 51 AM Screenshot 2021-03-27 at 12 43 05 AM Screenshot 2021-03-27 at 12 46 04 AM
samarsault commented 3 years ago

@deluan I think the major code changes are from https://github.com/navidrome/navidrome/pull/914/commits/a77c5485a4ef3f5e6790c74a97bedc83823d5677 which were added when I rebased and prettier fixes to them.

Rest of the changes are named classes (for greater customization) and in the theme file. I'll rebase with master and fix that.

samarsault commented 3 years ago
  • Play buttons on the album cover are green, but not the Star or the Context Menu

That has been done deliberately, as per spotify's design

samarsault commented 3 years ago
  • Too much space between these buttons:

This has been fixed

samarsault commented 3 years ago
  • Maybe we could change the colour of the album cover placeholders with CSS, to match the theme?

Yeah, I had thought about it. But this would involve some code change since we don't have access to to the image url.

samarsault commented 3 years ago

[Updated preview]

Screenshot 2021-03-27 at 8 11 45 PM Screenshot 2021-03-27 at 8 12 08 PM
deluan commented 3 years ago

Rest of the changes are named classes (for greater customization) and in the theme file.

Yeah, GH's diff is too noisy, but your changes are very important!

Yeah, I had thought about it. But this would involve some code change since we don't have access to to the image url.

That's fine, we can work on that later, if you want to improve the theme even further. Being able to style the cover placeholder would be really cool.

I checked out the code in my local, and even though the theme looks awesome, it still has some rough edges:

samarsault commented 3 years ago
  • We should have at least a small gap between the two buttons, to make it clear they are two separated buttons. But I'm not a UX/UI person, so I trust your judgment on this.

Yeah, there should be some level of contrast.

  • Almost all views in mobile now have issues with responsiveness

Yeah, noticed that. It might be because of changes in spacing everywhere. Looking into it.

deluan commented 3 years ago

Forgot to mention: the play button in the mobile view is also too big. I'm not near my computer to add a screenshot, but please look into that.

EDIT: Here's the screenshot:

Screen Shot 2021-03-27 at 11 48 28 AM
Dnouv commented 3 years ago

Hey @samarsault, how about adding a red fill color in the heart icon instead of white? @deluan, what are your opinions? Wouldn't it be nice?

samarsault commented 3 years ago

Hey @samarsault, how about adding a red fill color in the heart icon instead of white? @deluan, what are your opinions? Wouldn't it be nice?

Nice idea, however, I don't think the red would go along well with the rest of the spotify-ish interface.

samarsault commented 3 years ago

I've contrasted the two buttons(toggle grid/list) and have fixed the responsive issues I could find. Let me know if you spot any more.

Updated look

Screenshot 2021-03-28 at 4 54 12 PM Screenshot 2021-03-28 at 4 56 54 PM
deluan commented 3 years ago

Looks better! I'll do more testing later. One note though: I think the mode selector is not there yet:

Screen Shot 2021-03-28 at 1 02 15 PM

Maybe put the "unselected" one in a darker green? Making it the same colour as the background looks weird IMHO....

samarsault commented 3 years ago

Maybe put the "unselected" one in a darker green? Making it the same colour as the background looks weird IMHO....

Agreed, changing it.

samarsault commented 3 years ago

Added some contrast in there:

Screenshot 2021-03-29 at 4 26 35 PM
deluan commented 3 years ago

Yes, it is better, but I still see some issues with the responsiveness of the Album Grid:

Screen Shot 2021-03-29 at 10 24 48 PM

Also, in the screenshot you can see that the "Add Filter" and the "Album List mode" buttons still have the old styling (and also in other views). Did you forgot about it, or it is the intended behaviour?

samarsault commented 3 years ago

Yes, it is better, but I still see some issues with the responsiveness of the Album Grid:

What screen size is this? I can't reproduce it.

Also, in the screenshot you can see that the "Add Filter" and the "Album List mode" buttons still have the old styling (and also in other views). Did you forgot about it, or it is the intended behaviour?

Yeah, this was intended. Any thoughts?

deluan commented 3 years ago

What screen size is this? I can't reproduce it.

"iPhone X" option in Chrome's device bar (running on macOS). 375x812

Yeah, this was intended. Any thoughts?

I think it is ok.

samarsault commented 3 years ago

"iPhone X" option in Chrome's device bar (running on macOS). 375x812

Looks fine on my system:

Screenshot 2021-03-30 at 9 42 23 PM
samarsault commented 3 years ago

Login page:

Screenshot 2021-03-30 at 10 33 15 PM
deluan commented 3 years ago

Looks fine on my system:

Mine is 100%, yours is 75%..... Also, the issue may be related to this: #647

(Nice login page :)

samarsault commented 3 years ago

Fixed pagination:

Screenshot 2021-03-31 at 11 21 34 PM
deluan commented 3 years ago

Merging! Thanks a lot for your patience in getting this fine-tuned!

ryansalerno commented 3 years ago

If you want to play with the record color without completely redoing the code for it, you can filter: hue-rotate(270deg); on the img and get pretty far.... I don't think matching the button hex is the best idea since it'll blend with the play button on the grid views where it's overlaid, but you could encourage themes to pick some semi-complimentary color instead of Navidrome blue.

Or you could use different degrees to get closer on the single view where there's no overlap, and have the grid view do its own thing? Or even possibly randomize colors with some code change to add extra classes in grid view....

github-actions[bot] commented 1 year ago

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.