Added stylish mountable effect

This commit is contained in:
Eduard Urbach 2017-06-20 20:13:04 +02:00
parent 540ce452fc
commit b09d3027de
14 changed files with 81 additions and 32 deletions

View File

@ -10,6 +10,7 @@
"reset", "reset",
"base", "base",
"typography", "typography",
"mountable",
"layout", "layout",
"navigation", "navigation",
"headers", "headers",

View File

@ -6,11 +6,11 @@ component Navigation(user *arn.User)
component LoggedOutMenu component LoggedOutMenu
nav#navigation nav#navigation
NavigationButton("Dash", "/", "inbox") NavigationButton("About", "/", "question-circle")
NavigationButton("Anime", "/anime", "television") NavigationButton("Anime", "/anime", "television")
NavigationButton("Forum", "/forum", "comment") NavigationButton("Forum", "/forum", "comment")
NavigationButton("Users", "/users", "globe") NavigationButton("Users", "/users", "globe")
NavigationButton("Airing", "/airing", "rss") NavigationButton("Airing", "/airing", "th")
component LoggedInMenu(user *arn.User) component LoggedInMenu(user *arn.User)
nav#navigation nav#navigation
@ -22,7 +22,7 @@ component LoggedInMenu(user *arn.User)
.extra-navigation .extra-navigation
ExtraNavigationButton("Users", "/users", "globe") ExtraNavigationButton("Users", "/users", "globe")
ExtraNavigationButton("Airing", "/airing", "rss") ExtraNavigationButton("Airing", "/airing", "th")
if user.Role == "admin" if user.Role == "admin"
ExtraNavigationButton("Admin", "/admin", "wrench") ExtraNavigationButton("Admin", "/admin", "wrench")

View File

@ -1,5 +1,5 @@
component Postable(post arn.Postable, viewUser *arn.User, highlightAuthorID string) component Postable(post arn.Postable, viewUser *arn.User, highlightAuthorID string)
.post(data-highlight=post.Author().ID == highlightAuthorID) .post.mountable(data-highlight=post.Author().ID == highlightAuthorID)
.post-author .post-author
Avatar(post.Author()) Avatar(post.Author())

View File

@ -1,5 +1,5 @@
component ThreadLink(thread *arn.Thread) component ThreadLink(thread *arn.Thread)
.thread-link(data-sticky=thread.Sticky) .thread-link.mountable(data-sticky=thread.Sticky)
.post-author.thread-author .post-author.thread-author
Avatar(thread.Author()) Avatar(thread.Author())
.thread-content-container .thread-content-container

View File

@ -146,19 +146,18 @@ component Anime(anime *arn.Anime, user *arn.User)
//- a.light-button(href=link.URL, target="_blank") //- a.light-button(href=link.URL, target="_blank")
//- Icon("external-link") //- Icon("external-link")
//- span= link.Title //- span= link.Title
a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener") a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener")
Icon("external-link") Icon("external-link")
span Kitsu span Kitsu
//- if providers.HummingBird //- if providers.HummingBird
//- a.light-button(href="https://hummingbird.me/anime/" + providers.HummingBird.providerId, target="_blank") HummingBird //- a.light-button(href="https://hummingbird.me/anime/" + providers.HummingBird.providerId, target="_blank") HummingBird
//- if providers.MyAnimeList //- if providers.MyAnimeList
//- a.light-button(href="http://myanimelist.net/anime/" + providers.MyAnimeList.providerId, target="_blank") MyAnimeList //- a.light-button(href="http://myanimelist.net/anime/" + providers.MyAnimeList.providerId, target="_blank") MyAnimeList
//- if providers.AnimePlanet //- if providers.AnimePlanet
//- a.light-button(href="http://www.anime-planet.com/anime/" + providers.AnimePlanet.providerId, target="_blank") AnimePlanet //- a.light-button(href="http://www.anime-planet.com/anime/" + providers.AnimePlanet.providerId, target="_blank") AnimePlanet
.sources .sources
p Powered by Kitsu. p Powered by Kitsu.

View File

@ -79,6 +79,10 @@
font-size 1.3rem font-size 1.3rem
color link-color color link-color
.anime-widget
margin-top 0.6rem
margin-bottom 0.4rem
< 800px < 800px
.anime-rating-categories .anime-rating-categories
vertical vertical

View File

@ -2,13 +2,13 @@ component AnimeList(animeList *arn.AnimeList)
table.anime-list table.anime-list
thead thead
tr tr
th Anime th.anime-list-item-name Anime
th Progress th.anime-list-item-episodes Progress
th Rating th.anime-list-item-rating Rating
tbody tbody
each item in animeList.Items each item in animeList.Items
tr.anime-list-item tr.anime-list-item.mountable
td td.anime-list-item-name
a.ajax(href=item.Anime().Link())= item.Anime().Title.Canonical a.ajax(href=item.Anime().Link())= item.Anime().Title.Canonical
td= toString(item.Episodes) + " / " + item.Anime().EpisodeCountString() td.anime-list-item-episodes= toString(item.Episodes) + " / " + item.Anime().EpisodeCountString()
td= item.FinalRating() td.anime-list-item-rating= item.FinalRating()

View File

@ -1,2 +1,17 @@
.anime-list .anime-list
// vertical
width 100%
tr
horizontal
.anime-list-item-name
flex 0.8
.anime-list-item-episodes
flex 0.1
text-align center
.anime-list-item-rating
flex 0.1
text-align center

View File

