search

hohMiyazawa / Automail

An enhancement collection for anilist.co
GNU General Public License v3.0
158 stars 30 forks source link

Add recommendations fade for media already in list #294

Closed nategasm closed 8 months ago

nategasm commented 10 months ago

A smalll QOL update from an idea I got from the AL forums. Recommendations on media pages that are already in the user's list will be faded (Except on cursor hover). This will visually make it easier to find new recommendations but still keep voting functionality.

Before:

image

After:

image

This simple CSS uses the handy has() pseudo-class which only recently got full widespread support. Depends on the hohStatusDot which in turn depends on being signed in with the script.

Due to its simplicity, I've added it to the global CSS but this can be its own separate module/option if that is preferred.

hohMiyazawa commented 10 months ago

The idea seems sound, and this is the simplest possible implementation of it. Still:

  1. :has() is a bit too recent for my taste, that is, there are perfectly valid and used browser stacks where this breaks. It won't break catastrophically tho. Possibly, the .hohStatusDot module can add an extra class to the recommendations too, eleminating the need for :has() ?
  2. Should it be optional?
  3. Maybe not fade the voting and title?
nategasm commented 10 months ago
  1. Could you give an example of where :has() might break? The implementation of :has() has been some years in the making and I'm not aware of any open major issues on CSSWG/Mozilla/Chromium. But perhaps I'm misunderstanding.
  2. I was 50/50 on making it optional, but perhaps it should be.
  3. Simple enough to not include the title in the fade. A bit trickier for the voting since it is a child element that will always inherit the opacity.
hohMiyazawa commented 10 months ago

Full support for :has in firefox is less than a month old, so it won't work for systems where is software updates are more frequent than that.

I'm willing to merge any version of this that you find reasonable, but I think having it be optional is a good idea in any case.

For how to make it an optional module, see src/howto.css or /src/modules/noScrollPosts.js for the simplest possible version of a module.

Tempest32 commented 10 months ago

Would it be possible to configure which anime to fade based on their status? For example if someone would like to fade completed or dropped anime but not the ones in planning.

nategasm commented 10 months ago

Would it be possible to configure which anime to fade based on their status? For example if someone would like to fade completed or dropped anime but not the ones in planning.

I'm not really sure how to implement a configurable option like that here. It may have to be a separate module.