web/notify.moe
Code Issues Pull Requests Activity

Improved anime list rendering

Browse Source
This commit is contained in:
Eduard Urbach 2017-12-04 13:23:45 +01:00
parent e8a8e5fb5a
commit 44ff8ab559
3 changed files with 91 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
pages/animelist/animelist.pixy
View File

@ -39,47 +39,54 @@ component AnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, u
AnimeList(animeLists[arn.AnimeListStatusDropped], viewUser, user) AnimeList(animeLists[arn.AnimeListStatusDropped], viewUser, user)
component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User) component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User)
table.anime-list .anime-list
tbody each item in animeList.Items
each item in animeList.Items .anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]")
tr.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]") .anime-list-item-image-container
td.anime-list-item-image-container a.ajax(href=item.Anime().Link())
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))
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 .anime-list-item-name
a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.ByUser(user) a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.ByUser(user)
td.anime-list-item-actions .anime-list-item-actions
if user != nil && item.Status == arn.AnimeListStatusWatching if user != nil && item.Status == arn.AnimeListStatusWatching
//- if user.ID == "KpdWUlPzR" //- if user.ID == "KpdWUlPzR"
//- a(href=arn.Nyaa.GetLink(item.Anime()), title="Search on Nyaa", target="_blank", rel="noopener") //- a(href=arn.Nyaa.GetLink(item.Anime()), title="Search on Nyaa", target="_blank", rel="noopener")
//- RawIcon("download") //- RawIcon("download")
//- else //- else
if item.Anime().EpisodeByNumber(item.Episodes + 1) != nil if item.Anime().EpisodeByNumber(item.Episodes + 1) != nil
for _, link := range item.Anime().EpisodeByNumber(item.Episodes + 1).Links 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") a(href=link, title="Watch episode " + toString(item.Episodes + 1) + " on twist.moe", target="_blank", rel="noopener")
RawIcon("eye") RawIcon("eye")
td.anime-list-item-airing-date .anime-list-item-airing-date
if (item.Status == arn.AnimeListStatusWatching || item.Status == arn.AnimeListStatusPlanned) && item.Anime().UpcomingEpisode() != nil 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) 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
if item.Status != arn.AnimeListStatusCompleted .anime-list-item-episodes
.anime-list-item-episodes-watched .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 .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 / if item.Status == arn.AnimeListStatusWatching
.anime-list-item-episodes-max= item.Anime().EpisodeCountString() .plus-episode.action(data-action="increaseEpisode", data-trigger="click") +
else
.plus-episode-dummy +
td.anime-list-item-rating(title="Overall rating") .anime-list-item-episodes-separator /
.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Overall", data-type="number", data-trigger="focusout", data-action="save")= utils.FormatRating(item.Rating.Overall) .anime-list-item-episodes-max= item.Anime().EpisodeCountString()
//- 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) .anime-list-item-rating(title="Overall rating")
//- td.anime-list-item-rating(title="Visuals 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)
//- .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") //- if item.Status == arn.AnimeListStatusCompleted
//- .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="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)

38
pages/animelist/animelist.scarlet
View File

@ -8,11 +8,10 @@
vertical vertical
.anime-list-item .anime-list-item
table-row
horizontal horizontal
align-items center
td padding-right 1rem
display flex
align-items center
.anime-list-item-image-container .anime-list-item-image-container
padding 0 padding 0
@ -26,6 +25,7 @@
.anime-list-item-name .anime-list-item-name
flex 1 flex 1
margin 0.5rem 1rem
clip-long-text clip-long-text
a a
@ -38,7 +38,8 @@
justify-content flex-end justify-content flex-end
text-align right text-align right
white-space nowrap white-space nowrap
width 130px flex-basis 80px
flex-shrink 1
:hover :hover
.plus-episode .plus-episode
@ -46,7 +47,7 @@
pointer-events auto pointer-events auto
.anime-list-item-episodes-watched .anime-list-item-episodes-watched
flex 0.4 flex 0.45
horizontal horizontal
justify-content flex-end justify-content flex-end
@ -58,18 +59,28 @@
margin-left 1px margin-left 1px
transition opacity transition-speed ease transition opacity transition-speed ease
.plus-episode-dummy
display inline-block
opacity 0
.anime-list-item-episodes-separator .anime-list-item-episodes-separator
flex 0.2 flex 0.1
opacity 0.5 opacity 0.5
.anime-list-item-episodes-max .anime-list-item-episodes-max
flex 0.4 flex 0.3
opacity 0.5 opacity 0.5
.anime-list-item-rating .anime-list-item-rating
horizontal
text-align right text-align right
justify-content flex-end 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 .anime-list-item-actions
display none !important display none !important
@ -81,7 +92,8 @@
> 740px > 740px
.anime-list-item-actions .anime-list-item-actions
display flex !important display flex !important
width 30px flex-basis 30px
flex-shrink 1
:empty :empty
display none !important display none !important
@ -93,10 +105,14 @@
.anime-list-item-airing-date .anime-list-item-airing-date
display flex !important display flex !important
text-align right text-align right
width 150px flex-basis 150px
flex-shrink 1
opacity 0.8 opacity 0.8
justify-content flex-end justify-content flex-end
.anime-list-item-episodes
flex-basis 130px
< 1100px < 1100px
.anime-list-item-rating .anime-list-item-rating
display none !important display none !important

26
styles/table.scarlet
View File

@ -1,27 +1,39 @@
table mixin table-root
width 100% width 100%
max-width table-width-normal max-width table-width-normal
margin 0 auto margin 0 auto
tr mixin table-row
border-bottom-width 1px border-bottom-width 1px
border-bottom-style solid border-bottom-style solid
border-bottom-color rgba(0, 0, 0, 0.05) border-bottom-color rgba(0, 0, 0, 0.05)
background-color transparent
:hover
background-color table-row-hover-background
:last-child :last-child
border none border none
td mixin table-cell
padding 0.5rem 1rem padding 0.5rem 1rem
table
table-root
tr
table-row
td
table-cell
th th
font-size 1.2em font-size 1.2em
text-align left text-align left
padding 0.5rem 1rem padding 0.5rem 1rem
font-weight bold font-weight bold
tbody thead
tr tr
background-color transparent
:hover :hover
background-color table-row-hover-background background-color transparent