web/notify.moe
Code Issues Pull Requests Activity

Redesign

Browse Source
This commit is contained in:
Eduard Urbach 2017-11-03 18:10:31 +01:00
parent a459f2aa9a
commit 8af94d4800
10 changed files with 172 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
mixins/Sidebar.pixy → layout/sidebar/sidebar.pixy
View File

@ -8,7 +8,7 @@ component Sidebar(user *arn.User)
if user != nil if user != nil
SidebarButton("Home", "/animelist/watching", "home") SidebarButton("Home", "/animelist/watching", "home")
SidebarButton("Dash", "/dashboard", "tachometer") //- SidebarButton("Dash", "/dashboard", "tachometer")
else else
SidebarButton("Home", "/", "home") SidebarButton("Home", "/", "home")
@ -22,13 +22,13 @@ component Sidebar(user *arn.User)
//- SidebarButton("Search", "/search", "search") //- SidebarButton("Search", "/search", "search")
if user != nil if user != nil
if user.Role == "admin" //- if user.Role == "admin"
SidebarButton("Groups", "/groups", "users") //- SidebarButton("Groups", "/groups", "users")
SidebarButton("Shop", "/shop", "shopping-cart") SidebarButton("Shop", "/shop", "shopping-cart")
if user.Role == "admin" || user.Role == "editor" //- if user.Role == "admin" || user.Role == "editor"
SidebarButton("Statistics", "/statistics", "pie-chart") //- SidebarButton("Statistics", "/statistics", "pie-chart")
SidebarButton("Settings", "/settings", "cog") SidebarButton("Settings", "/settings", "cog")

0
styles/sidebar.scarlet → layout/sidebar/sidebar.scarlet
View File

231
pages/anime/anime.pixy
View File

