Added hide anime in my collection button

This commit is contained in:
Eduard Urbach 2017-12-02 21:06:15 +01:00
parent 0c61456e4e
commit e9f15eacbc
6 changed files with 29 additions and 4 deletions

View File

@ -1,7 +1,7 @@
component AnimeGrid(animeList []*arn.Anime, user *arn.User) component AnimeGrid(animeList []*arn.Anime, user *arn.User)
.anime-grid .anime-grid
each anime in animeList each anime in animeList
.anime-grid-cell .anime-grid-cell(data-added=(user != nil && user.AnimeList().Contains(anime.ID)))
a.ajax(href="/anime/" + toString(anime.ID)) a.ajax(href="/anime/" + toString(anime.ID))
img.anime-grid-image.lazy(data-src=anime.Image("medium"), data-webp="true", alt=anime.Title.Romaji) img.anime-grid-image.lazy(data-src=anime.Image("medium"), data-webp="true", alt=anime.Title.Romaji)
.anime-grid-title .anime-grid-title

View File

@ -2,9 +2,11 @@ component ExploreAnime(animeList []*arn.Anime, year string, status string, typ s
ExploreFilters(year, status, typ) ExploreFilters(year, status, typ)
.corner-buttons-hide-on-mobile .corner-buttons-hide-on-mobile
a.button.ajax(href="/genres") button.action(data-trigger="click", data-action="hideAddedAnime", title="Hide anime in my collection")
Icon("clone") RawIcon("eye-slash")
span View genres
a.button.ajax(href="/genres", title="View genres")
RawIcon("clone")
h1.page-title Explore h1.page-title Explore

View File

@ -1,3 +1,8 @@
component Genre(genre string, animes []*arn.Anime, user *arn.User) component Genre(genre string, animes []*arn.Anime, user *arn.User)
h1(title=toString(len(animes)) + " anime")= strings.Title(genre) h1(title=toString(len(animes)) + " anime")= strings.Title(genre)
.corner-buttons-hide-on-mobile
button.action(data-trigger="click", data-action="hideAddedAnime", title="Hide anime in my collection")
RawIcon("eye-slash")
AnimeGrid(animes, user) AnimeGrid(animes, user)

View File

@ -1,4 +1,5 @@
import { AnimeNotifier } from "../AnimeNotifier" import { AnimeNotifier } from "../AnimeNotifier"
import { findAll } from "scripts/Utils";
// Filter anime on explore page // Filter anime on explore page
export function filterAnime(arn: AnimeNotifier, input: HTMLInputElement) { export function filterAnime(arn: AnimeNotifier, input: HTMLInputElement) {
@ -8,3 +9,12 @@ export function filterAnime(arn: AnimeNotifier, input: HTMLInputElement) {
arn.app.load(`/explore/anime/${year.value}/${status.value}/${type.value}`) arn.app.load(`/explore/anime/${year.value}/${status.value}/${type.value}`)
} }
// Hides anime that are already in your list.
export function hideAddedAnime() {
for(let anime of findAll("anime-grid-cell")) {
if(anime.dataset.added === "true") {
anime.classList.toggle("anime-grid-cell-hide")
}
}
}

View File

@ -5,6 +5,7 @@
grid-cell grid-cell
saturate-up saturate-up
shadow-up shadow-up
default-transition
:hover :hover
.anime-grid-title, .anime-grid-title,
@ -17,6 +18,9 @@
height 100px height 100px
margin 0.3rem margin 0.3rem
.anime-grid-cell-hide
opacity 0.05
.anime-grid-image .anime-grid-image
grid-image grid-image

View File

@ -5,6 +5,10 @@
.corner-buttons-hide-on-mobile .corner-buttons-hide-on-mobile
display none display none
button,
.button
margin 0 0.25rem
> 600px > 600px
.corner-buttons, .corner-buttons,
.corner-buttons-hide-on-mobile .corner-buttons-hide-on-mobile