From b09d3027de839b48f0743b34f07b4503583f6989 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Tue, 20 Jun 2017 20:13:04 +0200 Subject: [PATCH] Added stylish mountable effect --- config.json | 1 + mixins/Navigation.pixy | 6 +++--- mixins/Postable.pixy | 2 +- mixins/ThreadLink.pixy | 2 +- pages/anime/anime.pixy | 13 ++++++------- pages/anime/anime.scarlet | 4 ++++ pages/animelist/animelist.pixy | 14 +++++++------- pages/animelist/animelist.scarlet | 17 ++++++++++++++++- pages/animelistitem/animelistitem.pixy | 4 ++-- pages/dashboard/dashboard.pixy | 12 ++++++------ pages/profile/profile.pixy | 4 ++-- pages/settings/settings.pixy | 4 ++-- scripts/AnimeNotifier.ts | 20 ++++++++++++++++++++ styles/mountable.scarlet | 10 ++++++++++ 14 files changed, 81 insertions(+), 32 deletions(-) create mode 100644 styles/mountable.scarlet diff --git a/config.json b/config.json index 7b34d51c..ab0a1d90 100644 --- a/config.json +++ b/config.json @@ -10,6 +10,7 @@ "reset", "base", "typography", + "mountable", "layout", "navigation", "headers", diff --git a/mixins/Navigation.pixy b/mixins/Navigation.pixy index 244dc8be..327c141b 100644 --- a/mixins/Navigation.pixy +++ b/mixins/Navigation.pixy @@ -6,11 +6,11 @@ component Navigation(user *arn.User) component LoggedOutMenu nav#navigation - NavigationButton("Dash", "/", "inbox") + NavigationButton("About", "/", "question-circle") NavigationButton("Anime", "/anime", "television") NavigationButton("Forum", "/forum", "comment") NavigationButton("Users", "/users", "globe") - NavigationButton("Airing", "/airing", "rss") + NavigationButton("Airing", "/airing", "th") component LoggedInMenu(user *arn.User) nav#navigation @@ -22,7 +22,7 @@ component LoggedInMenu(user *arn.User) .extra-navigation ExtraNavigationButton("Users", "/users", "globe") - ExtraNavigationButton("Airing", "/airing", "rss") + ExtraNavigationButton("Airing", "/airing", "th") if user.Role == "admin" ExtraNavigationButton("Admin", "/admin", "wrench") diff --git a/mixins/Postable.pixy b/mixins/Postable.pixy index a0fce2c7..30255a72 100644 --- a/mixins/Postable.pixy +++ b/mixins/Postable.pixy @@ -1,5 +1,5 @@ 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 Avatar(post.Author()) diff --git a/mixins/ThreadLink.pixy b/mixins/ThreadLink.pixy index f57a6f8c..2c0a7952 100644 --- a/mixins/ThreadLink.pixy +++ b/mixins/ThreadLink.pixy @@ -1,5 +1,5 @@ component ThreadLink(thread *arn.Thread) - .thread-link(data-sticky=thread.Sticky) + .thread-link.mountable(data-sticky=thread.Sticky) .post-author.thread-author Avatar(thread.Author()) .thread-content-container diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index b79bc951..bfaa6370 100644 --- a/pages/anime/anime.pixy +++ b/pages/anime/anime.pixy @@ -146,19 +146,18 @@ component Anime(anime *arn.Anime, user *arn.User) //- a.light-button(href=link.URL, target="_blank") //- Icon("external-link") //- span= link.Title - a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener") Icon("external-link") span Kitsu - //- if providers.HummingBird - //- a.light-button(href="https://hummingbird.me/anime/" + providers.HummingBird.providerId, target="_blank") HummingBird + //- if providers.HummingBird + //- a.light-button(href="https://hummingbird.me/anime/" + providers.HummingBird.providerId, target="_blank") HummingBird - //- if providers.MyAnimeList - //- a.light-button(href="http://myanimelist.net/anime/" + providers.MyAnimeList.providerId, target="_blank") MyAnimeList + //- if providers.MyAnimeList + //- a.light-button(href="http://myanimelist.net/anime/" + providers.MyAnimeList.providerId, target="_blank") MyAnimeList - //- if providers.AnimePlanet - //- a.light-button(href="http://www.anime-planet.com/anime/" + providers.AnimePlanet.providerId, target="_blank") AnimePlanet + //- if providers.AnimePlanet + //- a.light-button(href="http://www.anime-planet.com/anime/" + providers.AnimePlanet.providerId, target="_blank") AnimePlanet .sources p Powered by Kitsu. diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index 0efe7152..15721b7f 100644 --- a/pages/anime/anime.scarlet +++ b/pages/anime/anime.scarlet @@ -79,6 +79,10 @@ font-size 1.3rem color link-color +.anime-widget + margin-top 0.6rem + margin-bottom 0.4rem + < 800px .anime-rating-categories vertical diff --git a/pages/animelist/animelist.pixy b/pages/animelist/animelist.pixy index f7d8e1d0..b3a3e3b4 100644 --- a/pages/animelist/animelist.pixy +++ b/pages/animelist/animelist.pixy @@ -2,13 +2,13 @@ component AnimeList(animeList *arn.AnimeList) table.anime-list thead tr - th Anime - th Progress - th Rating + th.anime-list-item-name Anime + th.anime-list-item-episodes Progress + th.anime-list-item-rating Rating tbody each item in animeList.Items - tr.anime-list-item - td + tr.anime-list-item.mountable + td.anime-list-item-name a.ajax(href=item.Anime().Link())= item.Anime().Title.Canonical - td= toString(item.Episodes) + " / " + item.Anime().EpisodeCountString() - td= item.FinalRating() \ No newline at end of file + td.anime-list-item-episodes= toString(item.Episodes) + " / " + item.Anime().EpisodeCountString() + td.anime-list-item-rating= item.FinalRating() \ No newline at end of file diff --git a/pages/animelist/animelist.scarlet b/pages/animelist/animelist.scarlet index 9c77fd1d..c67e96dc 100644 --- a/pages/animelist/animelist.scarlet +++ b/pages/animelist/animelist.scarlet @@ -1,2 +1,17 @@ .anime-list - // \ No newline at end of file + 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 \ No newline at end of file diff --git a/pages/animelistitem/animelistitem.pixy b/pages/animelistitem/animelistitem.pixy index 87193f18..f15815a6 100644 --- a/pages/animelistitem/animelistitem.pixy +++ b/pages/animelistitem/animelistitem.pixy @@ -1,5 +1,5 @@ component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.Anime) - .widgets + .widgets.mountable .widget.anime-list-item-view h2= anime.Title.Canonical @@ -10,7 +10,7 @@ component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn. InputTextArea("notes", item.Notes, "Notes", "Notes") - .buttons + .buttons.mountable a.ajax.button(href="/+" + viewUser.Nick + "/animelist") Icon("list") span View collection diff --git a/pages/dashboard/dashboard.pixy b/pages/dashboard/dashboard.pixy index 370fca9f..ab0d9c5d 100644 --- a/pages/dashboard/dashboard.pixy +++ b/pages/dashboard/dashboard.pixy @@ -2,7 +2,7 @@ component Dashboard(posts []*arn.Post) h2.page-title Dash .widgets - .widget + .widget.mountable h3.widget-title Schedule for i := 1; i <= 5; i++ @@ -11,7 +11,7 @@ component Dashboard(posts []*arn.Post) Icon("calendar-o") span ... - .widget + .widget.mountable h3.widget-title Forums each post in posts @@ -20,7 +20,7 @@ component Dashboard(posts []*arn.Post) Icon(arn.GetForumIcon(post.Thread().Tags[0])) span= post.Thread().Title - .widget + .widget.mountable h3.widget-title Groups for i := 1; i <= 5; i++ @@ -29,7 +29,7 @@ component Dashboard(posts []*arn.Post) Icon("group") span ... - .widget + .widget.mountable h3.widget-title Messages for i := 1; i <= 5; i++ @@ -38,7 +38,7 @@ component Dashboard(posts []*arn.Post) Icon("comment") span ... - .widget + .widget.mountable h3.widget-title Contacts for i := 1; i <= 5; i++ @@ -47,7 +47,7 @@ component Dashboard(posts []*arn.Post) Icon("address-card") span ... - .widget + .widget.mountable h3.widget-title Follow a.widget-element(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener") diff --git a/pages/profile/profile.pixy b/pages/profile/profile.pixy index 2800eab1..e8be1dc1 100644 --- a/pages/profile/profile.pixy +++ b/pages/profile/profile.pixy @@ -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) ProfileHeader(viewUser, user) - .profile-category + .profile-category.mountable h3 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) + ")") 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 a.ajax(href="/+" + viewUser.Nick + "/threads", title="View all threads") Threads diff --git a/pages/settings/settings.pixy b/pages/settings/settings.pixy index c3c196aa..c3a29d6d 100644 --- a/pages/settings/settings.pixy +++ b/pages/settings/settings.pixy @@ -1,7 +1,7 @@ component Settings(user *arn.User) h2.page-title Settings .widgets - .widget + .widget.mountable h3.widget-title Icon("user") span Personal @@ -10,7 +10,7 @@ component Settings(user *arn.User) InputText("tagline", user.Tagline, "Tagline", "Text that appears below your username") InputText("website", user.Website, "Website", "Your homepage") - .widget + .widget.mountable h3.widget-title Icon("cubes") span Accounts diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index d33478f0..26b24300 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -32,6 +32,7 @@ export class AnimeNotifier { } onContentLoaded() { + this.updateMountables() this.updateAvatars() 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) { // let hasScrollbar = this.app.content.clientHeight === this.app.content.scrollHeight diff --git a/styles/mountable.scarlet b/styles/mountable.scarlet new file mode 100644 index 00000000..6fb00d36 --- /dev/null +++ b/styles/mountable.scarlet @@ -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) \ No newline at end of file