@ -1,5 +1,5 @@
component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.Anime) component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.Anime)
.widgets .widgets.mountable
.widget.anime-list-item-view .widget.anime-list-item-view
h2= anime.Title.Canonical h2= anime.Title.Canonical
@ -10,7 +10,7 @@ component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.
InputTextArea("notes", item.Notes, "Notes", "Notes") InputTextArea("notes", item.Notes, "Notes", "Notes")
.buttons .buttons.mountable
a.ajax.button(href="/+" + viewUser.Nick + "/animelist") a.ajax.button(href="/+" + viewUser.Nick + "/animelist")
Icon("list") Icon("list")
span View collection span View collection

View File

@ -2,7 +2,7 @@ component Dashboard(posts []*arn.Post)
h2.page-title Dash h2.page-title Dash
.widgets .widgets
.widget .widget.mountable
h3.widget-title Schedule h3.widget-title Schedule
for i := 1; i <= 5; i++ for i := 1; i <= 5; i++
@ -11,7 +11,7 @@ component Dashboard(posts []*arn.Post)
Icon("calendar-o") Icon("calendar-o")
span ... span ...
.widget .widget.mountable
h3.widget-title Forums h3.widget-title Forums
each post in posts each post in posts
@ -20,7 +20,7 @@ component Dashboard(posts []*arn.Post)
Icon(arn.GetForumIcon(post.Thread().Tags[0])) Icon(arn.GetForumIcon(post.Thread().Tags[0]))
span= post.Thread().Title span= post.Thread().Title
.widget .widget.mountable
h3.widget-title Groups h3.widget-title Groups
for i := 1; i <= 5; i++ for i := 1; i <= 5; i++
@ -29,7 +29,7 @@ component Dashboard(posts []*arn.Post)
Icon("group") Icon("group")
span ... span ...
.widget .widget.mountable
h3.widget-title Messages h3.widget-title Messages
for i := 1; i <= 5; i++ for i := 1; i <= 5; i++
@ -38,7 +38,7 @@ component Dashboard(posts []*arn.Post)
Icon("comment") Icon("comment")
span ... span ...
.widget .widget.mountable
h3.widget-title Contacts h3.widget-title Contacts
for i := 1; i <= 5; i++ for i := 1; i <= 5; i++
@ -47,7 +47,7 @@ component Dashboard(posts []*arn.Post)
Icon("address-card") Icon("address-card")
span ... span ...
.widget .widget.mountable
h3.widget-title Follow h3.widget-title Follow
a.widget-element(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener") a.widget-element(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener")

View File

@ -47,7 +47,7 @@ component ProfileHeader(viewUser *arn.User, user *arn.User)
component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, threads []*arn.Thread) component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, threads []*arn.Thread)
ProfileHeader(viewUser, user) ProfileHeader(viewUser, user)
.profile-category .profile-category.mountable
h3 h3
a.ajax(href="/+" + viewUser.Nick + "/animelist", title="View all anime") Anime a.ajax(href="/+" + viewUser.Nick + "/animelist", title="View all anime") Anime
@ -59,7 +59,7 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList,
a.profile-watching-list-item.ajax(href=item.Anime().Link(), title=item.Anime().Title.Canonical + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")") a.profile-watching-list-item.ajax(href=item.Anime().Link(), title=item.Anime().Title.Canonical + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")")
img.anime-cover-image.profile-watching-list-item-image(src=item.Anime().Image.Tiny, alt=item.Anime().Title.Canonical) img.anime-cover-image.profile-watching-list-item-image(src=item.Anime().Image.Tiny, alt=item.Anime().Title.Canonical)
.profile-category .profile-category.mountable
h3 h3
a.ajax(href="/+" + viewUser.Nick + "/threads", title="View all threads") Threads a.ajax(href="/+" + viewUser.Nick + "/threads", title="View all threads") Threads

View File

@ -1,7 +1,7 @@
component Settings(user *arn.User) component Settings(user *arn.User)
h2.page-title Settings h2.page-title Settings
.widgets .widgets
.widget .widget.mountable
h3.widget-title h3.widget-title
Icon("user") Icon("user")
span Personal span Personal
@ -10,7 +10,7 @@ component Settings(user *arn.User)
InputText("tagline", user.Tagline, "Tagline", "Text that appears below your username") InputText("tagline", user.Tagline, "Tagline", "Text that appears below your username")
InputText("website", user.Website, "Website", "Your homepage") InputText("website", user.Website, "Website", "Your homepage")
.widget .widget.mountable
h3.widget-title h3.widget-title
Icon("cubes") Icon("cubes")
span Accounts span Accounts

View File

@ -32,6 +32,7 @@ export class AnimeNotifier {
} }
onContentLoaded() { onContentLoaded() {
this.updateMountables()
this.updateAvatars() this.updateAvatars()
for(let element of findAll(".action")) { for(let element of findAll(".action")) {
@ -73,6 +74,25 @@ export class AnimeNotifier {
} }
} }
updateMountables() {
const delay = 20
const maxDelay = 1000
let time = 0
for(let element of findAll(".mountable")) {
setTimeout(() => {
window.requestAnimationFrame(() => element.classList.add("mounted"))
}, time)
time += delay
if(time > maxDelay) {
time = maxDelay
}
}
}
// onResize(e: UIEvent) { // onResize(e: UIEvent) {
// let hasScrollbar = this.app.content.clientHeight === this.app.content.scrollHeight // let hasScrollbar = this.app.content.clientHeight === this.app.content.scrollHeight

10
styles/mountable.scarlet Normal file
View File

@ -0,0 +1,10 @@
mountable-transition-speed = 400ms
.mountable
opacity 0
transform translateY(0.85rem)
transition opacity mountable-transition-speed ease, transform mountable-transition-speed ease
.mounted
opacity 1 !important
transform translateY(0)