Improved large anime lists

This commit is contained in:
Eduard Urbach 2017-07-13 00:34:33 +02:00
parent da57b00ff2
commit df4b367c61
7 changed files with 56 additions and 21 deletions

View File

@ -36,8 +36,8 @@ component AnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, u
//- AnimeList(animeList, user)
component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User)
table
tbody.anime-list
table.anime-list
tbody
each item in animeList.Items
tr.anime-list-item(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/update/" + item.AnimeID)
td.anime-list-item-name
@ -58,6 +58,8 @@ component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User
td.anime-list-item-episodes
.anime-list-item-episodes-watched
.action(contenteditable=utils.SameUser(user, viewUser), data-field="Episodes", data-type="number", data-trigger="focusout", data-action="save")= item.Episodes
if item.Status == arn.AnimeListStatusWatching
.plus-episode.action(data-action="increaseEpisode", data-trigger="click") +
.anime-list-item-episodes-separator /
.anime-list-item-episodes-max= item.Anime().EpisodeCountString()
//- .anime-list-item-episodes-edit
@ -65,7 +67,7 @@ component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User
//- RawIcon("pencil")
td.anime-list-item-rating(title="Overall rating")
.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Overall", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Overall)
.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Overall", data-type="number", data-trigger="focusout", data-action="save")= utils.FormatRating(item.Rating.Overall)
//- td.anime-list-item-rating(title="Story rating")
//- .action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Story", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Story)
//- td.anime-list-item-rating(title="Visuals rating")

View File

@ -24,8 +24,21 @@
white-space nowrap
flex-basis 120px
:hover
.plus-episode
opacity 1
.anime-list-item-episodes-watched
flex 0.4
horizontal
justify-content flex-end
.plus-episode
display inline-block
cursor pointer
opacity 0
margin-left 1px
transition opacity transition-speed ease
.anime-list-item-episodes-separator
flex 0.2
@ -37,6 +50,7 @@
.anime-list-item-rating
text-align right
flex-basis 70px
.anime-list-item-actions
display none

View File

@ -25,7 +25,7 @@ component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.
InputTextArea("Notes", item.Notes, "Notes", "Your notes")
.buttons.mountable
a.ajax.button(href="/+" + viewUser.Nick + "/animelist")
a.ajax.button(href="/+" + viewUser.Nick + "/animelist/" + item.Status)
Icon("list")
span View collection
a.ajax.button(href=anime.Link())

View File

@ -52,7 +52,7 @@ component ProfileNavigation(viewUser *arn.User, uri string)
Icon("th")
span.tab-text Anime
a.button.tab.action(href="/+" + viewUser.Nick + "/animelist", data-action="diff", data-trigger="click")
a.button.tab.action(href="/+" + viewUser.Nick + "/animelist/watching", data-action="diff", data-trigger="click")
Icon("list")
span.tab-text Collection
@ -68,28 +68,29 @@ component ProfileNavigation(viewUser *arn.User, uri string)
Icon("music")
span.tab-text Tracks
//- if strings.Contains(uri, "/animelist")
//- StatusTabs("/+" + viewUser.Nick + "/animelist")
if strings.Contains(uri, "/animelist")
hr
StatusTabs("/+" + viewUser.Nick + "/animelist")
component StatusTabs(urlPrefix string)
.buttons.tabs.status-tabs
a.button.status-tab.action(href=urlPrefix + "/watching", data-action="diff", data-trigger="click")
a.button.tab.status-tab.action(href=urlPrefix + "/watching", data-action="diff", data-trigger="click")
Icon("play")
span.tab-text Watching
a.button.status-tab.action(href=urlPrefix + "/completed", data-action="diff", data-trigger="click")
a.button.tab.status-tab.action(href=urlPrefix + "/completed", data-action="diff", data-trigger="click")
Icon("check")
span.tab-text Completed
a.button.status-tab.action(href=urlPrefix + "/planned", data-action="diff", data-trigger="click")
a.button.tab.status-tab.action(href=urlPrefix + "/planned", data-action="diff", data-trigger="click")
Icon("forward")
span.tab-text Planned
a.button.status-tab.action(href=urlPrefix + "/hold", data-action="diff", data-trigger="click")
a.button.tab.status-tab.action(href=urlPrefix + "/hold", data-action="diff", data-trigger="click")
Icon("pause")
span.tab-text On Hold
a.button.status-tab.action(href=urlPrefix + "/dropped", data-action="diff", data-trigger="click")
a.button.tab.status-tab.action(href=urlPrefix + "/dropped", data-action="diff", data-trigger="click")
Icon("stop")
span.tab-text Dropped
@ -101,8 +102,9 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList,
else
.profile-watching-list.mountable
each item in animeList.Items
a.profile-watching-list-item.ajax(href=item.Anime().Link(), title=item.Anime().Title.Canonical + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")")
img.profile-watching-list-item-image.lazy(src="", data-src=item.Anime().Image.Tiny, alt=item.Anime().Title.Canonical)
if item.Status == arn.AnimeListStatusWatching || item.Status == arn.AnimeListStatusCompleted
a.profile-watching-list-item.ajax(href=item.Anime().Link(), title=item.Anime().Title.Canonical + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")")
img.profile-watching-list-item-image.lazy(src="", data-src=item.Anime().Image.Tiny, alt=item.Anime().Title.Canonical)
//- .profile-category.mountable
//- h3

View File

@ -15,7 +15,8 @@
:hover
filter saturate(1.3)
// .status-tabs
.status-tabs
// margin-top 2px
// position fixed
// top 4.6rem
// right 1.6rem

View File

@ -4,14 +4,14 @@ import { Diff } from "./Diff"
import { findAll } from "./Utils"
// Save new data from an input field
export function save(arn: AnimeNotifier, input: HTMLInputElement | HTMLTextAreaElement) {
export function save(arn: AnimeNotifier, input: HTMLElement) {
arn.loading(true)
let isContentEditable = input.isContentEditable
let obj = {}
let value = isContentEditable ? input.innerText : input.value
let value = isContentEditable ? input.innerText : (input as HTMLInputElement).value
if(input.type === "number" || input.dataset.type === "number") {
if((input as HTMLInputElement).type === "number" || input.dataset.type === "number") {
if(input.getAttribute("step") === "1" || input.dataset.step === "1") {
obj[input.dataset.field] = parseInt(value)
} else {
@ -24,7 +24,7 @@ export function save(arn: AnimeNotifier, input: HTMLInputElement | HTMLTextAreaE
if(isContentEditable) {
input.contentEditable = "false"
} else {
input.disabled = true
(input as HTMLInputElement).disabled = true
}
let apiEndpoint = arn.findAPIEndpoint(input)
@ -47,7 +47,7 @@ export function save(arn: AnimeNotifier, input: HTMLInputElement | HTMLTextAreaE
if(isContentEditable) {
input.contentEditable = "true"
} else {
input.disabled = false
(input as HTMLInputElement).disabled = false
}
return arn.reloadContent()
@ -59,6 +59,14 @@ export function closeStatusMessage(arn: AnimeNotifier) {
arn.statusMessage.close()
}
// Increase episode
export function increaseEpisode(arn: AnimeNotifier, element: HTMLElement) {
let prev = element.previousSibling as HTMLElement
let episodes = parseInt(prev.innerText)
prev.innerText = String(episodes + 1)
save(arn, prev)
}
// Load
export function load(arn: AnimeNotifier, element: HTMLElement) {
let url = element.dataset.url || (element as HTMLAnchorElement).getAttribute("href")
@ -271,7 +279,7 @@ export function removeAnimeFromCollection(arn: AnimeNotifier, button: HTMLElemen
throw body
}
return arn.app.load("/+" + userNick + "/animelist")
return arn.app.load("/+" + userNick + "/animelist/" + (arn.app.find("Status") as HTMLSelectElement).value)
})
.catch(err => arn.statusMessage.showError(err))
.then(() => arn.loading(false))

8
utils/FormatRating.go Normal file
View File

@ -0,0 +1,8 @@
package utils
import "fmt"
// FormatRating formats the rating number.
func FormatRating(rating float64) string {
return fmt.Sprintf("%.1f", rating)
}