@ -1,134 +1,133 @@
component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User) component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
//- AnimeTabs(anime) //- AnimeTabs(anime)
.anime
.anime-header(data-id=anime.ID) .anime-header(data-id=anime.ID)
if anime.Image.Small != "" if anime.Image.Large != ""
.anime-image-container .anime-image-container
img.anime-cover-image(src=anime.Image.Small, alt=anime.Title.ByUser(user)) img.anime-cover-image(src=anime.Image.Large, alt=anime.Title.ByUser(user))
if anime.StartDate != "" //- if anime.StartDate != ""
.anime-start-date //- .anime-start-date
span(title="Start date: " + anime.StartDate)= anime.StartDate[:4] //- span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4] //- if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
span - //- span -
span(title="End date: " + anime.EndDate)= anime.EndDate[:4] //- span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
.space .space
.anime-info .anime-info
h1.anime-title(title=anime.Type)= anime.Title.ByUser(user) h1.anime-title(title=anime.Type)= anime.Title.ByUser(user)
if anime.Title.Japanese != anime.Title.Canonical
h2.anime-alternative-title h2.anime-alternative-title
Japanese(anime.Title.Japanese) Japanese(anime.Title.Japanese)
//- h3.anime-section-name.anime-summary-header Summary //- h3.anime-section-name.anime-summary-header Summary
p.anime-summary= anime.Summary p.anime-summary= anime.Summary
if user != nil
.buttons.anime-actions
if user.Role == "editor" || user.Role == "admin"
a.button.ajax(href=anime.Link() + "/edit")
Icon("pencil-square-o")
span Edit anime
if user.AnimeList().Contains(anime.ID)
a.button.ajax(href="/+" + user.Nick + "/animelist/anime/" + anime.ID)
Icon("pencil")
span Edit in collection
else
button.action(data-api="/api/animelist/" + user.ID, data-action="addAnimeToCollection", data-trigger="click", data-anime-id=anime.ID)
Icon("plus")
span Add to collection
//- h3.anime-section-name Ratings
//- .anime-rating-categories
//- .anime-rating-category(title=toString(anime.Rating.Overall))
//- if anime.Status == "upcoming"
//- .anime-rating-category-name Hype
//- else
//- .anime-rating-category-name Overall
//- Rating(anime.Rating.Overall, user)
//- .anime-rating-category(title=toString(anime.Rating.Story))
//- .anime-rating-category-name Story
//- Rating(anime.Rating.Story, user)
//- .anime-rating-category(title=toString(anime.Rating.Visuals))
//- .anime-rating-category-name Visuals
//- Rating(anime.Rating.Visuals, user)
//- .anime-rating-category(title=toString(anime.Rating.Soundtrack))
//- .anime-rating-category-name Soundtrack
//- Rating(anime.Rating.Soundtrack, user)
//- if len(friends) > 0
//- h3.anime-section-name Friends
//- .anime-friends if user != nil
//- .user-avatars .buttons.anime-actions
//- each friend in friends if user.Role == "editor" || user.Role == "admin"
//- if friend.Nick != "" a.button.ajax(href=anime.Link() + "/edit")
//- if friend.IsActive() Icon("pencil-square-o")
//- .mountable span Edit anime
//- FriendEntry(friend, listItems)
//- else
//- .mountable
//- .inactive-user
//- FriendEntry(friend, listItems)
//- if anime.Relations() != nil && len(anime.Relations().Items) > 0 if user.AnimeList().Contains(anime.ID)
//- h3.anime-section-name Relations a.button.ajax(href="/+" + user.Nick + "/animelist/anime/" + anime.ID)
//- .anime-relations Icon("pencil")
//- each relation in anime.Relations().Items span Edit in collection
//- a.anime-relation.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user)) else
//- img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user)) button.action(data-api="/api/animelist/" + user.ID, data-action="addAnimeToCollection", data-trigger="click", data-anime-id=anime.ID)
//- .anime-relation-type= relation.HumanReadableType() Icon("plus")
//- .anime-relation-year span Add to collection
//- if relation.Anime().StartDate != ""
//- span= relation.Anime().StartDate[:4]
//- if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != "" //- h3.anime-section-name Ratings
//- h3.anime-section-name Video //- .anime-rating-categories
//- .anime-trailer.video-container //- .anime-rating-category(title=toString(anime.Rating.Overall))
//- iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen") //- if anime.Status == "upcoming"
//- .anime-rating-category-name Hype
//- else
//- .anime-rating-category-name Overall
//- Rating(anime.Rating.Overall, user)
//- .anime-rating-category(title=toString(anime.Rating.Story))
//- .anime-rating-category-name Story
//- Rating(anime.Rating.Story, user)
//- .anime-rating-category(title=toString(anime.Rating.Visuals))
//- .anime-rating-category-name Visuals
//- Rating(anime.Rating.Visuals, user)
//- .anime-rating-category(title=toString(anime.Rating.Soundtrack))
//- .anime-rating-category-name Soundtrack
//- Rating(anime.Rating.Soundtrack, user)
//- h3.anime-section-name Popularity //- if len(friends) > 0
//- .anime-rating-categories //- h3.anime-section-name Friends
//- .anime-rating-category
//- .anime-rating-category-name Watching //- .anime-friends
//- .anime-rating= anime.Popularity.Watching //- .user-avatars
//- .anime-rating-category //- each friend in friends
//- .anime-rating-category-name Completed //- if friend.Nick != ""
//- .anime-rating= anime.Popularity.Completed //- if friend.IsActive()
//- .anime-rating-category //- .mountable
//- .anime-rating-category-name Planned //- FriendEntry(friend, listItems)
//- .anime-rating= anime.Popularity.Planned //- else
//- .anime-rating-category //- .mountable
//- .anime-rating-category-name Hold //- .inactive-user
//- .anime-rating= anime.Popularity.Hold //- FriendEntry(friend, listItems)
//- .anime-rating-category
//- .anime-rating-category-name Dropped
//- .anime-rating= anime.Popularity.Dropped
//- //- h3.anime-section-name Reviews
//- //- p Coming soon.
//- h3.anime-section-name Links //- if anime.Relations() != nil && len(anime.Relations().Items) > 0
//- .light-button-group //- h3.anime-section-name Relations
//- //- if anime.Links != nil //- .anime-relations
//- //- each link in anime.Links //- each relation in anime.Relations().Items
//- //- a.light-button(href=link.URL, target="_blank") //- a.anime-relation.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user))
//- //- Icon("external-link") //- img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user))
//- //- span= link.Title //- .anime-relation-type= relation.HumanReadableType()
//- a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener") //- .anime-relation-year
//- Icon("external-link") //- if relation.Anime().StartDate != ""
//- span Kitsu //- span= relation.Anime().StartDate[:4]
//- if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
//- h3.anime-section-name Video
//- .anime-trailer.video-container
//- iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")
//- h3.anime-section-name Popularity
//- .anime-rating-categories
//- .anime-rating-category
//- .anime-rating-category-name Watching
//- .anime-rating= anime.Popularity.Watching
//- .anime-rating-category
//- .anime-rating-category-name Completed
//- .anime-rating= anime.Popularity.Completed
//- .anime-rating-category
//- .anime-rating-category-name Planned
//- .anime-rating= anime.Popularity.Planned
//- .anime-rating-category
//- .anime-rating-category-name Hold
//- .anime-rating= anime.Popularity.Hold
//- .anime-rating-category
//- .anime-rating-category-name Dropped
//- .anime-rating= anime.Popularity.Dropped
//- each mapping in anime.Mappings //- //- h3.anime-section-name Reviews
//- a.light-button(href=mapping.Link(), target="_blank", rel="noopener") //- //- p Coming soon.
//- Icon("external-link")
//- span= mapping.Name()
//- .footer //- h3.anime-section-name Links
//- span Powered by Kitsu. //- .light-button-group
//- //- if anime.Links != nil
//- //- each link in anime.Links
//- //- 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
//- each mapping in anime.Mappings
//- a.light-button(href=mapping.Link(), target="_blank", rel="noopener")
//- Icon("external-link")
//- span= mapping.Name()
//- .footer
//- span Powered by Kitsu.
component FriendEntry(friend *arn.User, listItems map[*arn.User]*arn.AnimeListItem) component FriendEntry(friend *arn.User, listItems map[*arn.User]*arn.AnimeListItem)
CustomAvatar(friend, listItems[friend].Link(friend.Nick), friend.Nick + " => " + listItems[friend].Status + " | " + toString(listItems[friend].Episodes) + " eps | " + fmt.Sprintf("%.1f", listItems[friend].Rating.Overall) + " rating") CustomAvatar(friend, listItems[friend].Link(friend.Nick), friend.Nick + " => " + listItems[friend].Status + " | " + toString(listItems[friend].Episodes) + " eps | " + fmt.Sprintf("%.1f", listItems[friend].Rating.Overall) + " rating")

