Improved page transitions
This commit is contained in:
parent
027fea7836
commit
0027653ca8
@ -7,18 +7,18 @@ component Anime(anime *arn.Anime, listItem *arn.AnimeListItem, tracks []*arn.Sou
|
|||||||
|
|
||||||
component AnimeMainColumn(anime *arn.Anime, listItem *arn.AnimeListItem, tracks []*arn.SoundTrack, amvs []*arn.AMV, amvAppearances []*arn.AMV, episodes []*arn.AnimeEpisode, user *arn.User)
|
component AnimeMainColumn(anime *arn.Anime, listItem *arn.AnimeListItem, tracks []*arn.SoundTrack, amvs []*arn.AMV, amvAppearances []*arn.AMV, episodes []*arn.AnimeEpisode, user *arn.User)
|
||||||
.anime-header(data-id=anime.ID)
|
.anime-header(data-id=anime.ID)
|
||||||
a.anime-image-container.mountable(href=anime.ImageLink("original"), target="_blank")
|
a.anime-image-container.mountable(href=anime.ImageLink("original"), target="_blank", data-mountable-type="header")
|
||||||
img.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
|
img.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
|
||||||
|
|
||||||
.space
|
.space
|
||||||
|
|
||||||
.anime-info
|
.anime-info
|
||||||
h1.anime-title.mountable(title=anime.Type)= anime.Title.ByUser(user)
|
h1.anime-title.mountable(title=anime.Type, data-mountable-type="header")= anime.Title.ByUser(user)
|
||||||
|
|
||||||
h2.anime-alternative-title.mountable
|
h2.anime-alternative-title.mountable(data-mountable-type="header")
|
||||||
Japanese(anime.Title.Japanese)
|
Japanese(anime.Title.Japanese)
|
||||||
|
|
||||||
p.anime-summary.mountable= anime.Summary
|
p.anime-summary.mountable(data-mountable-type="header")= anime.Summary
|
||||||
|
|
||||||
.anime-summary-footer-container
|
.anime-summary-footer-container
|
||||||
.anime-summary-footer
|
.anime-summary-footer
|
||||||
@ -43,26 +43,26 @@ component AnimeActions(anime *arn.Anime, listItem *arn.AnimeListItem, user *arn.
|
|||||||
if user != nil
|
if user != nil
|
||||||
.buttons.anime-actions
|
.buttons.anime-actions
|
||||||
if user.Role == "editor" || user.Role == "admin"
|
if user.Role == "editor" || user.Role == "admin"
|
||||||
a.button.mountable(href=anime.Link() + "/edit", data-mountable-type="footer")
|
a.button.mountable(href=anime.Link() + "/edit", data-mountable-type="header")
|
||||||
Icon("pencil-square-o")
|
Icon("pencil-square-o")
|
||||||
span Edit anime
|
span Edit anime
|
||||||
|
|
||||||
if listItem != nil
|
if listItem != nil
|
||||||
a.button.mountable(href="/+" + user.Nick + "/animelist/anime/" + anime.ID, data-mountable-type="footer")
|
a.button.mountable(href="/+" + user.Nick + "/animelist/anime/" + anime.ID, data-mountable-type="header")
|
||||||
Icon("pencil")
|
Icon("pencil")
|
||||||
span= listItem.StatusHumanReadable()
|
span= listItem.StatusHumanReadable()
|
||||||
else
|
else
|
||||||
button.mountable.action(data-api="/api/animelist/" + user.ID, data-action="addAnimeToCollection", data-trigger="click", data-anime-id=anime.ID, data-mountable-type="footer")
|
button.mountable.action(data-api="/api/animelist/" + user.ID, data-action="addAnimeToCollection", data-trigger="click", data-anime-id=anime.ID, data-mountable-type="header")
|
||||||
Icon("plus")
|
Icon("plus")
|
||||||
span Add to collection
|
span Add to collection
|
||||||
|
|
||||||
component AnimeRatings(anime *arn.Anime, user *arn.User)
|
component AnimeRatings(anime *arn.Anime, user *arn.User)
|
||||||
section.anime-section.mountable
|
section.anime-section.mountable(data-mountable-type="sidebar")
|
||||||
h3.anime-section-name Ratings
|
h3.anime-section-name Ratings
|
||||||
|
|
||||||
table.anime-info-table
|
table.anime-info-table
|
||||||
tbody
|
tbody
|
||||||
tr.mountable(data-mountable-type="info")
|
tr.mountable(data-mountable-type="ratings")
|
||||||
td.anime-info-key
|
td.anime-info-key
|
||||||
if anime.Status == "upcoming"
|
if anime.Status == "upcoming"
|
||||||
span Hype:
|
span Hype:
|
||||||
@ -72,56 +72,56 @@ component AnimeRatings(anime *arn.Anime, user *arn.User)
|
|||||||
Rating(anime.Rating.Overall, anime.Rating.Count.Overall, user)
|
Rating(anime.Rating.Overall, anime.Rating.Count.Overall, user)
|
||||||
|
|
||||||
if anime.Rating.Count.Story > 0
|
if anime.Rating.Count.Story > 0
|
||||||
tr.mountable(data-mountable-type="info")
|
tr.mountable(data-mountable-type="ratings")
|
||||||
td.anime-info-key Story:
|
td.anime-info-key Story:
|
||||||
td.anime-info-value
|
td.anime-info-value
|
||||||
Rating(anime.Rating.Story, anime.Rating.Count.Story, user)
|
Rating(anime.Rating.Story, anime.Rating.Count.Story, user)
|
||||||
|
|
||||||
if anime.Rating.Count.Visuals > 0
|
if anime.Rating.Count.Visuals > 0
|
||||||
tr.mountable(data-mountable-type="info")
|
tr.mountable(data-mountable-type="ratings")
|
||||||
td.anime-info-key Visuals:
|
td.anime-info-key Visuals:
|
||||||
td.anime-info-value
|
td.anime-info-value
|
||||||
Rating(anime.Rating.Visuals, anime.Rating.Count.Visuals, user)
|
Rating(anime.Rating.Visuals, anime.Rating.Count.Visuals, user)
|
||||||
|
|
||||||
if anime.Rating.Count.Soundtrack > 0
|
if anime.Rating.Count.Soundtrack > 0
|
||||||
tr.mountable(data-mountable-type="info")
|
tr.mountable(data-mountable-type="ratings")
|
||||||
td.anime-info-key Soundtrack:
|
td.anime-info-key Soundtrack:
|
||||||
td.anime-info-value
|
td.anime-info-value
|
||||||
Rating(anime.Rating.Soundtrack, anime.Rating.Count.Soundtrack, user)
|
Rating(anime.Rating.Soundtrack, anime.Rating.Count.Soundtrack, user)
|
||||||
|
|
||||||
component AnimePopularity(anime *arn.Anime)
|
component AnimePopularity(anime *arn.Anime)
|
||||||
if anime.Popularity.Total() > 0
|
if anime.Popularity.Total() > 0
|
||||||
section.anime-section.mountable
|
section.anime-section.mountable(data-mountable-type="sidebar")
|
||||||
h3.anime-section-name Popularity
|
h3.anime-section-name Popularity
|
||||||
|
|
||||||
table.anime-info-table
|
table.anime-info-table
|
||||||
if anime.Popularity.Watching > 0
|
if anime.Popularity.Watching > 0
|
||||||
tr.mountable(data-mountable-type="info")
|
tr.mountable(data-mountable-type="popularity")
|
||||||
td.anime-info-key Watching:
|
td.anime-info-key Watching:
|
||||||
td.anime-info-value= anime.Popularity.Watching
|
td.anime-info-value= anime.Popularity.Watching
|
||||||
|
|
||||||
if anime.Popularity.Completed > 0
|
if anime.Popularity.Completed > 0
|
||||||
tr.mountable(data-mountable-type="info")
|
tr.mountable(data-mountable-type="popularity")
|
||||||
td.anime-info-key Completed:
|
td.anime-info-key Completed:
|
||||||
td.anime-info-value= anime.Popularity.Completed
|
td.anime-info-value= anime.Popularity.Completed
|
||||||
|
|
||||||
if anime.Popularity.Planned > 0
|
if anime.Popularity.Planned > 0
|
||||||
tr.mountable(data-mountable-type="info")
|
tr.mountable(data-mountable-type="popularity")
|
||||||
td.anime-info-key Planned:
|
td.anime-info-key Planned:
|
||||||
td.anime-info-value= anime.Popularity.Planned
|
td.anime-info-value= anime.Popularity.Planned
|
||||||
|
|
||||||
if anime.Popularity.Hold > 0
|
if anime.Popularity.Hold > 0
|
||||||
tr.mountable(data-mountable-type="info")
|
tr.mountable(data-mountable-type="popularity")
|
||||||
td.anime-info-key On hold:
|
td.anime-info-key On hold:
|
||||||
td.anime-info-value= anime.Popularity.Hold
|
td.anime-info-value= anime.Popularity.Hold
|
||||||
|
|
||||||
if anime.Popularity.Dropped > 0
|
if anime.Popularity.Dropped > 0
|
||||||
tr.mountable(data-mountable-type="info")
|
tr.mountable(data-mountable-type="popularity")
|
||||||
td.anime-info-key Dropped:
|
td.anime-info-key Dropped:
|
||||||
td.anime-info-value= anime.Popularity.Dropped
|
td.anime-info-value= anime.Popularity.Dropped
|
||||||
|
|
||||||
component AnimeLinks(anime *arn.Anime, user *arn.User)
|
component AnimeLinks(anime *arn.Anime, user *arn.User)
|
||||||
section.anime-section.mountable
|
section.anime-section.mountable(data-mountable-type="sidebar")
|
||||||
h3.anime-section-name Links
|
h3.anime-section-name Links
|
||||||
|
|
||||||
.light-button-group
|
.light-button-group
|
||||||
@ -146,19 +146,19 @@ component AnimeLinks(anime *arn.Anime, user *arn.User)
|
|||||||
component AnimeGenres(anime *arn.Anime)
|
component AnimeGenres(anime *arn.Anime)
|
||||||
.anime-genres
|
.anime-genres
|
||||||
each genre in anime.Genres
|
each genre in anime.Genres
|
||||||
a.anime-genre.mountable(href="/genre/" + strings.ToLower(genre), data-mountable-type="footer")
|
a.anime-genre.mountable(href="/genre/" + strings.ToLower(genre), data-mountable-type="header")
|
||||||
span= genre
|
span= genre
|
||||||
|
|
||||||
component AnimeTrailer(anime *arn.Anime)
|
component AnimeTrailer(anime *arn.Anime)
|
||||||
if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
|
if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
|
||||||
section.anime-section.mountable
|
section.anime-section.mountable(data-mountable-type="sidebar")
|
||||||
h3.anime-section-name Trailer
|
h3.anime-section-name Trailer
|
||||||
.anime-trailer.video-container
|
.anime-trailer.video-container
|
||||||
iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")
|
iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")
|
||||||
|
|
||||||
component AnimeFriends(friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem)
|
component AnimeFriends(friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem)
|
||||||
if len(friends) > 0
|
if len(friends) > 0
|
||||||
section.anime-section.mountable
|
section.anime-section.mountable(data-mountable-type="sidebar")
|
||||||
h3.anime-section-name Friends
|
h3.anime-section-name Friends
|
||||||
|
|
||||||
.anime-friends
|
.anime-friends
|
||||||
@ -173,7 +173,7 @@ component AnimeFriends(friends []*arn.User, listItems map[*arn.User]*arn.AnimeLi
|
|||||||
FriendEntry(friend, listItems)
|
FriendEntry(friend, listItems)
|
||||||
|
|
||||||
component AnimeInformation(anime *arn.Anime)
|
component AnimeInformation(anime *arn.Anime)
|
||||||
section.anime-section.mountable
|
section.anime-section.mountable(data-mountable-type="sidebar")
|
||||||
h3.anime-section-name Information
|
h3.anime-section-name Information
|
||||||
table.anime-info-table
|
table.anime-info-table
|
||||||
tr.mountable(data-mountable-type="info")
|
tr.mountable(data-mountable-type="info")
|
||||||
|
|||||||
@ -774,7 +774,7 @@ export default class AnimeNotifier {
|
|||||||
|
|
||||||
modifyDelayed(elements: IterableIterator<HTMLElement>, func: (element: HTMLElement) => void) {
|
modifyDelayed(elements: IterableIterator<HTMLElement>, func: (element: HTMLElement) => void) {
|
||||||
const maxDelay = 2500
|
const maxDelay = 2500
|
||||||
const delay = 18
|
const delay = 40
|
||||||
|
|
||||||
let time = 0
|
let time = 0
|
||||||
let start = Date.now()
|
let start = Date.now()
|
||||||
@ -859,8 +859,8 @@ export default class AnimeNotifier {
|
|||||||
this.unmountMountables()
|
this.unmountMountables()
|
||||||
this.loading(true)
|
this.loading(true)
|
||||||
|
|
||||||
// Delay by transition-speed
|
// Delay by mountable-transition-speed
|
||||||
await delay(150)
|
await delay(250)
|
||||||
|
|
||||||
let html = await request
|
let html = await request
|
||||||
|
|
||||||
|
|||||||
@ -143,4 +143,4 @@ const anime-image-large-height = 350px
|
|||||||
// Timings
|
// Timings
|
||||||
fade-speed = 150ms
|
fade-speed = 150ms
|
||||||
transition-speed = 150ms
|
transition-speed = 150ms
|
||||||
mountable-transition-speed = 150ms
|
mountable-transition-speed = 250ms
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user