diff --git a/pages/animelist/animelist.pixy b/pages/animelist/animelist.pixy index 9c1c654f..799bffbb 100644 --- a/pages/animelist/animelist.pixy +++ b/pages/animelist/animelist.pixy @@ -39,47 +39,54 @@ component AnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, u AnimeList(animeLists[arn.AnimeListStatusDropped], viewUser, user) component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User) - table.anime-list - tbody - each item in animeList.Items - tr.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]") - td.anime-list-item-image-container - a.ajax(href=item.Anime().Link()) - img.anime-list-item-image.lazy(data-src=item.Anime().Image("small"), data-webp="true", alt=item.Anime().Title.ByUser(user)) + .anime-list + each item in animeList.Items + .anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]") + .anime-list-item-image-container + a.ajax(href=item.Anime().Link()) + img.anime-list-item-image.lazy(data-src=item.Anime().Image("small"), data-webp="true", alt=item.Anime().Title.ByUser(user)) - td.anime-list-item-name - a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.ByUser(user) + .anime-list-item-name + a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.ByUser(user) - td.anime-list-item-actions - if user != nil && item.Status == arn.AnimeListStatusWatching - //- if user.ID == "KpdWUlPzR" - //- a(href=arn.Nyaa.GetLink(item.Anime()), title="Search on Nyaa", target="_blank", rel="noopener") - //- RawIcon("download") - //- else - if item.Anime().EpisodeByNumber(item.Episodes + 1) != nil - for _, link := range item.Anime().EpisodeByNumber(item.Episodes + 1).Links - a(href=link, title="Watch episode " + toString(item.Episodes + 1) + " on twist.moe", target="_blank", rel="noopener") - RawIcon("eye") + .anime-list-item-actions + if user != nil && item.Status == arn.AnimeListStatusWatching + //- if user.ID == "KpdWUlPzR" + //- a(href=arn.Nyaa.GetLink(item.Anime()), title="Search on Nyaa", target="_blank", rel="noopener") + //- RawIcon("download") + //- else + if item.Anime().EpisodeByNumber(item.Episodes + 1) != nil + for _, link := range item.Anime().EpisodeByNumber(item.Episodes + 1).Links + a(href=link, title="Watch episode " + toString(item.Episodes + 1) + " on twist.moe", target="_blank", rel="noopener") + RawIcon("eye") - td.anime-list-item-airing-date - if (item.Status == arn.AnimeListStatusWatching || item.Status == arn.AnimeListStatusPlanned) && item.Anime().UpcomingEpisode() != nil - span.utc-airing-date(data-start-date=item.Anime().UpcomingEpisode().Episode.AiringDate.Start, data-end-date=item.Anime().UpcomingEpisode().Episode.AiringDate.End, data-episode-number=item.Anime().UpcomingEpisode().Episode.Number) + .anime-list-item-airing-date + if (item.Status == arn.AnimeListStatusWatching || item.Status == arn.AnimeListStatusPlanned) && item.Anime().UpcomingEpisode() != nil + span.utc-airing-date(data-start-date=item.Anime().UpcomingEpisode().Episode.AiringDate.Start, data-end-date=item.Anime().UpcomingEpisode().Episode.AiringDate.End, data-episode-number=item.Anime().UpcomingEpisode().Episode.Number) - td.anime-list-item-episodes - if item.Status != arn.AnimeListStatusCompleted - .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") + + if item.Status != arn.AnimeListStatusCompleted + .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") + + else + .plus-episode-dummy + - .anime-list-item-episodes-separator / - .anime-list-item-episodes-max= item.Anime().EpisodeCountString() + .anime-list-item-episodes-separator / + .anime-list-item-episodes-max= item.Anime().EpisodeCountString() - 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")= 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") - //- .action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Visuals", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Visuals) - //- td.anime-list-item-rating(title="Soundtrack rating") - //- .action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Soundtrack", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Soundtrack) + .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")= utils.FormatRating(item.Rating.Overall) + + //- if item.Status == arn.AnimeListStatusCompleted + //- .anime-list-item-rating(title="Story rating") + //- span.rating-label S: + //- .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) + //- .anime-list-item-rating(title="Visuals rating") + //- span.rating-label V: + //- .action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Visuals", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Visuals) + //- .anime-list-item-rating(title="Soundtrack rating") + //- span.rating-label M: + //- .action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Soundtrack", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Soundtrack) diff --git a/pages/animelist/animelist.scarlet b/pages/animelist/animelist.scarlet index 7a78a90b..461396b3 100644 --- a/pages/animelist/animelist.scarlet +++ b/pages/animelist/animelist.scarlet @@ -8,11 +8,10 @@ vertical .anime-list-item + table-row horizontal - - td - display flex - align-items center + align-items center + padding-right 1rem .anime-list-item-image-container padding 0 @@ -26,6 +25,7 @@ .anime-list-item-name flex 1 + margin 0.5rem 1rem clip-long-text a @@ -38,7 +38,8 @@ justify-content flex-end text-align right white-space nowrap - width 130px + flex-basis 80px + flex-shrink 1 :hover .plus-episode @@ -46,7 +47,7 @@ pointer-events auto .anime-list-item-episodes-watched - flex 0.4 + flex 0.45 horizontal justify-content flex-end @@ -58,18 +59,28 @@ margin-left 1px transition opacity transition-speed ease +.plus-episode-dummy + display inline-block + opacity 0 + .anime-list-item-episodes-separator - flex 0.2 + flex 0.1 opacity 0.5 .anime-list-item-episodes-max - flex 0.4 + flex 0.3 opacity 0.5 .anime-list-item-rating + horizontal text-align right justify-content flex-end - width 65px + flex-basis 65px + flex-shrink 1 + +// .rating-label +// opacity 0.5 +// margin-right 0.2rem .anime-list-item-actions display none !important @@ -81,7 +92,8 @@ > 740px .anime-list-item-actions display flex !important - width 30px + flex-basis 30px + flex-shrink 1 :empty display none !important @@ -93,10 +105,14 @@ .anime-list-item-airing-date display flex !important text-align right - width 150px + flex-basis 150px + flex-shrink 1 opacity 0.8 justify-content flex-end + .anime-list-item-episodes + flex-basis 130px + < 1100px .anime-list-item-rating display none !important diff --git a/styles/table.scarlet b/styles/table.scarlet index 51a79bc5..d84fa5b7 100644 --- a/styles/table.scarlet +++ b/styles/table.scarlet @@ -1,27 +1,39 @@ -table +mixin table-root width 100% max-width table-width-normal margin 0 auto -tr +mixin table-row border-bottom-width 1px border-bottom-style solid border-bottom-color rgba(0, 0, 0, 0.05) + background-color transparent + + :hover + background-color table-row-hover-background + :last-child border none -td +mixin table-cell padding 0.5rem 1rem +table + table-root + +tr + table-row + +td + table-cell + th font-size 1.2em text-align left padding 0.5rem 1rem font-weight bold -tbody +thead tr - background-color transparent - :hover - background-color table-row-hover-background \ No newline at end of file + background-color transparent \ No newline at end of file