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

31
pages/animelist/animelist.pixy
View File

@ -39,18 +39,17 @@ 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
.anime-list
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
.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
.anime-list-item-name
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.ID == "KpdWUlPzR"
//- a(href=arn.Nyaa.GetLink(item.Anime()), title="Search on Nyaa", target="_blank", rel="noopener")
@ -61,25 +60,33 @@ component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User
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
.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
.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()
td.anime-list-item-rating(title="Overall rating")
.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")
//- 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)
//- td.anime-list-item-rating(title="Visuals rating")
//- .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)
//- td.anime-list-item-rating(title="Soundtrack rating")
//- .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)

36
pages/animelist/animelist.scarlet
View File

@ -8,11 +8,10 @@
vertical
.anime-list-item
table-row
horizontal
td
display flex
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

26
styles/table.scarlet
View File

@ -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