web/notify.moe
Code Issues Pull Requests Activity

Added button to add to collection on explore pages (closes #77)

Browse Source
This commit is contained in:
Eduard Urbach 2017-11-28 23:40:53 +01:00
parent 47a6b1b60c
commit 84ffb2618f
4 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
mixins/AnimeGrid.pixy
View File

@ -1,7 +1,12 @@
component AnimeGrid(animeList []*arn.Anime, user *arn.User)
.anime-grid
each anime in animeList
a.anime-grid-cell.ajax(href="/anime/" + toString(anime.ID))
img.anime-grid-image.lazy(data-src=anime.Image("medium"), data-webp="true", alt=anime.Title.Romaji)
.anime-grid-title
.anime-grid-title-text= anime.Title.ByUser(user)
.anime-grid-cell
a.ajax(href="/anime/" + toString(anime.ID))
img.anime-grid-image.lazy(data-src=anime.Image("medium"), data-webp="true", alt=anime.Title.Romaji)
.anime-grid-title
.anime-grid-title-text= anime.Title.ByUser(user)
if user != nil && !user.AnimeList().Contains(anime.ID)
button.anime-grid-add-button.action(data-action="addAnimeToCollection", data-trigger="click", data-api="/api/animelist/" + user.ID, data-anime-id=anime.ID)
RawIcon("plus")

14
pages/anime/anime.pixy
View File

@ -10,13 +10,6 @@ component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes [
.anime-image-container.mountable
img.anime-cover-image.lazy(data-src=anime.Image("large"), data-webp="true", alt=anime.Title.ByUser(user))
//- if anime.StartDate != ""
//- .anime-start-date
//- span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
//- if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
//- span -
//- span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
.space
.anime-info
@ -25,7 +18,6 @@ component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes [
h2.anime-alternative-title.mountable
Japanese(anime.Title.Japanese)
//- h3.anime-section-name.anime-summary-header Summary
p.anime-summary.mountable= anime.Summary
AnimeActions(anime, user)
@ -35,12 +27,6 @@ component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes [
AnimeTracks(anime, tracks)
AnimeEpisodes(episodes)
//- //- h3.anime-section-name Reviews
//- //- p Coming soon.
//- .footer
//- span Powered by Kitsu.
component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
AnimeTrailer(anime)
AnimeInformation(anime)

20
scripts/Actions/AnimeList.ts
View File

@ -1,15 +1,23 @@
import { AnimeNotifier } from "../AnimeNotifier"
// Add anime to collection
export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) {
button.innerText = "Adding..."
export async function addAnimeToCollection(arn: AnimeNotifier, button: HTMLButtonElement) {
button.disabled = true
let {animeId} = button.dataset
let apiEndpoint = arn.findAPIEndpoint(button)
arn.post(apiEndpoint + "/add/" + animeId, "")
.then(() => arn.reloadContent())
.catch(err => arn.statusMessage.showError(err))
try {
await arn.post(apiEndpoint + "/add/" + animeId, "")
arn.reloadContent()
// Show status message
let response = await fetch("/api/anime/" + animeId)
let anime = await response.json()
arn.statusMessage.showInfo(`Added ${anime.title.canonical} to your collection.`)
} catch(err) {
arn.statusMessage.showError(err)
}
}
// Remove anime from collection

12
styles/anime-grid.scarlet
View File

@ -7,7 +7,8 @@
shadow-up
:hover
.anime-grid-title
.anime-grid-title,
.anime-grid-add-button
opacity 1
< 450px
@ -34,4 +35,11 @@
color white
text-shadow 0 0 3px black
font-size 80%
line-height 1.8em
line-height 1.8em
.anime-grid-add-button
opacity 0
position absolute
top 5px
right 5px
padding 0.25rem