55
pages/anime/anime.scarlet
View File

@ -1,9 +1,20 @@
.anime-header .anime
horizontal max-width 1100px
margin 0 auto
< 800px .anime-header
vertical
.anime-title
text-align center
margin-bottom 0.5rem
> 800px
.anime-header .anime-header
vertical horizontal
.anime-title
text-align left
.anime-section-name .anime-section-name
font-weight bold font-weight bold
@ -21,7 +32,7 @@
.anime-cover-image .anime-cover-image
// width 142px // width 142px
width 180px width 225px
height auto height auto
border-radius 3px border-radius 3px
@ -30,7 +41,10 @@
saturate-up saturate-up
shadow-up shadow-up
.anime-summary
// ...
.anime-info .anime-info
vertical vertical
flex 1 flex 1
@ -39,10 +53,6 @@
width content-padding width content-padding
height content-padding height content-padding
.anime-title
text-align left
margin-bottom 0.5rem
.anime-alternative-title .anime-alternative-title
font-size 0.9em font-size 0.9em
margin-top 0 margin-top 0
@ -55,20 +65,23 @@
color rgba(255, 255, 255, 0.5) !important color rgba(255, 255, 255, 0.5) !important
.anime-actions .anime-actions
horizontal display none !important
justify-content center
// Action button margin // .anime-actions
margin calc(content-padding - 0.5rem) -0.5rem // horizontal
// justify-content center
// Setting z-index requires setting a background as well // // Action button margin
z-index 10 // margin calc(content-padding - 0.5rem) -0.5rem
> 1450px // // Setting z-index requires setting a background as well
.anime-actions // z-index 10
position absolute
top 0 // > 1450px
right content-padding // .anime-actions
// position absolute
// top 0
// right content-padding
.anime-rating-categories .anime-rating-categories
horizontal horizontal

