From df4b367c61e2c463e53c9eef9c7e713cc7be004e Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Thu, 13 Jul 2017 00:34:33 +0200 Subject: [PATCH] Improved large anime lists --- pages/animelist/animelist.pixy | 8 +++++--- pages/animelist/animelist.scarlet | 14 ++++++++++++++ pages/animelistitem/animelistitem.pixy | 2 +- pages/profile/profile.pixy | 22 ++++++++++++---------- pages/profile/watching.scarlet | 3 ++- scripts/Actions.ts | 20 ++++++++++++++------ utils/FormatRating.go | 8 ++++++++ 7 files changed, 56 insertions(+), 21 deletions(-) create mode 100644 utils/FormatRating.go diff --git a/pages/animelist/animelist.pixy b/pages/animelist/animelist.pixy index d99052fe..f4e96a3b 100644 --- a/pages/animelist/animelist.pixy +++ b/pages/animelist/animelist.pixy @@ -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") diff --git a/pages/animelist/animelist.scarlet b/pages/animelist/animelist.scarlet index d339373f..faa7d726 100644 --- a/pages/animelist/animelist.scarlet +++ b/pages/animelist/animelist.scarlet @@ -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 diff --git a/pages/animelistitem/animelistitem.pixy b/pages/animelistitem/animelistitem.pixy index d63fa80b..fd7653b9 100644 --- a/pages/animelistitem/animelistitem.pixy +++ b/pages/animelistitem/animelistitem.pixy @@ -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()) diff --git a/pages/profile/profile.pixy b/pages/profile/profile.pixy index cc34463e..d16aa2c3 100644 --- a/pages/profile/profile.pixy +++ b/pages/profile/profile.pixy @@ -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 diff --git a/pages/profile/watching.scarlet b/pages/profile/watching.scarlet index dec436a5..128749b9 100644 --- a/pages/profile/watching.scarlet +++ b/pages/profile/watching.scarlet @@ -15,7 +15,8 @@ :hover filter saturate(1.3) -// .status-tabs +.status-tabs + // margin-top 2px // position fixed // top 4.6rem // right 1.6rem diff --git a/scripts/Actions.ts b/scripts/Actions.ts index d4aafbd4..9feecdc9 100644 --- a/scripts/Actions.ts +++ b/scripts/Actions.ts @@ -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)) diff --git a/utils/FormatRating.go b/utils/FormatRating.go new file mode 100644 index 00000000..8b5651d2 --- /dev/null +++ b/utils/FormatRating.go @@ -0,0 +1,8 @@ +package utils + +import "fmt" + +// FormatRating formats the rating number. +func FormatRating(rating float64) string { + return fmt.Sprintf("%.1f", rating) +}