Improved anime list rendering
This commit is contained in:
parent
e8a8e5fb5a
commit
44ff8ab559
@ -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
|
||||
|
||||
.anime-list-item-episodes-separator /
|
||||
.anime-list-item-episodes-max= item.Anime().EpisodeCountString()
|
||||
if item.Status == arn.AnimeListStatusWatching
|
||||
.plus-episode.action(data-action="increaseEpisode", data-trigger="click") +
|
||||
else
|
||||
.plus-episode-dummy +
|
||||
|
||||
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-episodes-separator /
|
||||
.anime-list-item-episodes-max= item.Anime().EpisodeCountString()
|
||||
|
||||
.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)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
background-color transparent
|
||||
Loading…
Reference in New Issue
Block a user