3
pages/settings/settings.scarlet
View File

@ -1,3 +1,6 @@
.settings
horizontal-wrap-center
.widget-section > button, .widget-section > button,
.widget-section > .button .widget-section > .button
margin-bottom 1rem margin-bottom 1rem

4
scripts/Actions/Diff.ts
View File

@ -10,5 +10,7 @@ export function load(arn: AnimeNotifier, element: HTMLElement) {
export function diff(arn: AnimeNotifier, element: HTMLElement) { export function diff(arn: AnimeNotifier, element: HTMLElement) {
let url = element.dataset.url || (element as HTMLAnchorElement).getAttribute("href") let url = element.dataset.url || (element as HTMLAnchorElement).getAttribute("href")
arn.diff(url).then(() => arn.scrollTo(element)) arn.diff(url)
.then(() => arn.scrollTo(element))
.catch(console.error)
} }

4
scripts/AnimeNotifier.ts
View File

@ -509,7 +509,7 @@ export class AnimeNotifier {
modifyDelayed(className: string, func: (element: HTMLElement) => void) { modifyDelayed(className: string, func: (element: HTMLElement) => void) {
const maxDelay = 1000 const maxDelay = 1000
const delay = 20 const delay = 18
let time = 0 let time = 0
let start = Date.now() let start = Date.now()
@ -596,7 +596,7 @@ export class AnimeNotifier {
this.loading(true) this.loading(true)
// Delay by transition-speed // Delay by transition-speed
return delay(300).then(() => request) return delay(200).then(() => request)
.then(html => this.app.setContent(html, true)) .then(html => this.app.setContent(html, true))
.then(() => this.app.emit("DOMContentLoaded")) .then(() => this.app.emit("DOMContentLoaded"))
.then(() => this.loading(false)) .then(() => this.loading(false))

2
styles/headers.scarlet
View File

@ -2,7 +2,7 @@ h1, h2
font-size 2em font-size 2em
font-weight bold font-weight bold
text-align center text-align center
line-height 1.2em line-height 1.3em
h3 h3
font-size 1.5em font-size 1.5em

10
styles/include/config.scarlet
View File

@ -7,6 +7,10 @@ link-hover-color = rgb(242, 60, 30)
link-active-color = link-hover-color link-active-color = link-hover-color
pro-color = hsla(0, 100%, 73%, 0.87) pro-color = hsla(0, 100%, 73%, 0.87)
theme-white = bg-color
theme-black = text-color
link-hover-text-shadow = none
// UI // UI
ui-border-color = rgba(0, 0, 0, 0.1) ui-border-color = rgba(0, 0, 0, 0.1)
ui-border = 1px solid ui-border-color ui-border = 1px solid ui-border-color
@ -68,6 +72,6 @@ typography-margin = 0.4rem
// nav-height = 3.11rem // nav-height = 3.11rem
// Timings // Timings
fade-speed = 250ms fade-speed = 200ms
transition-speed = 200ms transition-speed = 150ms
mountable-transition-speed = 250ms mountable-transition-speed = 200ms

4
styles/include/dark.scarlet
View File

@ -3,8 +3,7 @@ text-color = hsl(0, 0%, 90%)
bg-color = hsl(0, 0%, 24%) bg-color = hsl(0, 0%, 24%)
link-color = hsl(81, 100%, 56%) link-color = hsl(81, 100%, 56%)
link-hover-color = hsl(81, 100%, 66%) link-hover-color = hsl(81, 100%, 66%)
ui-background = hsla(0, 0%, 18%, 0.5) ui-background = hsla(0, 0%, 8%, 0.5)
tab-hover-background = link-hover-color
theme-white = bg-color theme-white = bg-color
theme-black = text-color theme-black = text-color
@ -15,4 +14,5 @@ main-color = link-color
link-active-color = link-hover-color link-active-color = link-hover-color
button-hover-color = link-hover-color button-hover-color = link-hover-color
button-hover-background = hsla(0, 0%, 12%, 0.5) button-hover-background = hsla(0, 0%, 12%, 0.5)
tab-hover-background = link-hover-color
loading-anim-color = link-color loading-anim-color = link-color