Improved large anime lists

This commit is contained in:
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