web/notify.moe
Code Issues Pull Requests Activity

Added stylish mountable effect

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
config.json
View File

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

6
mixins/Navigation.pixy
View File

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

2
mixins/Postable.pixy
View File

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

2
mixins/ThreadLink.pixy
View File

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

1
pages/anime/anime.pixy
View File

@ -146,7 +146,6 @@ 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

4
pages/anime/anime.scarlet
View File

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

14
pages/animelist/animelist.pixy
View File

@ -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()
td.anime-list-item-episodes= toString(item.Episodes) + " / " + item.Anime().EpisodeCountString()
td.anime-list-item-rating= item.FinalRating()

17
pages/animelist/animelist.scarlet
View File

@ -1,2 +1,17 @@
.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

4
pages/animelistitem/animelistitem.pixy
View File

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

12
pages/dashboard/dashboard.pixy
View File

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

4
pages/profile/profile.pixy
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)
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

4
pages/settings/settings.pixy
View File

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

20
scripts/AnimeNotifier.ts
View File

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

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)